如何使用django-allauth驗證Django應用程式

教學

Django

作者選擇了自由開源基金作為Write for DOnations計畫的捐贈接收方。

介紹

身份驗證是將真實或已註冊的使用者驗證進入系統的過程，有助於保護您的軟體應用免受未經授權的訪問。有幾種技術可用於驗證使用者，例如使用者名稱/密碼驗證、人體生物識別或圖像密碼。在Django Web框架中，身份驗證處理可以是硬編碼的，或者您可以使用現成的模組，如django-allauth、django-rest-social-auth、django-registration等。

django-allauth是一組整合的Django應用程序，處理帳戶身份驗證、註冊、管理和第三方（社交）帳戶身份驗證。由於它能夠處理本地和社交登錄，它是最受歡迎的身份驗證模組之一。您可以使用該應用程式的通用代碼庫添加對其他OAuth/OAuth2提供者的支持。它不僅處理身份驗證邏輯，而且還可以根據您的設計需求進行自定義。

在這個教程中，您將建立一個 Django 應用程序，該應用程序使用 django-allauth 來通過 DigitalOcean 帳戶進行身份驗證。

先決條件

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

A DigitalOcean account. If you do not have one, sign up for a new account.
在您的計算機上安裝了 Python 3.5+，您可以通過按照本教程如何安裝 Python 3 並設置編程環境進行操作。
對 Django Web 框架的基本知識，您可以在我們的 Django 開發系列中找到。

步驟2 — 創建您的Django應用程序

在這一步中，您將創建一個簡單的單頁Django應用程序，以便與django-allauth身份驗證一起使用。

創建應用程序的第一步是在此教程中稱為Authentication的項目應用程序：

django-admin startproject Authentication

接下來，訪問項目目錄的路徑並為應用程序創建一個應用程序；本教程使用main：

cd Authentication
python manage.py startapp main

在項目的目錄中，使用nano或您喜歡的文本編輯器打開settings.py以進行編輯：

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


<html>
    <head>
        <style>
        h3 {text-align: center;}
        p {text-align: center;}
        </style>
    </head>
    <body>        
    <!-- 编译和压缩的 CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- 编译和压缩的 JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
            
        <nav>
            <div class="nav-wrapper"style="background-color: teal">
              <a href="#" class="brand-logo">Django-Allauth</a>
            </div>
          </nav>
        <h3 style=center>Welcome Home</h3>
        <div class="row">
            <div class="col s12 m6">
              <div class="card whitedarken-1">
                <div class="card-content blue-text">
                  <span class="card-title">Lorem Ipsum</span>
                  <p>{% lorem 1 p %}</p>
                </div>
              </div>
            </div>  
            <div class="col s12 m6">
              <div class="card white darken-1">
                <div class="card-content blue'-text">
                  <span class="card-title">Lorem Ipsum</span>
                  <p>{% lorem 1 p %}</p>
                </div>
              </div>
            </div>          
          </div>
          <div class="container text-dark mt-5">
            <div class="row justify-content-md-center">
              <div class="col md-5 p-3">
                {% if user.is_authenticated%}
                <p>Welcome, {{user.username}}</p>
                <a href="http://127.0.0.1:8000/accounts/logout/">Logout</a>
                {%else%}
                <p>Please <a href="http://127.0.0.1:8000/accounts/login/">Login</a></p>
                {%endif%}
              </div>
            </div>
          </div>
    </body>
</html>

这个演示网页包含了以卡片形式呈现的示例文本和一个用于身份验证的登录区域，以供稍后使用。

这个网页使用了 Materialize CDN，这是一个基于 Material Design 的免费开源内容传送前端框架。它帮助加载 Materialize CSS、JavaScript 和 jQuery 库，使项目变得美观且响应式。确保有互联网连接以加载样式文件。

从目录路径 Django-Allauth/Authentication，使用以下命令启动 Web 应用程序：

python manage.py runserver

你將會看到類似以下的輸出：

OutputPerforming 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.

導航至網址 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 管理員面板，您首先需要有一個超級使用者，您可以使用以下命令來創建：

python manage.py createsuperuser

輸入所需的詳細信息，然後再次運行伺服器。

使用以下 URL 進入管理員面板：http://127.0.0.1:8000/admin/。使用您的超級使用者詳細信息登錄，您將訪問看起來如下的管理員儀表板：

在左側面板中，點擊Sites，然後點擊Add Site +以編輯現有網站（example.com）或添加新網站，使用http://127.0.0.1:8000，如下所示：

此配置設置您的網站 URL 伺服器，其中將實現 DigitalOcean 的身份驗證。在本例中，它是http://127.0.0.1:8000。

點擊Save。

接下來，通過點擊Home返回主儀表板。在Social Accounts部分，點擊Social Applications，然後點擊Add Social Applications +。使用您從 DigitalOcean 控制台複製的詳細信息，輸入服務提供商、應用程式名稱、客戶端 ID 和客戶端密鑰。在Sites下，選擇您剛剛在Available sites下創建的網站，然後點擊箭頭（—>）將其移入Chosen sites面板。點擊Save按鈕保存詳細信息。

此配置用於通過使用客戶端 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