Vibe Coder

OAuth 2.0 實作:一次搞懂 Google 登入背後在做什麼

OAuth 2.0 最常用的是 Authorization Code Flow,適合有後端的網站應用。實作時要處理 Access Token 過期後用 Refresh Token 更新,並主動要求 AI 加上 state 參數防止 CSRF 攻擊、遵循最小權限原則申請 scope。
OAuth 2.0 實作:一次搞懂 Google 登入背後在做什麼

OAuth 2.0 實作:一次搞懂 Google 登入背後在做什麼

幾乎所有 SaaS 產品都有 Google 或 GitHub 登入,Vibe Coder 做產品必然會遇到,弄懂一次就永遠會了。但 OAuth 有很多安全細節,AI 生的程式常常漏掉 state 參數、沒有驗證 Token 簽名、沒有處理 Token 過期,這些都要你主動把關。

這一課走完完整的 Authorization Code Flow,以 Google 為例,學會之後 GitHub、LINE、Facebook 的流程都能舉一反三,只是 URL 和欄位名稱不同而已。

你將學到什麼

四種授權流程

Authorization Code、Implicit、Client Credentials、Device Code 分別用在哪裡。

以 Google 為例實作

從 Google Cloud Console 設定到 FastAPI 程式碼的完整流程。

Token 的生命週期

Access Token、Refresh Token、ID Token 各自的有效期與儲存方式。

常見錯誤與安全注意事項

redirect_uri_mismatch 怎麼排查,state 與 PKCE 為什麼重要。

OAuth 2.0 四種授權流程

流程適用場景需要使用者互動
Authorization Code有後端的 Web App,最常用
Implicit純前端 SPA,已不建議使用
Client Credentials機器對機器,沒有使用者
Device Code無瀏覽器的設備,例如電視是,用手機
Vibe Coder 最常用的是 Authorization Code只要你的 App 有後端,就用 Authorization Code Flow。它最安全,也是 Google、GitHub 等主流 provider 推薦的方式。

Authorization Code Flow 實作:以 Google 為例

第一步是準備工作,在 Google Cloud Console 建立專案,啟用 Google Identity,建立 OAuth 2.0 Credentials 取得 Client ID 和 Client Secret 存入環境變數,並設定 Redirect URI,也就是回調 URL。

使用者瀏覽器你的 AppGoogle① 導向並登入同意② 帶 Authorization Code 回調③ 後端用 Code 換 Token④ 回傳 Access Token⑤ 登入完成,顯示使用者資料
五個步驟看懂 Google 登入背後在做什麼。
from authlib.integrations.starlette_client import OAuth
import os

oauth = OAuth()
oauth.register(
    name="google",
    client_id=os.getenv("GOOGLE_CLIENT_ID"),
    client_secret=os.getenv("GOOGLE_CLIENT_SECRET"),
    server_metadata_url="https://accounts.google.com/.well-known/openid-configuration",
    client_kwargs={"scope": "openid email profile"},
)

# 路由一:把使用者導到 Google
async def login(request):
    redirect_uri = "http://localhost:8000/auth/callback"
    return await oauth.google.authorize_redirect(request, redirect_uri)

# 路由二:Google 回調後取得 Token
async def callback(request):
    token = await oauth.google.authorize_access_token(request)
    user = token.get("userinfo")
    return {"email": user["email"], "name": user["name"]}

Token 的生命週期

Token 類型有效期用途怎麼存
Access Token通常 1 小時呼叫 API記憶體或 Redis,不存資料庫
Refresh Token通常 30 到 90 天換新 Access Token安全的資料庫,加密儲存
ID Token(OIDC)通常 1 小時取得使用者資訊驗證後丟掉,不需要存
import requests, time

def get_valid_token(stored_token):
    # 檢查 Access Token 是否快過期
    if stored_token["expires_at"] - time.time() < 300:
        # 距離過期不足 5 分鐘,先 refresh
        r = requests.post("https://oauth2.googleapis.com/token", data={
            "grant_type": "refresh_token",
            "refresh_token": stored_token["refresh_token"],
            "client_id": CLIENT_ID,
            "client_secret": CLIENT_SECRET,
        })
        new_token = r.json()
        stored_token.update(new_token)
    return stored_token["access_token"]

常見錯誤與排查

錯誤訊息原因解法
redirect_uri_mismatchRedirect URI 和 Console 設定不符確認完全一致,包含通訊協定、port、路徑
invalid_clientClient ID 或 Secret 錯誤確認環境變數裡的值和 Console 裡一致
invalid_grantCode 已過期或已使用Authorization Code 只能用一次,有效期約 10 分鐘
access_denied使用者拒絕授權引導使用者重新授權,提供說明
token_expiredAccess Token 已過期用 Refresh Token 換新的 Access Token

AI 實作 OAuth 的注意事項

  • state 參數:防止 CSRF 攻擊,AI 常常漏掉。要求 AI 在授權 URL 加上隨機的 state 參數,回調時驗證是否一致。
  • PKCE:公開客戶端,也就是沒有後端的情況,需要的額外安全機制,AI 做純前端 App 時要求加上 PKCE。
  • Scope 最小化:只申請你真正需要的權限,不要申請完整 Drive 存取,只申請讀取範圍就好。
  • 不要在前端存 Refresh Token:Refresh Token 有效期很長,一旦洩漏影響很大,只存在後端資料庫並加密。
state 缺失是最常見的高風險漏洞沒有 state 驗證會有 CSRF 攻擊風險,惡意網站可以把使用者的 session 綁到攻擊者的帳號。這是 AI 生成程式裡最常漏掉、卻後果最嚴重的一步,一定要主動檢查。

延伸學習

把這篇文章分享給需要的人FacebookLINEThreadsX

常見問答

Vibe Coder 最常用哪一種 OAuth 流程?
只要你的 App 有後端,就用 Authorization Code Flow。它最安全,也是 Google、GitHub 等主流服務商推薦的方式,適合絕大多數有後端的網站應用。
Access Token 和 Refresh Token 差在哪裡?
Access Token 有效期通常只有一小時,用來呼叫 API;Refresh Token 有效期可達三十到九十天,專門用來換取新的 Access Token,不需要使用者重新登入。
遇到 redirect_uri_mismatch 錯誤怎麼辦?
這代表你的 Redirect URI 和 Google Cloud Console 裡設定的不完全一致,要檢查通訊協定、port、路徑是否完全相同,任何一個字元不同都會失敗。
AI 幫我寫 OAuth 程式常常漏掉什麼?
最常漏掉的是 state 參數,這是防止 CSRF 攻擊的關鍵,一定要主動要求 AI 加上,並在回調時驗證 state 是否一致。