Как аутентифицировать приложения Django с использованием django-allauth

Учебники
Django

Автор выбрал Фонд свободного и открытого исходного кода для получения пожертвования в рамках программы Пиши для пожертвований.

Введение

Аутентификация – это процесс проверки подлинных или зарегистрированных пользователей в системе, который помогает обеспечить безопасность ваших программных приложений от несанкционированного доступа. Существует несколько техник аутентификации пользователей, таких как проверка имени пользователя/пароля, биометрическая аутентификация человека или изображения паролей. В веб-фреймворке Django обработка аутентификации может быть закодирована вручную, или вы можете использовать готовые модули, такие как django-allauth, django-rest-social-auth, django-registration и другие.

django-allauth – это интегрированный набор приложений Django, работающих с аутентификацией учетных записей, регистрацией, управлением и аутентификацией учетных записей сторонних (социальных). Это один из самых популярных модулей аутентификации благодаря его способности обрабатывать как локальные, так и социальные входы. Вы можете добавить поддержку дополнительных поставщиков OAuth/OAuth2 с общим кодовым базисом приложения. Он не только обрабатывает логику аутентификации, но и настраивается под ваши дизайнерские потребности.

В этом уроке вы создадите приложение Django, которое использует django-allauth для аутентификации с помощью учетной записи DigitalOcean.

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

Для этого урока вам понадобится:

Шаг 1 — Настройка среды разработки

На этом этапе вы настроите среду разработки для вашего приложения Django. Вы активируете виртуальное окружение и установите зависимости проекта.

Сначала создайте новый каталог и перейдите в него. В этом учебнике используется Django-Allauth:

  1. mkdir Django-Allauth

  2. cd Django-Allauth

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

Затем создайте виртуальное окружение с помощью Pipenv, инструмента упаковки для Python. Сначала установите pipenv:

  1. pip3 install pipenv

Затем активируйте виртуальное окружение:

pipenv shell

Затем установите зависимости, которые вы будете использовать для разработки (django и django-allauth) с помощью pipenv:

  1. pipenv install django

  2. pipenv install django-allauth

Теперь вы завершили настройку вашей среды разработки. Далее вы начнете разработку вашего приложения Django.

Шаг 2 — Создание вашего приложения Django

На этом этапе вы создадите простое одностраничное приложение Django для использования с аутентификацией django-allauth.

Первый шаг к созданию вашего приложения – создать проектное приложение, называемое Authentication в этом учебнике:

  1. django-admin startproject Authentication

Затем перейдите по пути к каталогу проекта и создайте приложение для вашего приложения; в этом учебнике используется main:

  1. cd Authentication

  2. python manage.py startapp main

В каталоге проекта используйте nano или ваш текстовый редактор для открытия settings.py для редактирования:

  1. nano Authentication/settings.py

Добавьте приложение main в список установленных приложений, как показано:

Django-Allauth/Authentication/Authentication/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'main', # новое приложение
]

Поскольку мы отображаем единственную страницу для веб-сайта, нет необходимости внесения изменений в файл models.py.

Затем откройте файл urls.py проекта для редактирования и внесите следующие изменения:

Django-Allauth/Authentication/Authentication/urls.py
from  django.contrib  import  admin
from  django.urls  import  path, include

urlpatterns = [
path('', include('main.urls')),
path('admin/', admin.site.urls),
]

Файл urls.py используется для маршрутизации приложений Django.

Затем в приложении main создайте еще один файл urls.py и добавьте следующие строки:

Django-Allauth/Authentication/main/urls.py
from  django.urls  import  path
from . import views 

urlpatterns = [
path('', views.homepage, name='homepage'),
]

Этот новый файл urls.py используется для маршрутизации файлов приложения main.

Затем откройте файл views.py и добавьте следующие строки:

Django-Allauth/Authentication/main/views.py
from  django.shortcuts  import  render

def  homepage(request):
    return  render(request=request,
    template_name= 'home.html',)

