Django - 使用第三方登入 (Google, Meta, LINE)

第三方登入是現代應用中常見的功能，可以讓使用者通過已有的帳號快速登入，提升用戶體驗並降低註冊門檻。本節課程將介紹如何在 Django 中整合 Google、Meta（Facebook）、以及 LINE 的第三方登入功能。

---

課程目標

1. 瞭解 OAuth2 的基本概念與工作原理。
2. 使用 django-oauth-toolkit 提供的功能，實現第三方登入。
3. 配置 Google、Meta 和 LINE 的 OAuth 設定，並處理使用者資料同步。

---

課程內容

1. OAuth2 的基本概念

OAuth2 是一種開放標準，允許應用安全地訪問其他服務的用戶數據。工作流程如下：

1. 使用者授權：用戶允許第三方應用訪問其數據。
2. 應用獲取授權碼：應用獲取用戶授權的臨時憑證。
3. 交換令牌：應用使用授權碼換取訪問令牌（Access Token）。
4. 訪問數據：應用使用令牌調用第三方 API。

---

2. 安裝相關套件

我們將使用 django-allauth 提供的現成解決方案來處理第三方登入。

安裝 django-allauth：

pip install django-allauth

在 settings.py 中加入相關設定：

INSTALLED_APPS += [
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.google',
    'allauth.socialaccount.providers.facebook',
    'allauth.socialaccount.providers.line',
]

SITE_ID = 1

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

# Django Allauth 設置
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_USERNAME_REQUIRED = True
ACCOUNT_AUTHENTICATION_METHOD = 'username_email'
LOGIN_REDIRECT_URL = '/'  # 登入後重導向的頁面
LOGOUT_REDIRECT_URL = '/'  # 登出後重導向的頁面

執行遷移以更新數據庫：

python manage.py migrate

---

3. 配置 Google 第三方登入

步驟 1：創建 Google OAuth 憑證

1. 進入 Google Cloud Console。
2. 創建專案並啟用 OAuth 同意畫面。
3. 創建 OAuth 客戶端憑證，設定重導向 URI：
   • 範例：http://localhost:8000/accounts/google/login/callback/

步驟 2：添加到 Django Allauth

進入 Django 管理後台，找到 Social Applications 模組並新增 Google 應用：

• Provider: Google
• Name: Google Login
• Client ID: 來自 Google 的 Client ID
• Secret Key: 來自 Google 的 Secret Key
• Sites: 選擇你的 SITE_ID（通常是 1）。

---

4. 配置 Meta（Facebook）登入

步驟 1：創建 Facebook 應用

1. 進入 Facebook Developers，創建應用。
2. 啟用 Facebook Login，並設定重導向 URI：
   • 範例：http://localhost:8000/accounts/facebook/login/callback/

步驟 2：添加到 Django Allauth

在 Social Applications 中新增 Facebook：

• Provider: Facebook
• Name: Facebook Login
• Client ID: 來自 Facebook 的 App ID
• Secret Key: 來自 Facebook 的 App Secret

---

5. 配置 LINE 第三方登入

步驟 1：創建 LINE Login 應用

1. 進入 LINE Developers Console。
2. 創建應用並啟用 LINE Login。
3. 在 LINE Login 設定中，添加重導向 URI：
   • 範例：http://localhost:8000/accounts/line/login/callback/

步驟 2：添加到 Django Allauth

在 Social Applications 中新增 LINE：

• Provider: LINE
• Name: LINE Login
• Client ID: 來自 LINE 的 Channel ID
• Secret Key: 來自 LINE 的 Channel Secret

---

6. 測試第三方登入

啟動開發伺服器：

python manage.py runserver

訪問 http://localhost:8000/accounts/login/，應該可以看到 Google、Meta、LINE 的登入選項。點擊相應選項，完成授權並登入應用。

---

7. 同步使用者資料

當使用者通過第三方登入後，可以同步額外的資料（如電子郵件、頭像）。使用 django-allauth 的 Signal 處理邏輯：

在 users/signals.py 中：

from allauth.account.signals import user_logged_in
from django.dispatch import receiver

@receiver(user_logged_in)
def update_user_profile(request, user, **kwargs):
    social_account = user.socialaccount_set.first()
    if social_account:
        if social_account.provider == 'google':
            user.email = social_account.extra_data.get('email', user.email)
            user.save()

將信號處理函數與應用綁定： 在 users/apps.py 中：

def ready(self):
    import users.signals

---

課堂練習

1. 設置 Google 第三方登入並測試是否能成功登入應用。
2. 整合 Meta（Facebook）登入，並同步使用者的頭像與名稱。
3. 設定 LINE 第三方登入並完成登入流程測試。

---

作業

1. 整合 Blog 系統中的第三方登入功能，並測試登入與使用者資料同步功能。
2. 為系統新增登入記錄功能，記錄使用者每次登入的時間與方式（如 Google 或 LINE）。
3. 設計一個頁面，顯示使用者的第三方帳號綁定狀態，允許使用者管理其綁定的帳號。

---