Claude CodeでOAuth認証を実装する完全ガイド

OAuth認証とClaude Code

OAuth 2.0はモダンWebアプリケーションの認証標準です。Claude Codeを使えば、複雑なOAuthフローの実装をプロジェクト構造を理解した上で効率的に進められます。基本的な使い方はClaude Code入門ガイドを参照してください。

Authorization Code Flow の実装

最も一般的なOAuthフローをNode.js + Expressで実装します。

import express from "express";
import crypto from "crypto";

const app = express();

const OAUTH_CONFIG = {
  clientId: process.env.OAUTH_CLIENT_ID!,
  clientSecret: process.env.OAUTH_CLIENT_SECRET!,
  authorizationEndpoint: "https://provider.example.com/oauth/authorize",
  tokenEndpoint: "https://provider.example.com/oauth/token",
  redirectUri: "http://localhost:3000/callback",
  scopes: ["openid", "profile", "email"],
};

// 認証開始エンドポイント
app.get("/auth/login", (req, res) => {
  const state = crypto.randomBytes(32).toString("hex");
  req.session.oauthState = state;

  const params = new URLSearchParams({
    response_type: "code",
    client_id: OAUTH_CONFIG.clientId,
    redirect_uri: OAUTH_CONFIG.redirectUri,
    scope: OAUTH_CONFIG.scopes.join(" "),
    state,
  });

  res.redirect(
    `${OAUTH_CONFIG.authorizationEndpoint}?${params.toString()}`
  );
});

PKCE対応

SPAやモバイルアプリではPKCE（Proof Key for Code Exchange）が必須です。

function generatePKCE() {
  const verifier = crypto.randomBytes(32).toString("base64url");
  const challenge = crypto
    .createHash("sha256")
    .update(verifier)
    .digest("base64url");

  return { verifier, challenge };
}

app.get("/auth/login-pkce", (req, res) => {
  const { verifier, challenge } = generatePKCE();
  const state = crypto.randomBytes(32).toString("hex");

  req.session.codeVerifier = verifier;
  req.session.oauthState = state;

  const params = new URLSearchParams({
    response_type: "code",
    client_id: OAUTH_CONFIG.clientId,
    redirect_uri: OAUTH_CONFIG.redirectUri,
    scope: OAUTH_CONFIG.scopes.join(" "),
    state,
    code_challenge: challenge,
    code_challenge_method: "S256",
  });

  res.redirect(
    `${OAUTH_CONFIG.authorizationEndpoint}?${params.toString()}`
  );
});

コールバック処理とトークン取得

app.get("/callback", async (req, res) => {
  const { code, state } = req.query;

  // CSRF対策：stateの検証
  if (state !== req.session.oauthState) {
    return res.status(403).json({ error: "Invalid state parameter" });
  }

  try {
    const tokenResponse = await fetch(OAUTH_CONFIG.tokenEndpoint, {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: new URLSearchParams({
        grant_type: "authorization_code",
        code: code as string,
        redirect_uri: OAUTH_CONFIG.redirectUri,
        client_id: OAUTH_CONFIG.clientId,
        client_secret: OAUTH_CONFIG.clientSecret,
        // PKCE使用時
        ...(req.session.codeVerifier && {
          code_verifier: req.session.codeVerifier,
        }),
      }),
    });

    const tokens = await tokenResponse.json();

    // トークンをセッションに保存
    req.session.accessToken = tokens.access_token;
    req.session.refreshToken = tokens.refresh_token;
    req.session.tokenExpiry = Date.now() + tokens.expires_in * 1000;

    res.redirect("/dashboard");
  } catch (error) {
    console.error("Token exchange failed:", error);
    res.status(500).json({ error: "Authentication failed" });
  }
});

トークンリフレッシュ

アクセストークンの有効期限切れに対応するミドルウェアを実装します。

async function refreshTokenMiddleware(
  req: express.Request,
  res: express.Response,
  next: express.NextFunction
) {
  if (!req.session.accessToken) {
    return res.redirect("/auth/login");
  }

  // 有効期限の5分前にリフレッシュ
  if (Date.now() > req.session.tokenExpiry - 5 * 60 * 1000) {
    try {
      const response = await fetch(OAUTH_CONFIG.tokenEndpoint, {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: new URLSearchParams({
          grant_type: "refresh_token",
          refresh_token: req.session.refreshToken,
          client_id: OAUTH_CONFIG.clientId,
          client_secret: OAUTH_CONFIG.clientSecret,
        }),
      });

      const tokens = await response.json();
      req.session.accessToken = tokens.access_token;
      req.session.refreshToken = tokens.refresh_token ?? req.session.refreshToken;
      req.session.tokenExpiry = Date.now() + tokens.expires_in * 1000;
    } catch {
      return res.redirect("/auth/login");
    }
  }

  next();
}

app.use("/api/*", refreshTokenMiddleware);

Claude Codeでの実装プロンプト例

OAuth実装をClaude Codeに依頼する際の効果的なプロンプトです。プロンプトの書き方は効果的なプロンプト5つのTipsも参考にしてください。

OAuth 2.0のAuthorization Code Flow with PKCEを実装して。
- プロバイダー: Google
- フレームワーク: Express + TypeScript
- セッション管理: express-session + Redis
- トークンリフレッシュの自動化も含めて
- CSRFとリプレイ攻撃の対策も実装して

セキュリティチェックリスト

OAuth実装では以下の点を必ず確認しましょう。

• state パラメータでCSRF攻撃を防止
• PKCEでコード横取り攻撃を防止
• トークンはHttpOnly Cookieまたはセキュアなサーバーサイドセッションに保存
• redirect_uriをホワイトリストで厳密に検証
• アクセストークンの有効期限管理と自動リフレッシュ

詳細な仕様はOAuth 2.0 RFC 6749を参照してください。Claude Codeの最新機能については公式ドキュメントも確認しましょう。

まとめ

Claude Codeを活用すれば、OAuth 2.0の複雑なフローもプロジェクトのコンテキストを理解した上で一貫した実装が可能です。セキュリティのベストプラクティスを守りながら、認証基盤を素早く構築できます。