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

OAuth 2.0 - authorization code grant flow とは

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

完成図

構築の前提条件

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

• Azure Active Directory B2C テナントを作ってみた
• Azure API Management 作ってみた

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