OAuth プレイグラウンド

Deni AI でサインイン

同意からアイデンティティまでを、落ち着いて進められる標準準拠の経路です。

信頼されているプロバイダーでログインを構築できます。このページは OAuth 2.1、OpenID Connect、S256 PKCE に基づく動作するパブリッククライアント例です。

OAuth 2.1OpenID ConnectS256 PKCE

ライブ OAuth プレイグラウンド

パブリッククライアント · S256 PKCE

準備完了

パブリッククライアント ID

token_endpoint_auth_method を none に設定したパブリッククライアントを使用してください。ここにはクライアントシークレットを貼り付けないでください。

コールバック URL

OAuth クライアントにこの URL を正確に登録してください。このページでは現在のページ URL を使用します。

クライアントが受け取る情報

openid

profile

このページは交換結果を確認する間だけトークンをメモリに保持し、その後破棄します。

フロー

クリックからセッションまでの4つのステップ

プロトコルが複雑な処理を担います。アプリは state を保持し、レスポンスを検証し、アイデンティティをどう扱うかを決めます。

発見

issuer メタデータを読み、利用できるエンドポイントとスコープを確認します。

認可

一度きりの state と S256 PKCE チャレンジを付けて、ユーザーを Deni AI に案内します。

交換

一度きりの認可コードをアクセストークンとリフレッシュトークンに交換します。

識別

アクセストークンで UserInfo を呼び出し、アプリのセッションを作成します。

小さなクライアント実装

連携を読みやすく保つ

この例ではブラウザの state、認可、トークン交換、アイデンティティ取得を分け、各セキュリティ判断をコードレビューで確認できるようにしています。

const discovery = "/.well-known/openid-configuration";
const authorize = "/api/auth/oauth2/authorize";
const token = "/api/auth/oauth2/token";
const userInfo = "/api/auth/oauth2/userinfo";

プロトコルの表面

アプリが始めるために必要なもの

認可/api/auth/oauth2/authorize

トークン/api/auth/oauth2/token

UserInfo/api/auth/oauth2/userinfo

ディスカバリー/.well-known/openid-configuration

対応スコープ: openid、profile、email、offline_access。ライブフローを始める前に、正確なコールバック URL を持つパブリッククライアントを登録してください。

Deni AI でサインイン

同意からアイデンティティまでを、落ち着いて進められる標準準拠の経路です。

OAuth 2.1OpenID ConnectS256 PKCE

連携を読みやすく保つ

const discovery = "/.well-known/openid-configuration"; const authorize = "/api/auth/oauth2/authorize"; const token = "/api/auth/oauth2/token"; const userInfo = "/api/auth/oauth2/userinfo";