Django аутентификация с Facebook, Instagram и LinkedIn

Вступление

Нет ничего хуже, для пользователей интернет сайтов, чем вручную проходит процесс регистрации для получения расширенного доступа к сервису предлагаемому веб сайтом. В процессе регистрации пользователь каждый раз сталкивается с проблемой выдумывания и запоминания надежный паролей. Нежелания каждый раз запоминать пароль может привести к созданию либо несколько учетных записей на сайте или вообще отказа от желания получения сервиса.

Современные веб сервисы решают эту проблему с помощью аутентификации через социальные сети. Это решение позволяет не только избавится от необходимости выдумывания нового имени и пароля, но так же значительно уменьшить время регистрации.

Эта статья посвящена созданию простого приложение Django, которое позволит пользователям входить через свои учетные записи Facebook, Instagram и LinkedIn. Для этого мы будем использовать библиотеку social-auth-app-django. Мы также узнаем, как извлечь дополнительную информацию, такую как изображение профиля и имя пользователя из соответствующих социальных учетных записей.

В конце этого урока у нас будет финальное приложение, которое работает следующим образом:

Исходный код этого проекта доступен здесь на GitHub.

Предварительные требования

Для того, чтобы следовать этому руководству, на вашем компьютере должны быть установлено следующее:

1. Python3
2. Pipenv

Pipenv — это инструмент, который призван привнести в мир Python лучшее из всех упаковочных миров (bundler, composer, npm, cargo, yarn и т. д.).

В этом руководстве предполагается, что читатель имеет базовые знания по работе с Django. У вас также должны быть учетную запись в Facebook, Instagram и LinkedIn.

И так начнем

Настройка приложения Django

В этом разделе мы создадим новый проект Django и установим зависимости. Начнем с создания новой папки и превращения ее в каталог проекта:

$ mkdir django_social_app
$ cd django_social_app

Далее создадим и активируем новую виртуальную среду, используя Pipenv; это приводит к созданию изолированной среды Python. Затем установим django и social-auth-app-django:

$ pipenv shell --python 3.6
(django_social_app)$ pipenv install django social-auth-app-django

social-auth-app-django упрощает реализацию аутентификации через социальные сети с помощью Django.

Далее создадим новый проект Django, назовем его social_app:

(django_social_app)$ django-admin startproject social_app
(django_social_app)$ cd social_app

Примечание. Важно, чтобы мы запускали команды из терминала, в котором произведен вход в созданную нами виртуальную среду, т. е. отображается (django_social_app) в начале каждой командной строки.

Далее мы создадим приложение Django под названием core, которое будет содержать все наши вьюхи и шаблоны:

(django_social_app)$ python manage.py startapp core

Примечание. Для запуска команд python manage.py … вам нужно находиться в каталоге social_app.

Далее найдите файл settings.py в папке social_app/social_app и добавьте core, и social-auth-app-django в INSTALLED_APPS:

 #social_app/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'social_django', # add this 
    'core' # add this
]

И теперь, давайте запустим миграцию базы данных:

(django_social_app) $ python manage.py migrate

Настройка классов аутентификации

Под капотом Django ведет список «бэкэндов аутентификации», которые она проверяет во время аутентификации пользователей. Если первый метод аутентификации завершается неудачно, Django пробует второй и т. д., пока не будут проверены все бэкэнды.

Массив AUTHENTICATION_BACKENDS содержит список базовых классов аутентификации (в виде строк) и по умолчанию имеет значение:

['django.contrib.auth.backends.ModelBackend']

Нам нужно обновить его и добавить новые классы аутентификации, чтобы разрешить аутентификацию через социальные сети, которые мы рассматриваем в этом руководстве.

Чтобы обновить это, просто добавьте следующий код в файл settings.py:

#social_app/settings.py

#add this
AUTHENTICATION_BACKENDS = [
    'social_core.backends.linkedin.LinkedinOAuth2',
    'social_core.backends.instagram.InstagramOAuth2',
    'social_core.backends.facebook.FacebookOAuth2',
    'django.contrib.auth.backends.ModelBackend',
]