Файл views.py используется для отображения страницы home.html в каталоге шаблонов.

Далее, в корневой папке проекта (Authentication) создайте новый каталог с именем templates. В каталоге templates создайте HTML-страницу с именем home.html и добавьте следующие строки:

Authentication/templates/home.html
  1. 

  2. <html>

  3.     <head>

  4.         <style>

  5.         h3 {text-align: center;}

  6.         p {text-align: center;}

  7.         </style>

  8.     </head>

  9.     <body>        

  10.     <!-- Скомпилированный и минимизированный CSS -->

  11.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  12. 

  13.     <!-- Скомпилированный и минимизированный JavaScript -->

  14.     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  15.             

  16.         <nav>

  17.             <div class="nav-wrapper"style="background-color: teal">

  18.               <a href="#" class="brand-logo">Django-Allauth</a>

  19.             </div>

  20.           </nav>

  21.         <h3 style=center>Welcome Home</h3>

  22.         <div class="row">

  23.             <div class="col s12 m6">

  24.               <div class="card whitedarken-1">

  25.                 <div class="card-content blue-text">

  26.                   <span class="card-title">Lorem Ipsum</span>

  27.                   <p>{% lorem 1 p %}</p>

  28.                 </div>

  29.               </div>

  30.             </div>  

  31.             <div class="col s12 m6">

  32.               <div class="card white darken-1">

  33.                 <div class="card-content blue'-text">

  34.                   <span class="card-title">Lorem Ipsum</span>

  35.                   <p>{% lorem 1 p %}</p>

  36.                 </div>

  37.               </div>

  38.             </div>          

  39.           </div>

  40.           <div class="container text-dark mt-5">

  41.             <div class="row justify-content-md-center">

  42.               <div class="col md-5 p-3">

  43.                 {% if user.is_authenticated%}

  44.                 <p>Welcome, {{user.username}}</p>

  45.                 <a href="http://127.0.0.1:8000/accounts/logout/">Logout</a>

  46.                 {%else%}

  47.                 <p>Please <a href="http://127.0.0.1:8000/accounts/login/">Login</a></p>

  48.                 {%endif%}

  49.               </div>

  50.             </div>

  51.           </div>

  52.     </body>

  53. </html>

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

Веб-страница оформлена с использованием Materialize CDN, бесплатной и открытой системы доставки контента на фронтенде, основанной на Material Design. Она помогает загружать библиотеки Materialize CSS, JavaScript и jQuery для создания красивых и адаптивных проектов. Убедитесь, что у вас есть интернет-соединение для загрузки стилевых файлов через CDN.

Из пути каталога Django-Allauth/Authentication запустите веб-приложение с помощью следующей команды:

  1. python manage.py runserver

Вы увидите вывод, аналогичный следующему:

Output
Performing system checks...

System check identified no issues (0 silenced).
June 10, 2022 - 13:35:20
Django version 4.0.4, using settings 'Authentication.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Перейдите по URL-адресу http://127.0.0.1:8000/. Вы должны увидеть веб-сайт, похожий на этот:

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

На этом этапе вы создали одностраничное приложение. Далее вы настроите аутентификацию с использованием django-allauth.

Шаг 3 — Настройка django-allauth

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

Откройте Authentication/settings.py для редактирования. Под INSTALLED_APPS добавьте выделенные строки для регистрации приложений django-allauth и DigitalOcean в качестве поставщика социального входа:

Django-Allauth/Authentication/Authentication/settings.py
INSTALLED_APPS = [
    
    # Убедитесь, что добавлены эти обязательные приложения
    'django.contrib.sites',
	  # Приложения Django-allauth
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    # Социальный/внешний поставщик входа для Digital Ocean
    'allauth.socialaccount.providers.digitalocean',
]

Затем обновите раздел TEMPLATES следующим образом:

