jpskill.com
🛠️ 開発・MCP コミュニティ

oauth2-oidc

OAuth 2.0とOpenID Connectを利用した安全な認証・認可機能の実装を支援し、各種トークンの検証やPKCE対応、ソーシャルログイン設定など、SPAやモバイルアプリ、API向けのセキュアなトークン管理を構築するSkill。

📜 元の英語説明(参考)

Assists with implementing OAuth 2.0 and OpenID Connect for secure authentication and authorization. Use when configuring authorization flows, validating tokens, implementing PKCE for public clients, setting up social login, or building secure token handling for SPAs, mobile apps, and APIs. Trigger words: oauth, oidc, openid connect, authorization code, pkce, jwt, access token, refresh token.

🇯🇵 日本人クリエイター向け解説

一言でいうと

OAuth 2.0とOpenID Connectを利用した安全な認証・認可機能の実装を支援し、各種トークンの検証やPKCE対応、ソーシャルログイン設定など、SPAやモバイルアプリ、API向けのセキュアなトークン管理を構築するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o oauth2-oidc.zip https://jpskill.com/download/15185.zip && unzip -o oauth2-oidc.zip && rm oauth2-oidc.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/15185.zip -OutFile "$d\oauth2-oidc.zip"; Expand-Archive "$d\oauth2-oidc.zip" -DestinationPath $d -Force; ri "$d\oauth2-oidc.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して oauth2-oidc.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → oauth2-oidc フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

OAuth 2.0 / OpenID Connect

概要

OAuth 2.0 は API 認可のための業界標準であり、OpenID Connect (OIDC) はそれを拡張してユーザー認証を実現します。両者を組み合わせることで、セキュアなトークン交換のための Authorization Code + PKCE、JWT ベースのアイデンティティトークン、リフレッシュトークンローテーション、およびソーシャルログインとエンタープライズ SSO のためのアイデンティティプロバイダー (Auth0、Okta、Keycloak、Google、Azure AD) との統合が提供されます。

手順

  • 認証を実装する際は、すべてのクライアントタイプ (SPA、モバイル、サーバー) に対して Authorization Code + PKCE フローを使用してください。これは唯一のセキュアなフローであるためです。非推奨の Implicit フローや Resource Owner Password フローは絶対に使用しないでください。
  • API 側でトークンを検証する際は、プロバイダーの JWKS エンドポイントを使用して JWT 署名を検証し、expiss、および aud クレームを確認してください。クライアント側のトークン検証のみを信頼しないでください。
  • Web アプリでトークンを保存する際は、httpOnlysecuresameSite=lax クッキーを使用してください。XSS に対して脆弱であるため、localStorage にトークンを保存しないでください。
  • トークンライフサイクルを管理する際は、有効期間の短いアクセストークン (5〜15 分) を使用し、リフレッシュトークンローテーションを使用してください。リフレッシュトークンはそれぞれ単回使用であり、リフレッシュごとに新しいトークンが発行されます。
  • プロバイダーを統合する際は、エンドポイントをハードコーディングするのではなく、ディスカバリーエンドポイント (/.well-known/openid-configuration) を使用して自動構成を行ってください。
  • ログアウトを実装する際は、リフレッシュトークンを失効させ、セッションをクリアし、完全なセッション終了のためにプロバイダーのログアウトエンドポイントにリダイレクトしてください。

例 1: PKCE を使用して Next.js アプリにソーシャルログインを追加する

ユーザーリクエスト: 「OAuth 2.0 を使用して、Next.js アプリに Google および GitHub ログインを実装してください」

アクション:

  1. クライアント ID とリダイレクト URI を使用して OIDC プロバイダーを構成します
  2. 状態とノンスの検証を使用して Authorization Code + PKCE フローを実装します
  3. コードをトークンと交換し、ID トークン JWT クレームを検証します
  4. リフレッシュトークンローテーションを使用して、セッションを httpOnly クッキーに保存します

出力: Google および GitHub 経由のセキュアなソーシャルログイン、PKCE で保護されたトークン交換、および httpOnly クッキーセッションを備えた Next.js アプリ。

例 2: JWT 検証で REST API を保護する

ユーザーリクエスト: 「OAuth 2.0 トークン検証を API エンドポイントに追加してください」

