[Django教學13]Django Allauth套件整合Google登入驗證實作教學

Photo by NordWood Themes on Unsplash

現在有些網站或平台，登入時會提供額外的第三方登入驗證方式，像是Facebook、Google及Twitter等，讓使用者能夠省去註冊新帳號的動作，以提升使用體驗及效率。

而利用Python的Django框架來建置網站，想要提供使用者這樣的服務，除了可以透過第三方應用程式所提供的API，自行實作所有的串接外，Django allauth套件是一個非常受歡迎且整合了許多知名的第三方登入驗證功能，只要進行基本的設定，就能夠讓開發人員快速與社群帳號的登入驗證進行整合。所以本文將以[Django教學8]Django UserCreationForm實作網站登入驗證及註冊功能分享文章中所實作的Django登入為基礎，示範如何利用Django allauth套件，加入Google的登入方式。其中的重點包含：

安裝Django allauth套件
建立Google應用程式
Django整合實作

一、安裝Django allauth套件

Django allauth套件支援Python 3.5+及Django 2.0+，詳細的參考文件(Document)可以前往Django Package官網的django-allauth。

首先，利用以下的指令來進行安裝：


$ pip install django-allauth

安裝完成後，開啟Django專案的settings.py，在INSTALL_APPS中，加入allauth套件及所需的第三方登入驗證提供者(provider)，如下範例：


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # 自己的應用程式
    'accounts.apps.AccountsConfig',

    # allauth
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',

    # google provider
    'allauth.socialaccount.providers.google',
]

SITE_ID = 1

其中的SITE_ID為網站ID，自行定義即可。接著，開啟Django專案的urls.py，將Django allauth套件的urls加入，如下範例：


from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('accounts.urls')),  # 自己的應用程式網址
    path('accounts/', include('allauth.urls')),  # django-allauth網址
]

設定完成後，利用以下的指令執行Migration(資料遷移)，將allauth套件的資料模型同步至資料庫中：


$ python manage.py migrate

啟動本地端伺服器，並且連線至Django Administration(管理員後台)，即可看到Django allauth套件的資料模型，如下圖：

二、建立Google應用程式

Django allauth的基本設定完成後，由於要與Google進行串接，這時候就需要取得Google所提供的編號(ID)及密鑰(Key)，才有辦法進行存取，而各大網站在提供Google的登入方式時，通常會使用Gmail來進行驗證，所以第一步要做的事情就是前往Google Gmail API，藉由啟用API的方式，來取得編號(ID)及密鑰(Key)。點擊「Enable the Gmail API」按鈕，如下圖：

在啟用的過程中，Google會幫我們建立一個Quickstart應用程式，並且加入Gmail API，接著，就會產生一組應用程式的Client ID(編號)及Client Secret(密鑰)，如下圖：

接下來，就要設定Google OAuth重新導向的網址，也就是讓Google許可我們的網站利用Google帳號進行登入驗證，不然Google會不認得我們的網站網址，而發生錯誤。

前往Google API Console，在上方選擇剛剛所建立的Quickstart應用程式，接著點擊左側的憑證，在「用戶端ID」的地方，可以看到Google所產生的「OAuth client」，如下圖：

點擊進入後，在下方的「已授權的重新導向URI」，新增Django allauth套件Google提供者(provider)的重新導向網址，如下圖：

接著，回到Django Administration(管理員後台)首頁，選擇「Sites」資料模型，將example.com修改為自己的網站，由於本文以本地端伺服器來執行，所以修改的內容如下：

儲存後，回到Django Administration(管理員後台)首頁，選擇「Social applications」資料模型，來新增Google社群應用程式，如下圖：

其中的Client id及Secret key就是剛剛所取得的應用程式Client ID(編號)及Client Secret(密鑰)。在Sites(網站)的地方，將自己的網站新增到右方的區塊中。

三、Django整合實作

首先，開啟Django專案中的settings.py，新增Google驗證成功後，所要導向的頁面網址(LOGIN_REDIRECT_URL)設定，如下範例：


LOGIN_REDIRECT_URL = '/'  # 登入後的首頁網址

接著，在登入畫面的樣板(Template)中，將Django allauth套件中的socialaccount載入，並且在Google登入的按鈕，設定Django allauth的provider_login_url、提供者名稱及導向的方法(method)，當使用者點擊按鈕後，就會依照指定的提供者(provider)，使用導向的方法(method)連結到相應的登入網址，如下範例：

{% extends 'base.html' %}
{% load socialaccount %}

{% block content %}

<h1>AuthDev</h1>
<h3>登入</h3>

<form action="" method="POST">

    {% csrf_token %}
    {{ form }}

    <input class="btn btn-primary" type="submit" value="" />

    <a class="btn btn-danger" href="{% provider_login_url 'google' method='oauth2' %}">Google登入</a>

    <p>還沒有帳號嗎? <a href="{% url 'Register' %}">註冊</a></p>

</form>

{% endblock  %}

執行結果

本文以Google登入為例，所以在點選Google登入按鈕時，會導向到Google的登入網址，來選擇帳號及輸入密碼，如下畫面：

驗證成功後，就會導向到settings.py檔案中，剛剛所設定的LOGIN_REDIRECT_URL網址，本文為應用程式的首頁，如下圖：

四、小結

透過以上的實作，除了瞭解Python在Django框架中，整合Google登入驗證的方式外，也可以在過程中感受到，Django allauth套件非常容易使用，並且提升與Google進行整合的效率。另外，Django allauth還提供了很多其它的應用程式整合，像是Shopify、Slack、Amazon及LinkedIn等，可以參考django-allauth官方文件。

本文的實作歷程可以參考下方的GitHub網址，如果有碰到任何問題或是有相關的整合經驗，歡迎留言和我分享唷。

如果您喜歡我的文章，請幫我按五下Like(使用Google或Facebook帳號免費註冊)，支持我創作教學文章，回饋由LikeCoin基金會出資，完全不會花到錢，感謝大家。

GitHub網址：https://github.com/mikeku1116/django-authdev

有想要看的教學內容嗎?歡迎利用以下的Google表單讓我知道，將有機會成為教學文章，分享給大家😊

https://forms.gle/UW8u9XddoY17HjaSA

你可能有興趣的文章