Весь список социальных сетей, которые поддерживает social-auth-app-django, можно найти здесь.

Добавляем шаблоны и статику

До сих пор мы работали только над начальной настройкой приложения, теперь давайте перейдем к чему-то визуальному. В этом разделе мы создадим основы шаблонов, которые будут отображать приложение.

Давайте создадим новую папку в core, она должна называться templates:

(django_social_app) $ cd core/
(django_social_app) $ mkdir templates/

Внутри папки templates создадим три файла:

1. base.html
2. login.html
3. home.html

В файл base.html внесем следующий код:

<!-- templates/base.html -->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous" />
    <link rel="stylesheet" href="{% static 'css/index.css' %}" />
    <title>Social Auth with Django</title>
</head>
<body>
    <div class="container-fluid">
        <div>
            <h1 class="text-white text-center">{% block title %}{% endblock %}</h1>
            <div class="card p-5">
                {% block content %}
                {% endblock %}
            </div>
        </div>
    </div>
</body>
</html>

В файл login.htm сделующий код:

<!-- templates/login.html -->

{% extends 'base.html' %}
{% block title %} Sign in {% endblock %}
{% block content %}
<div class="row">
    <div class="col-md-8 mx-auto social-container my-2 order-md-1">
        <button class="btn btn-danger  mb-2">
            <a href="#">Login with Instagram</a>
        </button>
        <button class="btn btn-primary mb-2">
            <a href="#">Login with Facebook
            </a>
        </button>
        <button class="btn btn-info mb-2">
            <a href="#">Login with LinkedIn</a>
        </button>
    </div>
</div>
</div>
{% endblock %}

И наконец в файл home.html следующий:

<!-- templates/home.html -->

{% extends 'base.html' %}
{% block title %} Home {% endblock %}
{% block content %}
<div class="row">
    <div class="col-sm-12 mb-3">
       <h4 class="text-center"> Welcome {{ user.username }} </h4>
    </div>
</div>
{% endblock %}

Нам нужны некоторые стили, чтобы помочь нашему проекту выглядеть прилично, поэтому давайте создадим папку с именем static в основной папки core.

Далее создайте папку с именем css в каталоге static и, наконец, создайте файл index.css в папке css.

Теперь откройте файл index.css и внесите в него следующий код:

img {
  border: 3px solid #282c34;
}
.container-fluid {
  height: 100vh;
  background-color: #282c34;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container-fluid > div {
  width: 85%;
  min-width: 300px;
  max-width: 500px;
}
.card {
  width: 100%;
}
.social-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.btn a, .btn a:hover {
  color: white;
  text-decoration: none ;
}

Настройка вьюх и URL

В этом разделе мы определим вьюхи и зарегистрируем URL-адреса, необходимые приложению для работы. Откройте файл core/views.py и замените его содержимое приведенным ниже фрагментом:

# core/views.py

from django.shortcuts import render
from django.contrib.auth.decorators import login_required


# Create your views here.
def login(request):
    return render(request, 'login.html')


@login_required
def home(request):
    return render(request, 'home.html')

Далее мы зарегистрируем маршруты для приложения и прикрепим соответствующие им функции вьюх. Замените содержимое файла social_app/urls.py следующим кодом:

# social_app/urls.py

from django.contrib import admin
from django.urls import path, include
from django.contrib.auth import views as auth_views
from core import views


urlpatterns = [
    path('admin/', admin.site.urls),
    path("login/", views.login, name="login"),
    path("logout/", auth_views.LogoutView.as_view(), name="logout"),
    path('social-auth/', include('social_django.urls', namespace="social")),
    path("", views.home, name="home"),
]

В файле settings.py нам нужно установить четыре новых значения — LOGIN_URL,
LOGOUT_URL,
LOGIN_REDIRECT_URL и LOGOUT_REDIRECT_URL
Они будут использоваться при перенаправлении пользователя после завершения аутентификации:

# social_app/settings.py

# [...]

LOGIN_URL = 'login'
LOGIN_REDIRECT_URL = 'home'
LOGOUT_URL = 'logout'
LOGOUT_REDIRECT_URL = 'login'

# [...]

Фантастика! Теперь мы можем запустить приложение, чтобы увидеть, что мы создавали до сих пор. Перейдите перейдем в папку проекта и запустим сервер с помощью этой команды:

(django_social_app) $ python manage.py runserver

Мы можем просмотреть приложение по адресу http://localhost:8000
Мы будем сразу же перенаправлены на /login, поскольку мы не аутентифицированы:

Хорошо выглядит! В следующих разделах мы зарегистрируем наше приложение в социальных сетях, чтобы пользователи могли проходить аутентификацию через социальные сети.

Аутентификация через Facebook

В этом разделе мы настроим аутентификацию через Facebook.

Получение учетных данных Facebook

Перейдите на страницу разработчиков Facebook, после входа в систему нажмите Add a New App и введите сведения о приложении в появившемся модальном окне:

Как только приложение будет создано, вы будете перенаправлены на панель мониторинга приложения. В левой части экрана нажмите ** Settings, затем нажмите ** Basic, которая находится прямо под ним.

Когда загрузится новый экран, в разделе App Domains добавьте localhost следующим образом:

Теперь прокрутите вниз, пока не увидите опцию с надписью Add Platform, нажмите на нее и выберите опцию Website. Это создаст раздел веб-сайта, где вы увидите Site URL, введите http://localhost:8000/ и нажмите кнопку Save Change:

Теперь скопируйте App ID и App secret с панели инструментов приложений и добавьте их в файл settings.py:

# social_app/settings.py

#[...]

SOCIAL_AUTH_FACEBOOK_KEY = YOUR_APP_KEY        # App ID
SOCIAL_AUTH_FACEBOOK_SECRET = YOUR_APP_SECRET  # App Secret

#[...]

Замените YOUR_APP_ * значениями из панели инструментов вашего приложения Facebook.

Далее обновите URL-адрес кнопки Login with Facebook в файле login.html следующим образом:

<!-- templates/login.html -->

    <button class="btn btn-primary mb-2">
        <a href="{% url 'social:begin' 'facebook' %}">Login with Facebook</a>
    </button>

Запустите веб-сервер и зайдите по адресу localhost:8000/login, чтобы проверить, что теперь мы можем войти в приложение через Facebook:

(django_social_app) $ python manage.py runserver

Когда мы нажимаем кнопку Login with Facebook, мы перенаправляемся на страницу, аналогичную приведенной ниже:

Нажав на кнопку Continue as USERNAME вы будете перенаправлены на домашнюю страницу, где будет отображаться ваше имя пользователя. Это значит что мы успешно прошли аутентификацию через Facebook:

Хотите знать, что только что произошло под капотом? Давайте разберемся; для этого нам нужно создать учетную запись суперпользователя для доступа к панели администратора:

(django_social_app) $ python manage.py createsuperuser

Вы получите запрос на ввод имени пользователя, адреса электронной почты и пароля. Обязательно введите данные, которые вы можете запомнить, потому что они понадобятся вам для входа в панель администратора.

После создания учетной записи суперпользователя, запустите сервер и зайдите в админ-панель по этому адресу — http://localhost:8000/admin/

Мы видим, что был создан новый пользователь (помимо суперпользователя) в категории Пользователи:

Мы также увидим, что есть новая учетная запись в категории User social auths:

Когда пользователь входит в приложение с помощью Facebook (или через любую другую социальную сеть), создается новый объект Пользователя и User Social Auth. Объект User Social Auth создается и связывается с учетной записью пользователя только в первый вход, затем впоследствии пользовательский объект просто запрашивается из базы данных.

Объект пользователя создается вместе со сведениями, полученных от социальной сети. В нашем случае Facebook отправил нам поля first_name и last_name создаваемого пользовательского объекта, а имя пользователя (username) было создано автоматически через объединение first_name и last_name.

