使用 django-allauth 对 Django 应用进行身份验证

教程
Django

作者选择了自由开源基金作为写作换赞计划的捐赠对象。

介绍

认证是验证真实或注册用户身份的过程，有助于保护您的软件应用免受未经授权的访问。有几种技术用于验证用户，如用户名/密码验证、人体生物识别或图像密码。在Django Web框架中，认证处理可以是硬编码的，也可以使用现成的模块，如django-allauth、django-rest-social-auth、django-registration等。

django-allauth是一组整合的Django应用程序，处理账户认证、注册、管理和第三方（社交）账户认证。它是最受欢迎的认证模块之一，因为它能够处理本地和社交登录。您可以通过应用的通用代码库添加对额外的OAuth/OAuth2提供商的支持。它不仅处理认证逻辑，而且可根据您的设计需求进行定制。

在本教程中，您将构建一个使用django-allauth来认证的Django应用程序，使用DigitalOcean账户进行认证。

先决条件

在进行本教程之前，您需要：

第1步 — 设置开发环境

在这一步中，您将设置您的Django应用程序开发环境。您将激活一个虚拟环境并安装项目的依赖项。

首先，创建一个新的目录并进入其中。本教程使用Django-Allauth：

  1. mkdir Django-Allauth

  2. cd Django-Allauth

确保在本教程的其余部分中使用此文件夹。

接下来，使用Pipenv创建一个虚拟环境，这是一个用于 Python 的打包工具。首先，安装pipenv:

  1. pip3 install pipenv

接下来，激活虚拟环境：

pipenv shell

然后，使用pipenv安装你将用于开发的依赖项（django 和 django-allauth）：

  1. pipenv install django

  2. pipenv install django-allauth

现在，你已经完成了设置开发环境的步骤。接下来，你将开始开发你的 Django 应用程序。

第二步 —— 创建你的 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 目录中，创建一个名为 home.html 的 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，使用以下命令启动 Web 应用程序：

  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',
            ],
        },
    },
]

新行处理来自Django-Allauth的HTTP请求。

接下来，创建一个用于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的最后一次编辑是设置您站点的URL的ID。在文件末尾添加以下行：

Django-Allauth/Authentication/Authentication/settings.py
# 设置您站点URL的ID。
SITE_ID =1

此行指定与settings.py文件相关联的Site对象的数据库ID。

保存并关闭您的文件。

接下来，打开根urls.py文件进行编辑。按如下方式添加路径到Allauth应用：

Django-Allauth/Authentication/Authentication/urls.py

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

这一新行用于路由allauth应用的URL文件。django-allauth应用提供了一组用于其HTML页面的URL。一些由allauth提供的URL包括：account_login、account_logout、account_set_password等等。查看django-allauth产品文档以获取更多信息。

保存并关闭您的文件。

在这一步中，您将在应用程序上设置 django-allauth，并准备好使用它进行身份验证。

第4步 — 添加第三方认证提供程序

在这一步中，您将使用 django-allauth 为您的Django应用程序添加第三方身份验证。您可以使用许多第三方身份验证提供程序与 django-allauth 配合使用，包括来自Google、Facebook、Twitter等的社交登录，以及 django-allauth 提供商列表 中列出的其他提供商。

在本教程中，您将使用DigitalOcean作为您的社交登录。要添加类似DigitalOcean这样的身份验证提供程序，首先您必须注册它们。

登录到您的DigitalOcean帐户，并导航到 DigitalOcean云平台，您将访问一个看起来像这样的仪表板：

点击仪表板左侧的 API 按钮，创建您的OAuth应用程序。在 应用程序和API 仪表板上，点击 OAuth应用程序 按钮，访问您网站的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应用以保存更改。然后，您将被重定向回应用程序的仪表板，显示创建的应用程序如下：

点击应用程序的名称以访问客户端ID和客户端密钥：

复制并保存这些详细信息以备后用。

设置完DigitalOcean上的API后，您现在可以将其添加到您的Django应用程序的管理面板中。要访问Django管理面板，您首先需要拥有超级用户，您可以使用以下命令创建：

  1. python manage.py createsuperuser

输入请求的详细信息，然后再次运行服务器。

使用以下URL访问管理面板：http://127.0.0.1:8000/admin/。使用超级用户详细信息登录，您将访问看起来像下面这样的管理仪表板：

在左侧面板中，点击站点，然后点击添加站点 +来编辑现有站点（example.com）或添加一个新站点，使用http://127.0.0.1:8000如下所示：

此配置设置了您的站点的URL服务器，数字海洋的身份验证将在其中实施。在这种情况下，它是http://127.0.0.1:8000。

点击保存。

接下来，通过点击主页返回主仪表板。在社交账户部分，点击社交应用，然后点击添加社交应用 +。使用您从DigitalOcean控制台复制的详细信息，输入服务提供商、应用名称、客户端ID和客户端密钥等所需详细信息。在站点下，选择您刚刚在可用站点下创建的站点，并点击箭头（—>）将其移动到已选择站点面板中。点击保存按钮保存详细信息。

此配置用于通过使用客户端ID和密钥连接社交登录提供者，它们分别用作应用程序的公共标识符和机密标识符。它们用于验证您的应用程序并向DigitalOcean的API发出请求。

在这一步中，您将 DigitalOcean 配置为您的 Django 应用的第三方认证提供商。在最后一步中，您将使用您的 DigitalOcean 帐户登录您的站点。

步骤 5 —— 测试认证

在这一步中，您将使用您的 DigitalOcean 帐户登录到您的 Django 站点。首先，以管理员身份退出登录，并导航到登录页面 (http://127.0.0.1:8000/accounts/login/)：

点击 DigitalOcean 链接以使用 DigitalOcean 登录。（如屏幕截图所示，另一种认证方式是使用用户名和密码注册。）

在下一个页面，点击 继续。将出现一个新页面，您将需要选择您的 DigitalOcean 团队帐户并点击 授权应用程序 按钮。

授权是授予某人访问资源的能力的过程。在这种情况下，您正在授权您的网站访问来自 DigitalOcean 的登录凭据以对您进行身份验证。

登录后，您应该会看到您的首页如下所示：

成功登录后，您的用户名和 退出 链接将显示在网站上。

注意: 在此过程中，您可能会收到错误消息 找不到匹配的 SocialApp 查询:

这个问题通常发生在您错误地引用了您的站点ID号码，比如如果您的站点中将example.com作为第一个站点。要解决这个问题，找到settings.py中的SITE_ID，并将其值逐步增加1，直到错误消失。

在这一步中，您使用DigitalOcean登录信息登录到您的站点，测试了您的认证配置。

结论

在本教程中，您构建了一个使用django-allauth处理社交认证的Django应用程序。您集成了DigitalOcean社交登录，并通过登录到您的站点进行了测试。您可以在GitHub上访问项目代码。

作为下一步，您可以使用django-allauth来对任何其他Django应用程序项目进行身份验证，使用django-allauth提供者中的任何一个。有关使用django-allauth进行Django身份验证的更多信息，请查看Django-Allauth官方文档和Django官方身份验证文档。

您还可以为 allauth 页面添加样式，这些页面具有基本的默认样式。要为 allauth 页面添加样式，您可以从 GitHub 克隆 django-allauth 项目，并使用克隆存储库中的 django-allauth/allauth/templates 目录来为您的页面设置样式。

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