OAuth 2.0フロー可視化ツール

OAuth 2.0フロー可視化ツールは、主要なOAuth 2.0認可フローすべてのインタラクティブなシーケンス図を描画する無料のブラウザベースツールです。Webアプリケーション、モバイルアプリ、CLIツール、サーバー間連携の認証を実装する際に、HTTPリクエスト、リダイレクト、トークン交換の正確なシーケンスを理解することは、正しく安全な実装に不可欠です。

フロータイプを選択すると、関係するすべてのアクター（クライアント、認可サーバー、リソースサーバー、エンドユーザー）を示す色分けされたシーケンス図が即座に描画されます。図の各ステップをクリックすると、HTTPメソッド、エンドポイント、必要なパラメータ、ヘッダー、完全なリクエスト/レスポンス例が展開表示されます。青い矢印はリクエスト、緑の破線矢印はレスポンスを表し、データフローを一目で追跡できます。

RFC 6749とその拡張で定義されているすべての標準グラントタイプをカバーしています：認可コード（最も広く使用されるサーバーサイドフロー）、認可コード + PKCE（SPAやモバイルアプリなどのパブリッククライアント向け推奨フロー、OAuth 2.1のデフォルト）、クライアントクレデンシャル（マシン間通信用）、デバイスコード（RFC 8628、スマートTVやCLIツールなどの入力制限デバイス用）、そして非推奨となったインプリシットとリソースオーナーパスワードフロー（新しいアプリケーションで使用すべきでない理由の警告付きで教育目的で含まれています）。これらのフローで発行されるJWTを扱う場合は、JWTデコーダーでトークンヘッダーとペイロードを検査できます。各ステップで説明されている実際のHTTPリクエストをテストするには、cURL→コード変換で実行可能なコードスニペットを素早く生成できます。レスポンスヘッダーの分析にはHTTPヘッダーアナライザーもご利用いただけます。

組み込みのPKCEジェネレーターにより、暗号学的に安全なcode_verifierとそのSHA-256 code_challengeをブラウザ内で直接生成できます。パラメータリファレンスパネルでは、client_id、redirect_uri、scope、state、code_verifierなど、すべてのOAuth 2.0パラメータを説明しています。

すべての処理はブラウザ内で完全に実行され、データがサーバーに送信されることはないため、実際のクライアント資格情報や設定を安全に確認できます。

1. 上部のドロップダウンからOAuth 2.0フローを選択します（例：認可コード、PKCE、クライアントクレデンシャル）。
2. フローの説明とセキュリティノートを確認し、選択したフローをいつ、なぜ使用するかを理解します。
3. シーケンス図を確認します。青い矢印はリクエスト、緑の破線矢印はレスポンスです。各アクター（クライアント、認可サーバー、リソースサーバー、ユーザー）は色分けされたヘッダーでラベル付けされています。
4. 図の任意のステップをクリックして詳細を展開：HTTPメソッド、エンドポイント、パラメータ、ヘッダー、リクエスト/レスポンス例。
5. Copyボタン（またはCtrl+Shift+C）で選択したステップのリクエスト/レスポンス例をクリップボードにコピーします。
6. Parametersをクリックしてリファレンスパネルを切り替え、すべてのOAuth 2.0パラメータの説明を確認します。
7. PKCEフローでは、Generate PKCEをクリックしてデモ用のcode_verifierとcode_challengeペアを生成します。実装で使用するために値をコピーできます。