D B2C で Azure API Management を保護する - authorization code grant flow

19169 ワード
Azure ApiManagement AzureAD Azure テキストリンク

OAuth 2.0 - authorization code grant flow とは

OAuth 2.0 authorization code flow (OAuth 承認コード フロー）は OAuth 2.0 が定義されている認証認可方法の一つです。主に SPA (Single Page Application)、WEB アプリ、Native アプリ など、認証認可を行う際に使用されます。

完成図

構築の前提条件

下記リンクを参考し、必要なインスタンスを事前に用意します。

1. Backend App の登録

Backend サービスを表すアプリを事前に登録する必要がある、今回は API Management です。

新規アプリ登録


必要な情報を入力し、Register ボタンをクリック

Application ID をメモ

Backend Application ID をメモし、後続の設定で使います。

Application URI と Scope の設定

Client からアクセスする際に、Scope ごとに権限を付与するします。今回は、read の scope を追加します。

この Scope をメモし、後ほど使う

2. Client App の登録

Client 表すアプリを登録します。

新規アプリ登録


Application ID をメモ

Client Application ID をメモし、後続の設定で使います。

Scope 権限の追加

Backend Scope をアクセスための権限を追加します。Add a permission ボタンをクリック

My APIs ボタンをクリックし、backend-app を選択する

先ほど登録した API を選択し、権限を追加します

Scope のアクセス権限を承認する

Client Secret の追加



後で再確認できませんので、secret value をメモします。

ここまで、Client App の設定が完了しました。

3. ユーザフローの登録

access_token 発行するには、ユーザフローが必要なので、今回は サインイン のフローを使用します。

サインイン フローを作成する

必要な情報を入力し、[Create] ボタンをクリック

OAuth 2.0 Endpoints の確認

作ったユーザフローをクリック

Endpoints をクリックし、authorization endpoint、token endpoint、OpenID Connect metadata documentそれぞれメモします。

ここまで Client App の設定が完了しました。次は API Management です。

4. API Management での設定

最後の設定をする前に、これまで色々メモした情報をおさらいします。

メモ情報の確認

Endpointsについて、最新のフォーマットに直しました。

項目 値
Backend Application ID 12053497-fa4c-4b33-b958-ca4ac9342209
Client Application ID 23db6bb0-d68a-4068-b17f-3f5b8564d727
Client Secret qBXEjl3GHt1146unZRA~Hp9~LA.6N-t-j5
Policy Name b2c_1_signin
Redirect URI https://jwt.ms
Scope https://azuredemo00.onmicrosoft.com/api/read
Authorization Endpoint https://azuredemo00.b2clogin.com/azuredemo00.onmicrosoft.com/oauth2/v2.0/authorize?p=b2c_1_signin
Token Endpoint https://azuredemo00.b2clogin.com/azuredemo00.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1_signin
OpenID Connect https://azuredemo00.b2clogin.com/azuredemo00.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=b2c_1_signin

OAuth サービスの登録

[Add] ボタンをクリックし、新規 OAuth サービス情報を登録します。


整理したメモ値をサービス登録画面に埋めます。

画面項目 メモ項目 備考
Client registration テストのため、任意入力
Authorization grant types Authorization Code ← 今回のターゲット
Authorization endpoint https://azuredemo00.b2clogin.com/azuredemo00.onmicrosoft.com/oauth2/v2.0/authorize?p=b2c_1_signin
Authorization request method POST もチェックする
Token Endpoint https://azuredemo00.b2clogin.com/azuredemo00.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1_signin
Default Scope https://azuredemo00.onmicrosoft.com/api/read Backend App の Scope
Client ID 23db6bb0-d68a-4068-b17f-3f5b8564d727 Client Application ID
Client secret qBXEjl3GHt1146unZRA~Hp9~LA.6N-t-j5 Client Secret

API 側の設定


Subscription required を除外し、先ほど登録した OAuth サービスを設定します。

validate-jwt ポリシーを追加

access_tokenを認証するため、Inbound の validate-jwt ポリシーを追加します。

値 備考
Required claims Name aud
Required claims Value 12053497-fa4c-4b33-b958-ca4ac9342209 Backend Application ID
Opend ID URL https://azuredemo00.b2clogin.com/azuredemo00.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=b2c_1_signin OpenID Connect metadata document

メモした値を validate-jwt ポリシーに設定します。

5. Azure AD B2C のテストユーザ追加

試す前に、テスト用のユーザを追加します。

ユーザ情報を入力する

ユーザ追加完了

6. 試して見る

テストの流れ

authorization code grant flowで下記順番で行います。

  1. テストユーザがログインし、認証サーバから authorization code を取得
  2. authorization code を使って、access_token と refresh_token を取得
  3. access_token を使って、API にアクセスする

ここまでの情報整理

項目 値
Client ID (Application ID) 23db6bb0-d68a-4068-b17f-3f5b8564d727
Client Secret qBXEjl3GHt1146unZRA~Hp9~LA.6N-t-j5
Policy Name b2c_1_signin
Redirect URI https://jwt.ms
Scope https://azuredemo00.onmicrosoft.com/api/read
Authorization Endpoint https://azuredemo00.b2clogin.com/azuredemo00.onmicrosoft.com/oauth2/v2.0/authorize?p=b2c_1_signin
Token Endpoint https://azuredemo00.b2clogin.com/azuredemo00.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1_signin
OpenID Connect https://azuredemo00.b2clogin.com/azuredemo00.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=b2c_1_signin

Authorization Code 取得用 URL

URL_Format
https://<tenant>.b2clogin.com/<tenant>.onmicrosoft.com/oauth2/v2.0/authorize
?p=<policy_name>
&client_id=<application_id>
&response_type=code
&redirect_uri=<uri>
&response_mode=query
&scope=<scope_url>
&state=anything
&prompt=login
サンプル
https://azuredemo00.b2clogin.com/azuredemo00.onmicrosoft.com/oauth2/v2.0/authorize
?p=b2c_1_signin
&client_id=23db6bb0-d68a-4068-b17f-3f5b8564d727
&response_type=code
&redirect_uri=https://jwt.ms
&response_mode=query
&scope=https%3A%2F%2Fazuredemo00.onmicrosoft.com%2Fapi%2Fread    <- Scope URL Encode
&state=anything
&prompt=login

上記フォーマットを変換し、ブラウザで開きます。

正常ログイン後、https://jwt.ms/?state=anything&code=<authorization_code> のURLが表示されます。codeの部分は 次のURLに使う authorization code です。

Access Token 取得用 URL

URL_Format
POST https://<tenant>.b2clogin.com/<tenant>.onmicrosoft.com/oauth2/v2.0/token
?p=<policy_name>
&client_id=<application_id>
&client_secret=<client_secret>
&scope=<scope_url>
&redirect_uri=https://jwt.ms
&grant_type=authorization_code
&code=<authorization_code>
サンプル
POST https://azuredemo00.b2clogin.com/azuredemo00.onmicrosoft.com/oauth2/v2.0/token
?p=b2c_1_signin
&client_id=23db6bb0-d68a-4068-b17f-3f5b8564d727
&client_secret=qBXEjl3GHt1146unZRA~Hp9~LA.6N-t-j5
&scope=https%3A%2F%2Fazuredemo00.onmicrosoft.com%2Fapi%2Fread
&redirect_uri=https://jwt.ms
&grant_type=authorization_code
&code=eyJra......

Postman で試して見ると

access_token
{
    "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1jNTdkTzZRR1RWQndhTmsifQ.eyJpc3MiOiJodHRwczovL2F6dXJlZGVtbzAwLmIyY2xvZ2luLmNvbS81NWMwNTcxNi1lZTVhLTQ5YWUtOGQyNi05OTgyNGIzMGIzNzIvdjIuMC8iLCJleHAiOjE2MDU0NjA3NzQsIm5iZiI6MTYwNTQ1NzE3NCwiYXVkIjoiMTIwNTM0OTctZmE0Yy00YjMzLWI5NTgtY2E0YWM5MzQyMjA5Iiwic3ViIjoiMzk1NjM5ZmMtM2ZmOS00NjFjLWFmZGQtMTM1OTJhYTJlMWI3IiwibmFtZSI6ImF6dXJlZGVtbyIsInRmcCI6IkIyQ18xX3NpZ25pbiIsInNjcCI6InJlYWQiLCJhenAiOiIyM2RiNmJiMC1kNjhhLTQwNjgtYjE3Zi0zZjViODU2NGQ3MjciLCJ2ZXIiOiIxLjAiLCJpYXQiOjE2MDU0NTcxNzR9.ZsnYjpLOFLTWG6CNkXNu93fj1VbDIhYT78nRtdEDV94koLjWRHexTOu2qvZ5Eo_-KUs6TML0UJCGJdX9_cRxoXZC7wGC0UiRGOUZEB_EL_5RdjMRBsBnk1wC9pumZE5pCjBeXW5KX8m4ejOlsqZ5iAOJGqZjoo1_sJA0DzqABmPSwIn7cCajAEbVU5fpeSzuzzxqRR_-FSq4BGWYqCP6kSyVOYnnRFXB8khVk9lOqYJCMXgbPlEnUDNJ8DZy1Q1ZB6q8iRFVgKTlBWODVAEFjXLAxS9J15cqq8w5TmiSn3b1_5LVyo06t2wZxpNuXxlp-9dvHFDFeXxoho_Mwl108w",
    "token_type": "Bearer",
    "not_before": 1605457174,
    "expires_in": 3600,
    "expires_on": 1605460774,
    "resource": "12053497-fa4c-4b33-b958-ca4ac9342209",
    "profile_info": "eyJ2ZXIiOiIxLjAiLCJ0aWQiOiI1NWMwNTcxNi1lZTVhLTQ5YWUtOGQyNi05OTgyNGIzMGIzNzIiLCJzdWIiOm51bGwsIm5hbWUiOiJhenVyZWRlbW8iLCJwcmVmZXJyZWRfdXNlcm5hbWUiOm51bGwsImlkcCI6bnVsbH0",
    "scope": "https://azuredemo00.onmicrosoft.com/api/read"
}

Access Token を使って、API テスト

GET https://apim-b2c.azure-api.net/echo/resource
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1jNTdkTzZRR1RWQndhTmsifQ

-> Response status: 200 OK