ユーザーはAuthorization Serverでログインし、クライアントへ渡してよい権限を選びます。クライアントは短時間有効な認可コードを受け取り、安全なバックチャネルでアクセストークンへ交換します。
はじめに / 全体の流れ
このフローで、
何をするの？
このフローのゴール
アプリへパスワードを渡さず、許可された範囲だけAPIを利用できるようにします。
ホテルの受付で本人確認を行い、部屋の鍵ではなく、許可された施設だけに入れる一時的なカードを受け取るイメージです。
クライアントはアクセストークンを使い、ユーザーが同意した範囲のAPIだけを呼び出せます。
登場人物
図では、縦の列ごとに担当者やシステムを分けています。
User
サービスを利用する人です。ログインや同意、端末の操作を行います。
Client
ユーザーに代わって認可を依頼し、許可されたAPIを呼び出すアプリです。
Authorization
ログイン、同意、コードやトークンの発行を担当する信頼できるサーバーです。
Resource
アクセストークンを確認して、許可されたデータや機能を提供するAPIです。
図の読み方: 光る丸が今説明している通信です。自動再生を止めたいときは「Pause」を押し、気になる矢印を選んでください。
UUserResource Owner
CClientWeb / BFF
AAuthorizationIdentity Server
RResourceProtected API
01
User → Client
認可を開始
このステップで行うことユーザーが外部データを必要とする機能を開始します。
REQUEST / RESPONSE EXAMPLEBrowser → Client BFF
REQUEST
GET /api/auth/login
Content-Type: application/json
Accept: text/htmlレスポンス
HTTP/1.1 302 Found
Location: https://authorization.example/oauth2/authorize?response_type=code&client_id=nextjs-client&scope=openid%20profile&state=af0ifjsldkj&code_challenge=E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM&code_challenge_method=S256
Set-Cookie: oauth_transaction=sealed; HttpOnly; Secure; SameSite=Lax※ トークン、challenge、Credential IDなどは説明用に短縮したサンプル値です。
Related flows