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 の 4 つのグラントタイプ

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 を含める
     → トークン交換時に code_verifier を送信
     → サーバーが challenge === SHA256(verifier) を検証

3. クライアントクレデンシャル（サービス間呼び出し）

Service A → client_id + client_secret で token を直接取得
         → Service B の API を呼び出し

4. インプリシットフロー（非推奨）

~~token が URL fragment で直接返却~~ → 認可コード + PKCE を使用。

トークンタイプの比較

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. トークンは必ずバックエンドで検証

// ❌ フロントエンドで 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. CSRF 対策の State パラメータ

const state = crypto.randomUUID();
sessionStorage.setItem('oauth_state', state);
// 認可 URL に &state=${state} を追加
// コールバック時に state の一致を検証

3. トークンの保存

環境	推奨方式
Web バックエンド	HttpOnly Cookie + Secure + SameSite
SPA	メモリ保存 + Refresh Token ローテーション
モバイル	セキュアストレージ (Keychain/Keystore)

OAuth フローのデバッグ

Authorization URL のパラメータが完全か確認（client_id, redirect_uri, scope, state）
JWT デコーダーで Access Token の scope と exp を確認
redirect_uri が登録値と完全一致するか検証
CORS 設定が token endpoint を許可しているか確認

まとめ

OAuth 2.0 + OIDC はモダン Web 認証の基盤です。認可コードフロー、PKCE 拡張、トークンタイプの違い、そして「フロントエンドのデコード ≠ バックエンドの検証」というセキュリティ原則を理解することは、すべてのフルスタック開発者に必須の知識です。