Некоторые социальные сети (например Instagram) сразу возвращают имя пользователя (username) на своей платформе, и оно используется (вместо конкатенации) для созданного объекта пользователя в приложении.

Допустим мы не только хотим, чтобы наше приложение просто отображало имя пользователя, а так же мы хотим получить дополнительные данные пользователя, такие как изображение профиля, поэтому давайте запросим дополнительные данные у Facebook.

Примечание. Чтобы продолжить, вам необходимо разлогинится из панели администратора.

Откройте файл settings.py и обновите его соответствующим образом:

# settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'social_django.context_processors.backends', # add this
                'social_django.context_processors.login_redirect', # add this
            ],
        },
    },
]

SOCIAL_AUTH_FACEBOOK_KEY = YOUR_APP_SECRET          # App ID
SOCIAL_AUTH_FACEBOOK_SECRET = YOUR_APP_SECRET       # App Secret
SOCIAL_AUTH_FACEBOOK_SCOPE = ['email', 'user_link'] # add this
SOCIAL_AUTH_FACEBOOK_PROFILE_EXTRA_PARAMS = {       # add this
  'fields': 'id, name, email, picture.type(large), link'
}
SOCIAL_AUTH_FACEBOOK_EXTRA_DATA = [                 # add this
    ('name', 'name'),
    ('email', 'email'),
    ('picture', 'picture'),
    ('link', 'profile_url'),
]

Контекстные процессоры (context processors) social_django помогают в добавлении данных бэкенда и ассоциаций их с контекстом шаблона. Это облегчает нам доступ к данным о проверенном пользователе, используя теги шаблона. Вы можете прочитать больше об этом здесь.

Когда пользователь входит в приложение через Facebook, мы можем получить доступ к подмножеству данных пользователя, используя разрешения (permissions); разрешения — это то, что у нас спрашивается (можем ли мы получить доступ к данным на Facebook) во время процесса входа. В приведенном выше коде SOCIAL_AUTH_FACEBOOK_SCOPE содержит список разрешений для доступа к данным, которые требуются нашему приложению. Разрешения email и user_link запрашивают доступ к электронной почте пользователя и ссылке профиля соответственно.

Давайте запустим сервер сейчас, и заново зайдите на http://localhost:8000/login/ и попробуйте войти через Facebook:

Нажмите Continue as USERNAME чтобы предоставит приложению доступ к личным данным пользователя на Facebook. По этой причине, чтобы запросить некоторые разрешения, вам нужно будет отправить ваше приложение на проверку командой Facebook, чтобы убедиться, что получаемые данные используются по назначению. Вы можете найти список разрешений Facebook здесь.

SOCIAL_AUTH_FACEBOOK_PROFILE_EXTRA_PARAMS имеет ключ — fields, его значение представляет собой список атрибутов, которые должны быть возвращены Facebook, когда пользователь успешно вошел в систему. Значения зависят от SOCIAL_AUTH_FACEBOOK_SCOP.

Когда пользователь входит в систему с помощью Facebook, API Facebook возвращает данные, запрошенные в SOCIAL_AUTH_FACEBOOK_PROFILE_EXTRA_PARAMS. А чтобы сохранить данные в базе данных, нам нужно указать их в SOCIAL_AUTH_FACEBOOK_EXTRA_DATA.

Дополнительные данные будут храниться в поле extra_data объекта User Social Auth:

Теперь давайте обновим внешний интерфейс для отображения дополнительных данных, которые мы получили от Facebook, откроем файл home.html и заменим его содержимое следующим:

<!-- templates/home.html -->