[label Django-Allauth/Authentication/Authentication/settings.py]  
# Спецификации процессоров контекста:
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
        'context_processors': [         
	 'django.template.context_processors.request',
            ],
        },
    },
]

Новая строка обрабатывает HTTP-запросы от Django-Allauth.

Затем создайте раздел для AUTHENTICATION_BACKENDS и добавьте следующие строки:

Django-Allauth/Authentication/Authentication/settings.py

AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
	  'allauth.account.auth_backends.AuthenticationBackend',
    ]

Первая строка используется для входа пользователя по имени пользователя через панель администратора Django, что вы сделаете на следующем шаге. Вторая строка используется для специфических методов аутентификации django-allauth, таких как вход через провайдера OAuth.

Затем добавьте два перенаправления аутентификации, как показано:

Django-Allauth/Authentication/Authentication/settings.py

LOGIN_REDIRECT_URL = 'homepage'
LOGOUT_REDIRECT_URL = 'homepage'

Эти строки перенаправляют пользователя на домашнюю страницу после аутентификации и после выхода из веб-сайта.

Последнее изменение в settings.py состоит в установке ID URL вашего сайта. В конце вашего файла добавьте следующую строку:

Django-Allauth/Authentication/Authentication/settings.py
# Устанавливает ID вашего сайта URL. 
SITE_ID =1

Эта строка указывает идентификатор базы данных объекта Site, связанного с файлом settings.py.

Сохраните и закройте ваш файл.

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

Django-Allauth/Authentication/Authentication/urls.py

urlpatterns = [
	...
	path('accounts/', include('allauth.urls')),
]

Эта новая строка используется для маршрутизации файла URL приложения allauth. Приложение django-allauth поставляется с набором URL-адресов для своих HTML-страниц. Некоторые URL-адреса, предоставленные allauth, включают: account_login, account_logout, account_set_password и другие. Дополнительную информацию можно найти в документации по продукту django-allauth.

Сохраните и закройте ваш файл.

На этом этапе вы настроите django-allauth в своем приложении и будете готовы использовать его для аутентификации.

Шаг 4 — Добавление стороннего поставщика аутентификации

На этом этапе вы добавите стороннюю аутентификацию для вашего приложения Django, используя django-allauth. Существует множество сторонних поставщиков аутентификации, которые вы можете использовать с django-allauth, включая социальные входы от Google, Facebook, Twitter и других, перечисленных в списке поставщиков django-allauth.

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

Войдите в свою учетную запись DigitalOcean и перейдите на платформу облачных вычислений DigitalOcean, где вы получите доступ к панели управления, похожей на эту:

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

Затем щелкните на кнопке Зарегистрировать приложение OAuth, чтобы начать регистрацию приложения OAuth для вашего приложения. Появится всплывающая форма:

Введите название проекта (Django-Allauth) и любое описание, которое вам нравится. Для раздела Введите URL домашней страницы введите один из следующих URL-адресов:

  • http://127.0.0.1:8000
  • http://localhost:8000

В разделе Введите URL обратного вызова введите один из следующих URL-адресов перенаправления:

  • http://127.0.0.1:8000/accounts/digitalocean/login/callback/
  • http://localhost:8000/accounts/digitalocean/login/callback/

Примечание: Для демонстрационных целей в этом руководстве используются localhost:8000 или 127.0.0.1:8000. При развертывании приложения в продакшн URL-адреса следует изменить, чтобы включить в себя имя домена.

После ввода информации о проекте нажмите Зарегистрировать приложение OAuth, чтобы сохранить изменения. Затем вы будете перенаправлены обратно на панель управления приложением с созданным вами приложением, как показано ниже:

Щелкните на названии приложения, чтобы получить доступ к Идентификатору клиента (Client ID) и Секрету клиента (Client secret):

Скопируйте и сохраните эти данные для последующего использования.

После настройки API на DigitalOcean вы можете добавить его в админ-панель вашего приложения Django. Чтобы получить доступ к админ-панели Django, вам сначала нужно создать суперпользователя с помощью следующей команды:

  1. python manage.py createsuperuser

