Руководство по использованию Django REST Framework для настройки аутентификации в социальных сетях.

Настройка аутентификации с помощью Django REST Framework иногда сбивает с толку новых учащихся. Есть много вещей, чтобы покрыть. Например, как мы получаем аутентификацию в социальных сетях с помощью REST API и многие другие мелочи, которые мы хотели добавить в наш проект, но нехватка знаний помешала нам реализовать это.

Прямо к делу, в этой статье я собираюсь дать вам инструкции о том, как настроить аутентификацию, которая предлагает следующее:

  • Регистрация пользователя с подтверждением электронной почты
  • Вход и выход
  • Получить информацию о вошедшем в систему пользователе
  • Обновить данные пользователя
  • Изменение пароля
  • Сброс пароля по электронной почте
  • Аутентификация в социальных сетях

Настраивать

Мы начнем с нуля. Перейдите к своему терминалу и активируйте новую виртуальную среду Python. Я использую pipenv для активации моей виртуальной среды. Следуйте этим командам:

$ mkdir django-auth && cd django-auth
$ pipenv shell
$ pipenv install django djangorestframework
$ django-admin startproject core .
$ python manage.py startapp accounts

Как и любой новый проект Django REST, я установил Django и пакет Django REST Framework. Затем запустил новый проект в текущем каталоге с именем core. Я добавил точку (.) в конце команды startproject, чтобы она не создавала дополнительный уровень каталога. Наконец, мы также создали приложение под названием Учетные записи.

После этого давайте установим пакет, который поможет нам реализовать аутентификацию для нашего проекта. Следуйте этим командам в терминале:

$ pipenv install dj-rest-auth
$ pipenv install 'dj-rest-auth[with_social]'

Я установил пакет dj-rest-auth. Затем я установил еще один пакет, который поможет нам с социальной аутентификацией и регистрацией. Когда мы установили пакет dj-rest-auth[with_social], он также установил пакет django-allauth.

Теперь, когда у нас установлены пакеты, давайте перейдем к файлу core/settings.py и добавим следующие строки:

# core/settings.py
....
INSTALLED_APPS = [
    ....
    # Extra Apps Installed/Needed
    'rest_framework',
    'rest_framework.authtoken',
    'dj_rest_auth',
    'dj_rest_auth.registration',

    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.facebook',
    'allauth.socialaccount.providers.github',
    # Local apps we created
    'accounts',
]
SITE_ID = 1
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
....

Добавьте строки, которые я добавил здесь. Для пакета allauth требуется django.contrib.sites приложения, поэтому мы добавили его в раздел INSTALLED_APPS. Также после раздела INSTALLED_APPS мы добавили SITE_ID и EMAIL_BACKEND. На данный момент мы хотим просматривать наши электронные письма в терминале/консоли. Я добавил туда двух поставщиков социальных учетных записей (Facebook, GitHub). Если вам нужны другие провайдеры, ознакомьтесь с документацией django-allauth в социальных сетях.

У нас есть все настройки. Теперь нам нужны конечные точки URL. Замените файл core/urls.py этим кодом:

# core/urls.py 
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('dj-rest-auth/', include('dj_rest_auth.urls')), 
    path('dj-rest-auth/registration/', include('dj_rest_auth.registration.urls')),
]

Я добавил два новых пути URL. Одним из них является просто dj-rest-auth/, который содержит URL-адреса для входа в систему, выхода из системы, смены пароля, пользовательских данных, проверки пользователя и т. д. Посмотрите эту страницу, чтобы узнать больше о каждой конечной точке URL-адреса. Третий URL-адрес, который мы добавили, предназначен для регистрации новых пользователей.

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

$ python manage.py makemigrations
$ python manage.py migrate
$ python manage.py runserver

После запуска сервера вы можете перейти к разным конечным точкам, например

В качестве демонстрации я создал «testuser», и после регистрации сервер прислал мне в ответ ключ, и я получил электронное письмо, которое отображается в консоли/терминале. Если я войду под новым «тестовым пользователем» с конечной точки регистрации, я получу в ответ эту страницу:

До сих пор было довольно легко настроить все. Убедитесь, что вы также проверили другие конечные точки. Я не собираюсь показывать вам каждую конечную точку, потому что я реализовал и другие вещи.

Чтобы проверить, создала ли ваша регистрация нового пользователя в базе данных или нет, остановите работающий сервер и создайте суперпользователя:

$ python manage.py createsuperuser
$ python manage.py runserver

Войдите в панель администратора с учетными данными суперпользователя и проверьте, был ли создан testuser или нет. В моем случае панель инструментов выглядит так:

Вы можете видеть, что учетная запись «testuser» была создана. Так что пока все работает. Это хорошо.

Аутентификация в социальных сетях

Пока что пользователи могут войти в систему со своим именем пользователя, электронной почтой и паролем. Но нам нужны дополнительные методы входа. В этом разделе мы реализуем вход через Facebook и GitHub.

