OAuth 2.0 與 OpenID Connect 完全解析：現代 Web 認證架構

認證 vs 授權

概念	問題	協定
認證 (Authentication)	你是誰？	OpenID Connect (OIDC)
授權 (Authorization)	你能做什麼？	OAuth 2.0

OAuth 2.0 只做授權——允許第三方應用存取使用者資源，但不告訴應用「使用者是誰」。OIDC 在 OAuth 2.0 之上增加了身分層，透過 ID Token 提供使用者身分資訊。

---

OAuth 2.0 四種授權模式

1. 授權碼模式（最安全，Web 應用首選）

使用者 → 點擊「GitHub 登入」
     → 跳轉到 GitHub 授權頁
     → 使用者同意授權
     → GitHub 回傳 authorization_code
     → 後端用 code 換取 access_token
     → 後端用 token 呼叫 GitHub API

2. PKCE 擴充（SPA/行動端必備）

純前端應用無法安全儲存 client_secret，PKCE 透過動態 code_verifier 防止授權碼攔截：

前端產生 code_verifier + code_challenge
     → 授權請求攜帶 code_challenge
     → 換取 token 時提交 code_verifier
     → 伺服器驗證 challenge === SHA256(verifier)

3. 用戶端憑證模式（服務間呼叫）

Service A → 用 client_id + client_secret 直接取得 token
         → 呼叫 Service B 的 API

4. 隱含模式（已廢棄）

token 直接透過 URL fragment 回傳 → 改用授權碼 + PKCE。

---

Token 類型對比

Token	格式	用途	有效期
Authorization Code	隨機字串	一次性，換取 token	10 分鐘
Access Token	JWT 或 opaque	存取受保護資源	15-60 分鐘
Refresh Token	隨機字串	取得新 Access Token	7-30 天
ID Token	JWT	使用者身分資訊 (OIDC)	與 Access Token 相同

使用 JWT 解碼工具 可以查看 Access Token 和 ID Token 的 payload 內容。

---

OIDC 的身分層

ID Token 是 JWT，包含使用者身分資訊：

{
  "iss": "https://accounts.google.com",
  "sub": "1234567890",
  "aud": "your-client-id",
  "exp": 1717200000,
  "email": "user@example.com",
  "name": "张三",
  "picture": "https://..."
}

Claim	含義
iss	身分提供者 (IdP)
sub	使用者唯一識別
aud	用戶端 ID
email	使用者電子郵件
name	顯示名稱

---

安全最佳實務

1. 永遠在後端驗證 Token

// ❌ 前端解碼 JWT 就認為使用者已認證
const payload = decodeJwt(token);
if (payload.exp > Date.now()) { /* 信任 */ }

// ✅ 後端驗證簽章 + 所有 claims
const verified = await verifyJwt(token, publicKey, {
  issuer: 'https://accounts.google.com',
  audience: 'your-client-id',
});

2. State 參數防 CSRF

const state = crypto.randomUUID();
sessionStorage.setItem('oauth_state', state);
// 授權 URL 中添加 &state=${state}
// 回呼時驗證 state 匹配

3. Token 儲存

環境	推薦方案
Web 後端	HttpOnly Cookie + Secure + SameSite
SPA	記憶體儲存 + Refresh Token 輪替
行動端	安全儲存 (Keychain/Keystore)

---

除錯 OAuth 流程

1. 檢查 Authorization URL 參數是否完整（client_id, redirect_uri, scope, state）
2. 用 JWT 解碼 檢查 Access Token 的 scope 和 exp
3. 驗證 redirect_uri 與註冊值完全匹配
4. 檢查 CORS 設定是否允許 token endpoint

---

總結

OAuth 2.0 + OIDC 是現代 Web 認證的基石。理解授權碼流程、PKCE 擴充、Token 類型差異，以及「前端解碼 ≠ 後端驗證」的安全原則，是每個全端開發者的必備知識。