{% extends 'base.html' %}
{% block title %} Home {% endblock %}
{% block content %}
  <div class="row">
    <div class="col-sm-12 mb-3">
      <h4 class="text-center">Welcome {{ user.username }}</h4>
    </div>

        <!-- Add from here -->
    {% for ass in backends.associated %}
      {% if ass.provider == 'facebook' %}
        <div class="col-md-6 text-center">
            <img src="{{ass.extra_data.picture.data.url}}" alt="" width="150" height="150" style="border-radius: 50%">
        </div>
        <div class="col-md-6 social-container my-2">                 <p> Signed in via:  {{ ass.provider }} </p>
            <p> Name:  {{ ass.extra_data.name }} </p>
            <p> Provider url: <a href="{{ass.extra_data.profile_url}}">link</a></p>
        </div>
      {% endif %}
    {% endfor %}
    <div class="col-sm-12 mt-2 text-center">
      <button class="btn btn-danger">
        <a href="{% url 'logout' %}">Logout</a>
      </button>
    </div>
        <!-- End here -->
  </div>
{% endblock %}}

Теперь мы можем зайти на домашний адрес приложения — http://localhost: 8000/ — в веб-браузере и посмотреть дополнительные данные:

Примечание: теперь у нас есть доступ к данным, которые хранятся в поле extra_data, потому что мы добавили процессоры контекста вTEMPLATES; это позволяет нам получать доступ к данным `backends ‘в веб-интерфейсе.

Поздравляем! мы успешно прошли проверку подлинности через Facebook и теперь можем перейти к настройке следующего поставщика социальных сетей.

Аутентификация через Instagram

Так как мы уже обсудили детали того, как все это работает, теперь мы можем настроить аутентификацию Instagram всего за три шага:

• Получить учетные данные API
• Настроить бэкэнд
• Настроить фронтенд

Поехали!

Получение учетных данных API

Зайдите на страницу разработчиков Instagram и нажмите Register Your Application:

В появившемся экране нажмите Register a New Client и заполните данные для приложения:

Примечание. Instagram (и большинство поставщиков социальных сетей) требуют URL-адреса перенаправления, который будет являться адресом, на который браузер пользователя будет перенаправлен после аутентификации. Для этого урока мы будем использовать этот адрес http://localhost:8000/social-auth/complete/instagram/. Вы можете узнать больше об этом здесь.

При успешной регистрации приложения появится такой экран:

Теперь нажмете на опцию Manage, чтобы получить Client ID и Client Secret приложения:

Примечание: нам нужен ID и Secret для настройки бэкэнда.

Настройка Бэкэнд

Давайте добавим этот код в файл settings.py:

# settings.py

#[...]

# add this code
SOCIAL_AUTH_INSTAGRAM_KEY = YOUR_CLIENT_ID         #Client ID
SOCIAL_AUTH_INSTAGRAM_SECRET = YOUR_CLIENT_SECRET  #Client SECRET
SOCIAL_AUTH_INSTAGRAM_EXTRA_DATA = [         ('user', 'user'),
]

#[...]

Замените YOUR_CLIENT_ * на значения из вашего приложения Instagram.

С помощью приведенного выше кода после аутентификации пользователя через Instagram пользовательский объект будет отправлен обратно в приложение. Мы добавляем этот объект в SOCIAL_AUTH_INSTAGRAM_EXTRA_DATA, потому что мы хотим, чтобы он был сохранен в базе данных для удобства использования.

Объект user возвращается в следующем формате:

{
  "id": ...,
  "username": ...,
  "profile_picture": ...,
  "full_name": ...,
  "bio": ...,
  "website": ...,
  "is_business": ...,
}

Настройка фронтенда

Мы хотим что бы у нас был приятный интерфейс, когда пользователь проходит аутентификацию через Instagram, поэтому давайте заменим содержимое файла home.html следующим кодом:

<!-- templates/home.html -->

{% extends 'base.html' %}
{% block title %} Home {% endblock %}
{% block content %}
<div class="row">
  <div class="col-sm-12 mb-3">
    <h4 class="text-center">Welcome {{ user.username }}</h4>
  </div>
  <!-- Add from here -->
  {% for ass in backends.associated %}
    {% if ass.provider == 'facebook' %}
      <div class="col-md-6 text-center">
        <img src="{{ass.extra_data.picture.data.url}}" alt="" width="150" height="150" style="border-radius: 50%">
      </div>
      <div class="col-md-6 social-container my-2">                 
          <p> Signed in via:  {{ ass.provider }} </p>
          <p> Name:  {{ ass.extra_data.name }} </p>
          <p> Provider url: <a href="{{ass.extra_data.profile_url}}">link</a></p>
      </div>
    {% endif %}
    <!-- Add from here -->
    {% if ass.provider == 'instagram' %}
      <div class="col-md-6 text-center">               
        <img src="{{ ass.extra_data.user.profile_picture }}" alt="" width="150" height="150" style="border-radius: 50%">
      </div>
      <div class="col-md-6 social-container my-2">
        <p>Signed in via: {{ ass.provider }} </p>
        <p> Name:  {{ ass.extra_data.user.full_name }} </p>
        <p>Provider url: <a href="https://instagram.com/{{ ass.username }}">link</a></p>
    {% endif %}
    <!-- End here -->
  {% endfor %}
  <div class="col-sm-12 mt-2 text-center">
    <button class="btn btn-danger">
      <a href="{% url 'logout' %}">Logout</a>
    </button>
  </div>
  <!-- End here -->
</div>
{% endblock %}

Обновим URL-адрес кнопки Login with Instagram в файле login.html:

<!-- templates/login.html -->

    <button class="btn btn-danger  mb-2">
        <a href="{% url 'social:begin' 'instagram' %}">Login with Instagram</a>
    </button>

Теперь мы можем запустить сервер, зайти на http://localhost: 8000/login и попытаться войти через Instagram:

Примечание. Приложение Instagram находится в тестовом режиме. Чтобы сделать это полностью рабочим, вы должны будете представить его на рассмотрение. Вы можете узнать больше об этом здесь.

Как только приложение будет авторизовано, пользователь будет авторизован и перенаправлен на домашнюю страницу:

Аутентификация через Linkedin

Мы установим аутентификацию LinkedIn так же в три этапа:

• Получить учетные данные API
• Настроить Бэкэнд
• Настроить Фронтенд

Получение учетных данных API

Давайте перейдем на страницу разработчиков Linkedin и нажмем Create app:

Заполните данные заявки:

Примечание. Большинство из этих полей являются обязательными для заполнения, и вам придется заполнить их действительными данными.

Как только приложение будет успешно создано, вы будете перенаправлены на панель мониторинга приложения. Здесь добавьте http://localhost:8000/social-auth/complete/linkedin-oauth2/ в качестве URL-адреса перенаправления и обновите приложение:

Запомните Client ID и Secret, они нам понадобится при настройке бэкэнда.

Настройка Бэкэнд

Давайте добавим этот код в файл settings.py:

# settings.py

#[...]

# add this code
SOCIAL_AUTH_LINKEDIN_OAUTH2_KEY = YOUR_CLIENT_ID         #Client ID
SOCIAL_AUTH_LINKEDIN_OAUTH2_SECRET = YOUR_CLIENT_SECRET  #Client Secret
SOCIAL_AUTH_LINKEDIN_OAUTH2_SCOPE = ['r_basicprofile', 'r_emailaddress']
SOCIAL_AUTH_LINKEDIN_OAUTH2_FIELD_SELECTORS = ['email-address', 'formatted-name', 'public-profile-url', 'picture-url']
SOCIAL_AUTH_LINKEDIN_OAUTH2_EXTRA_DATA = [
    ('id', 'id'),
    ('formattedName', 'name'),
    ('emailAddress', 'email_address'),
    ('pictureUrl', 'picture_url'),
    ('publicProfileUrl', 'profile_url'),
]

#[...]

Замените YOUR_CLIENT_ * значениями из вашего приложения LinkedIn.

Массив SOCIAL_AUTH_LINKEDIN_OAUTH2_SCOPE содержит разрешения, необходимые для доступа к данным пользователя, аналогично тому, что мы делали при настройке аутентификации через Facebook.

Массив SOCIAL_AUTH_LINKEDIN_OAUTH_FIELD_SELECTORS содержит список данных, которые должны быть возвращены, когда пользователь успешно аутентифицирован через Linkedin. Он похож на массив SOCIAL_AUTH_FACEBOOK_PROFILE_EXTRA_PARAMS для Facebook. Вы можете найти полный список элементов данных, которые могут быть запрошены здесь.

Массив SOCIAL_AUTH_LINKEDIN_OAUTH2_EXTRA_DATA содержит данные, которые мы хотим сохранить в базе данных для дальнейшего использования.

Настройка Фронтенда

Давайте заменим содержимое файла home.html следующим кодом:

<!-- templates/home.html -->

{% extends 'base.html' %}
{% block title %} Home {% endblock %}
{% block content %}
<div class="row">
  <div class="col-sm-12 mb-3">
    <h4 class="text-center">Welcome {{ user.username }}</h4>
  </div>
  <!-- Add from here -->
  {% for ass in backends.associated %}
    {% if ass.provider == 'facebook' %}
      <div class="col-md-6 text-center">
        <img src="{{ass.extra_data.picture.data.url}}" alt="" width="150" height="150" style="border-radius: 50%">
      </div>
      <div class="col-md-6 social-container my-2">                 
        <p> Signed in via:  {{ ass.provider }} </p>
        <p> Name:  {{ ass.extra_data.name }} </p>
        <p> Provider url: <a href="{{ass.extra_data.profile_url}}">link</a></p>
      </div>
    {% endif %}
    {% if ass.provider == 'instagram' %}
      <div class="col-md-6 text-center">               
        <img src="{{ ass.extra_data.user.profile_picture }}" alt="" width="150" height="150" style="border-radius: 50%"> 
      </div>
      <div class="col-md-6 social-container my-2">
        <p>Signed in via: {{ ass.provider }} </p>
        <p> Name:  {{ ass.extra_data.user.full_name }} </p>
        <p>Provider url: <a href="https://instagram.com/{{ ass.username }}">link</a></p>
    {% endif %}
    <!-- Add from here -->
    {% if ass.provider == 'linkedin-oauth2' %}
      <div class="col-md-6 text-center">
        <img src="{{ass.extra_data.picture_url}}" alt="" width="150" height="150" style="border-radius: 50%">
      </div>
      <div class="col-md-6 social-container my-2">                 
        <p> Signed in via:  Linkedin </p>
        <p> Name:  {{ ass.extra_data.name }} </p>
        <p> Provider url: <a href="{{ass.extra_data.profile_url}}">link</a></p>
      </div>
    {% endif %}
    <!-- End here -->
  {% endfor %}
  <div class="col-sm-12 mt-2 text-center">
      <button class="btn btn-danger">
          <a href="{% url 'logout' %}">Logout</a>
      </button>
  </div>
  <!-- End here -->
</div>
{% endblock %}

Мы также обновим URL-адрес кнопки Login with LinkedIn в файле login.html:

<!-- templates/login.html -->

    <button class="btn btn-info mb-2">
       <a href="{% url 'social:begin' 'linkedin-oauth2' %}">Login with LinkedIn</a>
    </button>

Теперь мы можем запустить сервер, зайти на http://localhost:8000/login и попытаться войти через LinkedIn:

Как только мы авторизуем приложение, нажав Allow, мы будем перенаправлены на домашнюю страницу:

Заключение

Мы подошли к концу этого урока. Вы узнали, как настроить социальную аутентификацию в Django, используя библиотеку social-auth-app-django с минимальной конфигурацией. Вы также узнали, как запрашивать дополнительные пользовательские данные после аутентификации пользователя через социальную сеть.

Как мы уже обсуждали в начале этой статьи, важность социальной аутентификации в современных веб-приложениях невозможно переоценить.

Код для этой статьи доступен здесь на GitHub.

Понравилась статья автора? Follow @JordanIrabor on Twitter

Автор статьи Jordan Irabor оригинал статьи: Django Authentication With Facebook, Instagram and LinkedIn