Помните, что мы уже добавили поставщиков социальных сетей Facebook и GitHub в разделе INSTALLED_APPS в файле core/settings.py.

Далее нам нужно добавить представления в файл account/views.py. Замените содержимое файла account/views.py следующим кодом:

from django.shortcuts import render
# accounts/views.py
from allauth.socialaccount.providers.facebook.views import FacebookOAuth2Adapter
from allauth.socialaccount.providers.github.views import GitHubOAuth2Adapter
from allauth.socialaccount.providers.oauth2.client import OAuth2Client
from dj_rest_auth.registration.views import SocialLoginView
class FacebookLogin(SocialLoginView):
    adapter_class = FacebookOAuth2Adapter
class GithubLogin(SocialLoginView):
    adapter_class = GitHubOAuth2Adapter
    callback_url = "https://127.0.0.1:8000/accounts/github/login/callback/"
    client_class = OAuth2Client

Мы только что добавили два класса представления → FacebookLogin и GithubLogin. Обратите внимание, что некоторые строки разбиты на две строки из-за большой длины строки. Но в вашем случае напишите всю строку одной строкой.

Хорошо! Итак, у нас есть свои взгляды, но нам нужно их куда-то включить. В этом случае я просто импортирую их в файл cores/urls.py. Отредактируйте файл core/urls.py следующим образом:

# core/urls.py 
...
from accounts.views import FacebookLogin, GithubLogin
urlpatterns = [
    ....
    path('dj-rest-auth/facebook/', FacebookLogin.as_view(), name='fb_login'),
    path('dj-rest-auth/github/', GithubLogin.as_view(), name='github_login'),
]

Добавлены два новых представления в файл core/urls.py.

Если я сейчас зайду на https://127.0.0.1:8000/dj-rest-auth/facebook/, я получу эту страницу:

Точно так же, если я перейду на https://127.0.0.1:8000/dj-rest-auth/github/, я получу похожую страницу. Это просто означает, что наши URL-адреса и представления работают.

Приложение Facebook и GitHub

Наш код готов к работе, но нам нужно настроить некоторые вещи на их стороне. Перейдите на https://developers.facebook.com/apps и создайте новое приложение. Выберите тип приложения как Бизнес и оставьте все по умолчанию.

Идите вперед и создайте приложение. Вы будете перенаправлены на страницу панели инструментов нового приложения. На боковой панели вы получите ссылку «Добавить продукт». Нажмите на нее. Затем найдите «Вход через Facebook» и нажмите кнопку «Настроить».

Затем выберите WEB и на сайте в поле ввода URL напишите «localhost: 8000».

После этого нажмите «Сохранить» и продолжайте нажимать «Продолжить».

Посмотрите на боковую панель и нажмите «Настройки»> «Основные». Там вы получите идентификатор приложения и секрет приложения.

В этот момент перейдите по адресу https://127.0.0.1:8000/admin и добавьте новое социальное приложение.

В провайдере выбираем Facebook, далее даем любое имя. После этого вставьте идентификатор приложения Facebook в поле ввода «Идентификатор клиента» и вставьте секрет приложения Facebook в поле ввода «Секретный ключ». Затем выберите из списка сайтов example.com и переместите его в поле справа, нажав стрелку вправо. Сохрани это.

Нам нужно обновить еще одну вещь. В панели администратора перейдите в раздел Сайты › example.com и измените его доменное имя на «localhost:8000/».

Сохраните изменение.

Теперь наш сайт полностью готов к аутентификации в Facebook. Но вопрос в том, что когда я захожу на https://127.0.0.1:8000/dj-rest-auth/facebook/, я получаю три поля ввода. Откуда я беру эти значения. Это станет очень легко, когда вы добавите части внешнего интерфейса, такие как React или Vue. Но пока нам нужно получить ключи доступа вручную.

Для этого перейдите на https://developers.facebook.com/tools/accesstoken и предоставьте разрешение приложению. Затем вы получите токен пользователя и токен приложения. На другой вкладке перейдите на https://127.0.0.1:8000/dj-rest-auth/facebook/ и вставьте токен пользователя в поле ввода токена доступа.

В ответ вы получите ключ, как и при любой обычной регистрации. Чтобы убедиться, что новая учетная запись пользователя создана, перейдите в панель администратора Django › users.

Видите, новый пользователь с именем «soyeb» создан. В вашем случае это будет ваше имя пользователя Facebook.

Поздравляем. Мы добавили логин Facebook в наш проект Django REST. Вы можете продолжить, и так же, как мы создали приложение для Facebook, вы можете создать GitHub или любое другое приложение для социальных сетей со страницы разработчика и добавить его в свой проект.

Вы также можете проверить мой репозиторий GitHub по этому проекту. Там я также настроил JWT вместо токена по умолчанию.

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

Пока. Хорошего дня.

Больше контента на plainenglish.io