Claude CodeでOAuth2・OpenID Connectを実装する方法！認証基盤を安全に構築する手順

はじめに

「OAuth2とOpenID Connectの違いがわからない」

「GoogleやGitHubのソーシャルログインを安全に実装したい」

「PKCEって何？実装が必要なの？」

認証は多くのWebアプリケーションで必要ですが、OAuth2・OpenID Connectの仕様は複雑で、誤った実装がセキュリティリスクになります。Claude Codeを使えば、仕様の理解から安全な実装まで体系的にサポートできます。

目次

1. OAuth2とOpenID Connectの基礎
2. ソーシャルログインの実装
3. PKCEの実装
4. 自社IdPの構築（Keycloak）
5. JWTの安全な実装
6. セキュリティ強化
7. マルチプロバイダー対応
8. まとめ

1. OAuth2とOpenID Connectの基礎

概念の整理と実装の相談

> OAuth2とOpenID Connectの違いを説明してください。
  また、以下のユースケースにはどちらが適切か教えてください：

  1. Googleアカウントでログインできるようにしたい
  2. サードパーティアプリに自社APIへのアクセスを許可したい
  3. シングルサインオン（SSO）を実装したい

  それぞれのフロー（Authorization Code・Client Credentials・
  Implicit・Device Code）の使い分けも教えてください。

フローの選択

> このWebアプリケーションに最適なOAuth2フローを選択して実装してください。

  アプリ情報：
  - Next.js SPAフロントエンド
  - Node.js APIバックエンド
  - モバイルアプリ（React Native）も同じAPIを使用

  それぞれに適したフローと、セキュリティ上の考慮事項を説明してください。

2. ソーシャルログインの実装

NextAuth.jsでのマルチプロバイダー実装

> NextAuth.jsを使って以下のソーシャルログインを実装してください。

  プロバイダー：
  - Google（OpenID Connect）
  - GitHub（OAuth2）
  - Microsoft（Azure AD）
  - LINE（日本向け）

  要件：
  - ログイン後のセッション管理（JWTセッション）
  - ユーザー情報のデータベース保存（Prisma）
  - 既存アカウントとのメールアドレス連携
  - ログアウト時のセッション完全無効化

バックエンドAPIでのOAuth2実装（Node.js）

> Express + Passportを使ってOAuth2認証を実装してください。

  実装内容：
  - passport-google-oauth20の設定
  - callback URLの処理
  - ユーザーのファーストログイン・リピートログインの処理
  - セッションとJWTの使い分け（セッションはOAuth用・JWTはAPI用）
  - CSRF対策（state parameter）

3. PKCEの実装

SPAでのPKCE実装

> SPAアプリケーションでPKCE（Proof Key for Code Exchange）を
  実装してください。

  実装の流れ：
  1. code_verifierをランダム生成
  2. code_challengeを計算（S256メソッド）
  3. 認証リクエストにcode_challengeを含める
  4. コールバックでcode_verifierを使ってトークン交換

  なぜSPAでPKCEが必要かも説明してください。
  TypeScriptで実装してください。

4. 自社IdPの構築（Keycloak）

Keycloakの設定

> Docker ComposeでKeycloakを構築して、
  アプリケーションとの連携を設定してください。

  設定内容：
  - Realmの作成・設定
  - Clientの設定（フロントエンド・バックエンドAPI）
  - ユーザーフェデレーション（既存のPostgreSQLユーザーテーブル連携）
  - カスタムログインページのテーマ適用
  - MFAの設定（TOTP）
  - ロールとグループの設計

  本番環境向けの高可用性設定も含めてください。

5. JWTの安全な実装

アクセストークンとリフレッシュトークンの実装

> JWTを使ったアクセストークン・リフレッシュトークンの
  安全な実装をしてください。

  設計：
  - アクセストークン：有効期限15分・RS256署名
  - リフレッシュトークン：有効期限30日・Secure HttpOnly Cookie保存
  - リフレッシュトークンローテーション
  - ファミリー検出（盗まれたトークンの無効化）

  リフレッシュトークンはデータベースで管理してください。
  トークンのブラックリスト機能も実装してください。

6. セキュリティ強化

OAuth2のセキュリティチェック

> このOAuth2実装のセキュリティ診断を実施してください。

  チェック項目（OAuth2 Security Best Practices RFC 9700準拠）：
  - state parameterのCSRF対策
  - PKCEの使用
  - redirect_uriの完全一致検証
  - code・tokenの再利用防止
  - トークンのaudience検証
  - 短いアクセストークン有効期限

  問題があれば修正してください。

7. マルチプロバイダー対応

統一認証レイヤーの設計

> 複数のOAuth2プロバイダーを統一的に扱う
  認証レイヤーを設計・実装してください。

  要件：
  - Google・GitHub・MicrosoftのOAuth2
  - メールアドレスとパスワード認証との併用
  - 同じメールアドレスで複数プロバイダーを連携
  - プロバイダー切り替え時のアカウントマージ

  ユーザーテーブルの設計も含めてください。

8. まとめ

Claude CodeでのOAuth2・OIDC実装の効率化ポイント：

• フロー選択の判断を相談できる
• PKCEの実装を正確にサポート
• セキュリティベストプラクティスへの準拠チェック
• Keycloak等のIdP設定を自動化

認証実装の重要なポイント：

• SPAでは必ずPKCEを使用する
• リフレッシュトークンはHttpOnly Cookieで保存する
• state parameterのCSRF対策を省略しない
• JWTの署名アルゴリズムをRSAにする（共有鍵のHS256は避ける）

次回の第46回：メール配信システムを構築する方法では、トランザクションメールからニュースレターまで解説します。

よくある質問（FAQ）

Q. OAuth2とSAMLの違いは何ですか？

A. SAMLはXMLベースの古い認証連携プロトコルで、主に企業のSSO（エンタープライズ向け）で使われます。OAuth2はJSON/RESTベースでモダンなWeb・モバイルアプリ向けです。Claude Codeに「エンタープライズのSAML連携もOAuth2で対応できますか？」と相談することで、SAML→OAuth2ブリッジの実装も相談できます。

この記事はClaude Code入門シリーズ（第5部）の第45回です。← 第44回：Kubernetes ｜ 第46回：メール配信システム →

ご質問はお問い合わせページからお気軽にどうぞ。