アクション:

  1. ディスカバリーエンドポイントからプロバイダーの JWKS をフェッチします
  2. アクセストークン署名、有効期限、発行者、および対象者を検証するミドルウェアを作成します
  3. 検証済みのトークンからユーザー要求とカスタムスコープを抽出します
  4. 無効なトークンに対して 401 を返し、不十分なスコープに対して 403 を返します

出力: プロバイダーの JWKS に対してトークンを検証し、スコープベースのアクセス制御を強制する JWT ベースの認証を備えた API。

ガイドライン

  • 常に Authorization Code + PKCE を使用してください。これはすべてのクライアントタイプにとって唯一のセキュアなフローであるためです。
  • API 側でトークンを検証してください: 署名、expiss、および aud を検証します。クライアント側の検証のみを信頼しないでください。
  • Web アプリでのトークンストレージには、localStorage ではなく、httpOnlysecuresameSite=lax クッキーを使用してください。
  • 各リフレッシュトークンが単回使用であるリフレッシュトークンローテーションを実装してください。
  • エンドポイントをハードコーディングするのではなく、プロバイダーのディスカバリーエンドポイントを構成に使用してください。
  • 必要な最小限のスコープをリクエストしてください: ログインには openid email を使用し、利用可能なすべてのスコープを使用しないでください。
  • 適切なログアウトを実装してください: リフレッシュトークンを失効させ、セッションをクリアし、プロバイダーのログアウトエンドポイントにリダイレクトしてください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

OAuth 2.0 / OpenID Connect

Overview

OAuth 2.0 is the industry standard for API authorization, and OpenID Connect (OIDC) extends it for user authentication. Together they provide Authorization Code + PKCE for secure token exchange, JWT-based identity tokens, refresh token rotation, and integration with identity providers (Auth0, Okta, Keycloak, Google, Azure AD) for social login and enterprise SSO.

Instructions

  • When implementing authentication, use the Authorization Code + PKCE flow for all client types (SPAs, mobile, server) since it is the only secure flow; never use the deprecated Implicit or Resource Owner Password flows.
  • When validating tokens on the API side, verify the JWT signature using the provider's JWKS endpoint, check exp, iss, and aud claims, and never trust client-side token validation alone.
  • When storing tokens in web apps, use httpOnly, secure, sameSite=lax cookies; never store tokens in localStorage since it is vulnerable to XSS.
  • When managing token lifecycle, use short-lived access tokens (5-15 minutes) with refresh token rotation where each refresh token is single-use and a new one is issued with each refresh.
  • When integrating a provider, use the discovery endpoint (/.well-known/openid-configuration) for auto-configuration rather than hardcoding endpoints.
  • When implementing logout, revoke the refresh token, clear the session, and redirect to the provider's logout endpoint for complete session termination.

Examples

Example 1: Add social login to a Next.js app with PKCE

User request: "Implement Google and GitHub login for my Next.js app using OAuth 2.0"

Actions:

  1. Configure the OIDC providers with client IDs and redirect URIs
  2. Implement the Authorization Code + PKCE flow with state and nonce validation
  3. Exchange the code for tokens and validate the ID token JWT claims
  4. Store the session in httpOnly cookies with refresh token rotation

Output: A Next.js app with secure social login via Google and GitHub, PKCE-protected token exchange, and httpOnly cookie sessions.

Example 2: Secure a REST API with JWT validation

User request: "Add OAuth 2.0 token validation to my API endpoints"

Actions:

  1. Fetch the provider's JWKS from the discovery endpoint
  2. Create middleware that validates the access token signature, expiration, issuer, and audience
  3. Extract user claims and custom scopes from the validated token
  4. Return 401 for invalid tokens and 403 for insufficient scopes

Output: An API with JWT-based authorization that validates tokens against the provider's JWKS and enforces scope-based access control.

Guidelines

  • Always use Authorization Code + PKCE since it is the only secure flow for all client types.
  • Validate tokens on the API side: verify signature, exp, iss, and aud; never trust client-side validation alone.
  • Use httpOnly, secure, sameSite=lax cookies for token storage in web apps, not localStorage.
  • Implement refresh token rotation where each refresh token is single-use.
  • Use the provider's discovery endpoint for configuration rather than hardcoding endpoints.
  • Request minimum scopes needed: openid email for login, not all available scopes.
  • Implement proper logout: revoke refresh token, clear session, redirect to provider's logout endpoint.