Введите запрошенные данные и снова запустите сервер.

Доступ к административной панели осуществляется по URL-адресу http://127.0.0.1:8000/admin/. Войдите с данными вашего суперпользователя, и вы получите доступ к административной панели, которая выглядит следующим образом:

На левой панели щелкните Сайты, а затем Добавить сайт +, чтобы изменить существующий сайт (example.com) или добавить новый, используя http://127.0.0.1:8000, как показано ниже:

Эта конфигурация устанавливает URL-адрес вашего сайта, на котором будет реализована аутентификация DigitalOcean. В данном случае это http://127.0.0.1:8000.

Щелкните Сохранить.

Затем перейдите обратно на главную панель, щелкнув Главная. В разделе Социальные аккаунты нажмите Социальные приложения, а затем нажмите Добавить социальное приложение +. Используя данные, скопированные из консоли DigitalOcean, введите необходимые сведения для поставщика услуг, имени приложения, идентификатора клиента и секретного ключа клиента. В разделе Сайты выберите сайт, который вы только что создали, в разделе Доступные сайты, и щелкните стрелку (—>), чтобы переместить его в панель Выбранные сайты. Нажмите кнопку Сохранить, чтобы сохранить данные.

Эта конфигурация используется для подключения провайдера входа через социальные сети, используя Идентификатор клиента и Секретный ключ, которые используются как публичный и конфиденциальный идентификаторы вашего приложения соответственно. Они используются для аутентификации вашего приложения и выполнения запросов к API DigitalOcean.

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

Шаг 5 — Тестирование аутентификации

На этом этапе вы войдете на свой сайт Django, используя свою учетную запись DigitalOcean. Сначала выйдите из учетной записи администратора и перейдите на страницу входа (http://127.0.0.1:8000/accounts/login/):

Нажмите на ссылку DigitalOcean, чтобы войти с помощью DigitalOcean. (Как показано на скриншоте, другой способ аутентификации — это регистрация с использованием имени пользователя и пароля.)

На следующем экране нажмите Продолжить. Появится новая страница, на которой вам потребуется выбрать вашу учетную запись DigitalOcean Team и нажать кнопку Авторизовать приложение.

Авторизация — это процесс предоставления человеку возможности доступа к ресурсу. В этом случае вы предоставляете вашему веб-сайту доступ к вашим учетным данным для входа из DigitalOcean для аутентификации.

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

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

ПРИМЕЧАНИЕ: В процессе выполнения этого действия вы можете получить сообщение об ошибке Соответствующий запрос SocialApp не существует:

Эта проблема обычно возникает, когда неправильно указывается номер идентификатора вашего сайта, например, если example.com является первым сайтом на вашем сайте. Для решения этой проблемы найдите SITE_ID в файле settings.py и увеличьте его значение на 1, пока ошибка не исчезнет.

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

Заключение

В этом руководстве вы создали приложение Django, которое обрабатывает социальную аутентификацию, используя django-allauth. Вы интегрировали социальный вход DigitalOcean и протестировали его, войдя на свой сайт. Вы можете получить доступ к коду проекта на GitHub.

В качестве следующего шага вы можете использовать django-allauth для аутентификации любых других проектов приложений Django с любыми поставщиками django-allauth. Для получения дополнительной информации о аутентификации Django с помощью django-allauth ознакомьтесь с официальной документацией Django-Allauth и официальной документацией Django по аутентификации.

Вы также можете добавить стилизацию к страницам allauth, которые имеют базовое стандартное оформление. Чтобы добавить стили к страницам allauth, вы можете клонировать проект django-allauth с GitHub и использовать каталог django-allauth/allauth/templates из клонированного репозитория для стилизации ваших страниц.

Source:
https://www.digitalocean.com/community/tutorials/how-to-authenticate-django-apps-using-django-allauth