iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 22
0
Modern Web

加速你的 Django 網站開發 - Django 的好用套件系列 第 22

22. django-allauth

目前的網站大多都支援了使用第三方的帳號登入,例如 Google 登入、Facebook 登入,那麼 Django 可以做到這樣的功能嗎?我該怎麼去讓 Django 的帳號機制支援第三方登入呢?答案是,你可以使用 django-allauth。

django-allauth 可以讓你使用本地帳號驗證 (Django) ,也可以使用第三方的帳號登入(社交帳號登入)。

專案網址:https://django-allauth.readthedocs.io/en/latest/overview.html

下面的文章主要介紹使用 Github 作為第三方帳號登入,至於其他的社交帳號登入都大同小異。

在開始之前,我建議閱讀這幾篇文章,先了解 OAuth ,這樣對於使用 django-allauth 會有很大幫助:

安裝

poetry add django-allauth

設定與使用

在 settings 的 INSTALLED_APPS 裡,增加後方註解為 # new 的這幾行。 allauth.socialaccount.providers.github 是表示使用 github 當作第三方帳號提供者。

# settings.py
# config/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.sites', # new

    'allauth', # new
    'allauth.account', # new
    'allauth.socialaccount', # new
    'allauth.socialaccount.providers.github', # new

    # custom apps go here...
]

其他的帳號提供者,可以參考原始碼裡的這個目錄,這邊就會看到許多可用的名稱:

https://ithelp.ithome.com.tw/upload/images/20200922/20012434zhEOMkR0MW.png

假設你要再加一個 Facebook ,那麼 INSTALLED_APPS 裡,就要加上 allauth.socialaccount.providers.facebook

在 settings 的最後還要加上這些設定

# settings.py
AUTHENTICATION_BACKENDS = (
    "django.contrib.auth.backends.ModelBackend",
    "allauth.account.auth_backends.AuthenticationBackend",
)

SITE_ID = 1

ACCOUNT_EMAIL_VERIFICATION = 'none'

LOGIN_REDIRECT_URL = 'home'

先執行 migrate

poetry run python manage.py migrate

最後,調整 urls

# urls.py
from django.contrib import admin
from django.urls import path, include # new

urlpatterns = [
    # ...
    path('admin/', admin.site.urls),
    path('accounts/', include('allauth.urls')), # new
    # ...
]

接下來,要去 Github 申請建立應用程式,取得 Client ID 與 Client Secret。

請直接使用這個網址:https://github.com/settings/applications/new

https://ithelp.ithome.com.tw/upload/images/20200922/200124345DnBJ1DXYZ.png

填入 Application name, Home page URL, Application description, Authorization callback URL 等欄位進行註冊。

按下 Register application 以後,會出現 application 的資訊

https://ithelp.ithome.com.tw/upload/images/20200922/20012434GWGGXUNffg.png

圖裡的 Client ID 與 Client Secret 請把它記錄下來,之後會在 Django Admin 後台用到。

如果還沒建立過 superuser 的話,先用 createsuperuser 來建立 admin

poetry run python manage.py createsuperuser

建立好之後,啟動伺服器

poetry run python manage.py runserver

啟動瀏覽器,在網址列輸入 http://localhost:8000/admin/ 進入 Admin 後台介面。

https://ithelp.ithome.com.tw/upload/images/20200922/20012434ruBtPIJ1WS.png

先進入 Sites,選擇右上角的 ADD SITE,在 Display name 輸入 127.0.0.1,Displayname 輸入 example.com ,按下儲存。

https://ithelp.ithome.com.tw/upload/images/20200922/20012434RjSV3SAHBQ.png

接著在左邊選擇 Social applications 的 +

https://ithelp.ithome.com.tw/upload/images/20200922/20012434LF1R5SkDrW.png

  • Provider 選擇 Github
  • Name 填 Github
  • Client ID / Secret Key 填入之前從 Github 那邊取得的 Client ID 與 Client Secret。
  • 把 Available sites 裡的 127.0.0.1 移到右邊的 Chosen sites

https://ithelp.ithome.com.tw/upload/images/20200922/2001243419sHOGndMF.png

到這裡,設定就完成了,完成以後,請記得登出 admin 後台。

接下來是畫面的部份,我們修改 templates/home.html

# templates/home.html
{% extends "base.html" %}
{% load socialaccount %}

{% block content %}
<h1>Home</h1>

{% if user.is_authenticated %}
<p>Welcome {{ user.username }} !!!</p>
{% else %}
<a href="{% provider_login_url 'github' %}">Sign Up</a>
{% endif %}

{% endblock content %}

先使用 {% load socialaccount %} 載入 allauth 的 template library,然後放置一個 anchor tag,href 內填入 {% provider_login_url 'github' %}

打開瀏覽器,在網址列輸入 http://localhost:8000 ,這時就會看到 Sign Up 連結,點擊以後,就會帶到 Github 授權畫面了。

https://ithelp.ithome.com.tw/upload/images/20200922/20012434ryCzOmODik.png

結語

透過 django-allauth 的輔助,網站就可以提供第三方帳號登入,讓使用者能夠更快速的註冊與登入了。

參考資料


上一篇
21. django-pdfkit
下一篇
23. whitenoise
系列文
加速你的 Django 網站開發 - Django 的好用套件30

尚未有邦友留言

立即登入留言