PKCE（Proof Key for Code Exchange：ピクシー）
PKCE（Proof Key for Code Exchange：ピクシー）は、
OAuth2 / OIDC の認可コードフローを“より安全にする”ための仕組みです。
特に SPA（React / Vue / Next.js）、モバイルアプリ、デスクトップアプリのように
“クライアントシークレットを安全に隠せない環境” で必須の保護方式です。
✅ PKCE を一言で言うと？
「ログイン後に Authorization Code を盗まれても、攻撃者は交換できないようにする仕組み」
🧠 OAuth2 の弱点を補うために生まれた
通常の「Authorization Code Flow」は
authorization_code を持っていれば 誰でも トークン交換できてしまいます。
→ 攻撃者が URL からコードを盗むと、Access Token を横取りできる危険。
PKCE はこの弱点を補強します。
🔐 PKCE の仕組み（ざっくり）
PKCE では、次の2つを使います：
-
code_verifier（長いランダム文字列）
-
code_challenge（code_verifier を SHA-256 変換したもの）
code_verifier --SHA256→ code_challenge
フローは次のように進みます：
🔍 PKCE フロー図（簡易）
① クライアントが code_verifier（秘密）を生成する
例：
s8sj3hfkDs8sdfk2...
② その SHA256 版を code_challenge として Auth0 に送る
code_challenge = SHA256(code_verifier)
③ ユーザーが Auth0 ログイン
→ ログイン成功後、Auth0 は authorization_code をアプリに返す
④ アプリは Auth0 にトークン交換リクエスト
ここで code_verifier を提出する。
Auth0 はこうチェックする：
SHA256(code_verifier) == code_challenge ?
一致すればトークン発行
一致しなければ拒否（攻撃者排除）
🎯 PKCE が防ぐ攻撃
✔ Authorization Code インジェクション攻撃
→ “攻撃者が自分のコードを被害者のアプリに注入する”
✔ Authorization Code 盗聴（URLのリダイレクトを奪う攻撃）
→ “URL からコードだけ盗んでも使えない”
✔ SPA / モバイルアプリでのトークン横取り
✨ PKCE はどんな環境で必須？
| クライアント | PKCE | 理由 |
|---|---|---|
| SPA（React, Vue, Next.js） | 必須 | シークレットを隠せない |
| モバイルアプリ | 必須 | シークレットを隠せない |
| デスクトップアプリ | 必須 | 配布物は読まれる |
| Web サーバーアプリ（バックエンドあり） | 任意 | クライアントシークレットを安全に保持できる |
| IoT クライアント | ほぼ必須 | シークレットを隠しにくい |
Auth0 や Cognito などの IDaaS は、
SPA / モバイルでは PKCE を強制的に推奨している。
📌 PKCE を使う OAuth フロー名
Authorization Code Flow with PKCE
Auth0・Cognito・Google OAuth2 などで標準。
💡 まとめ（超簡潔版）
-
PKCE = Authorization Code Flow の強化版
-
code_verifier（秘密） と code_challenge（公開） を利用
-
コードを盗まれても PKCE があると交換できない
-
SPA / モバイルアプリでは PKCE が必須
必要なら次を作れます：
-
PKCE の図をもっと詳細なフロー図にして説明
-
Auth0 + Next.js での PKCE 実装例
-
Auth0 ダッシュボードの設定方法
-
PKCE を含む OAuth 全フロー比較表