Vibe Coder
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 | 無瀏覽器的設備,例如電視 | 是,用手機 |
Authorization Code Flow 實作:以 Google 為例
第一步是準備工作,在 Google Cloud Console 建立專案,啟用 Google Identity,建立 OAuth 2.0 Credentials 取得 Client ID 和 Client Secret 存入環境變數,並設定 Redirect URI,也就是回調 URL。
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_mismatch | Redirect URI 和 Console 設定不符 | 確認完全一致,包含通訊協定、port、路徑 |
| invalid_client | Client ID 或 Secret 錯誤 | 確認環境變數裡的值和 Console 裡一致 |
| invalid_grant | Code 已過期或已使用 | Authorization Code 只能用一次,有效期約 10 分鐘 |
| access_denied | 使用者拒絕授權 | 引導使用者重新授權,提供說明 |
| token_expired | Access Token 已過期 | 用 Refresh Token 換新的 Access Token |
AI 實作 OAuth 的注意事項
- state 參數:防止 CSRF 攻擊,AI 常常漏掉。要求 AI 在授權 URL 加上隨機的 state 參數,回調時驗證是否一致。
- PKCE:公開客戶端,也就是沒有後端的情況,需要的額外安全機制,AI 做純前端 App 時要求加上 PKCE。
- Scope 最小化:只申請你真正需要的權限,不要申請完整 Drive 存取,只申請讀取範圍就好。
- 不要在前端存 Refresh Token:Refresh Token 有效期很長,一旦洩漏影響很大,只存在後端資料庫並加密。
延伸學習
做出你的第一個 Skill
一場快閃直播的完整重製。從搞懂 Skill 的五個層級開始,帶你把一件你每天在做的重複工作,寫成一支 AI 真的會照做的 Skill ── 命名、description、輸入拆解、Workflow 訪談、Output 與 Checks,最後組成一份能通過格式檢查的 SKILL.md。
NT$ 999
ChatGPT 很強,但真正讓你下班的是 Google
六小時完整實錄。從「AI 很厲害,為什麼你還是每天加班」這個問題出發,把 Google Workspace 當成真正的工作平台重新設計一次流程 ── Sheets 的資料結構、Drive 與 Docs 的文件流、Gmail 與 Calendar 的通知系統,再用 Apps Script 讓它自己跑起來,最後收斂成一張屬於你自己的 AI 工作能力地圖。
NT$ 4,599

