OAuth 2.0 授權碼流程

Vibe Prompt

「幫我實作 OAuth 2.0 Authorization Code + PKCE Flow，用 Supabase 做 Identity Provider。」

流程

1. 前端 → Supabase: 跳轉到授權頁面
   GET https://<project>.supabase.co/auth/v1/authorize
     ?client_id=<client_id>
     &redirect_uri=<redirect_uri>
     &response_type=code
     &code_challenge=<SHA256(code_verifier)>
     &code_challenge_method=S256
     &scope=openid profile email

2. 使用者登入並授權

3. Supabase → 前端: 跳轉回 redirect_uri 帶授權碼
   https://myapp.com/auth/callback?code=<auth_code>

4. 前端 → 後端: 傳授權碼

5. 後端 → Supabase: 換取 Token
   POST https://<project>.supabase.co/auth/v1/token
     ?grant_type=authorization_code
     &code=<auth_code>
     &code_verifier=<original_code_verifier>
     &redirect_uri=<redirect_uri>

6. Supabase → 後端: access_token + refresh_token + id_token

7. 後端 → 前端: 設定 Session Cookie

Next.js API Route

// app/api/auth/callback/route.ts
import { createClient } from '@/utils/supabase/server'
import { NextResponse } from 'next/server'

export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get('code')
  const next = searchParams.get('next') ?? '/'
  
  if (code) {
    const supabase = createClient()
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    if (!error) {
      return NextResponse.redirect(`${origin}${next}`)
    }
  }
  
  return NextResponse.redirect(`${origin}/auth-error`)
}

PKCE 好處

• ✅ 授權碼在傳輸中被攔截也無法使用（需要 code_verifier）
• ✅ 不需要 client_secret（適合 SPA）
• ✅ 防止授權碼攔截攻擊

本章總結

• 理解核心概念與原理
• 掌握實作方法與技巧
• 熟悉常見問題與解決方案
• 能夠應用於實際專案

延伸閱讀

• 官方文件與 API 參考
• GitHub 開源專案範例
• 相關技術書籍與課程
• 社群討論與技術部落格

實作範例

基礎範例

# 本節提供一個完整的實作範例
# 讓你能夠將所學應用到實際專案中

步驟說明

1. 初始化：設定開發環境與必要工具
2. 資料準備：收集與整理所需資料
3. 核心實作：實作主要功能與邏輯
4. 測試驗證：確保功能正確運作
5. 最佳化：調整效能與使用者體驗

常見錯誤

| 錯誤類型 | 可能原因 | 解決方法 | |---------|---------|---------| | 編譯錯誤 | 語法問題 | 檢查程式碼語法 | | 執行錯誤 | 環境問題 | 確認相依套件已安裝 | | 邏輯錯誤 | 演算法問題 | 逐步除錯與測試 | | 效能問題 | 效率問題 | 使用效能分析工具 |

程式碼範例

# 範例程式碼
import sys

def main():
    # 主程式邏輯
    print("Hello, World!")

if __name__ == "__main__":
    main()

相關資源

• 官方文件
• API 參考手冊
• 開源專案範例
• 技術社群討論