Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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 アプリ など、認証認可を行う際に使用されます。

完成図

image.png

構築の前提条件

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

1. Backend App の登録

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

新規アプリ登録

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

Application ID をメモ

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

Application URI と Scope の設定

Client からアクセスする際に、Scope ごとに権限を付与するします。今回は、read の scope を追加します。
image.png
この Scope をメモし、後ほど使う
image.png

2. Client App の登録

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

新規アプリ登録

image.png
image.png

Application ID をメモ

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

Scope 権限の追加

Backend Scope をアクセスための権限を追加します。Add a permission ボタンをクリック
image.png
My APIs ボタンをクリックし、backend-app を選択する
image.png

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

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

Client Secret の追加

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

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

3. ユーザフローの登録

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

image.png

サインイン フローを作成する
image.png
必要な情報を入力し、[Create] ボタンをクリック
image.png

OAuth 2.0 Endpoints の確認

作ったユーザフローをクリック
image.png
Endpoints をクリックし、authorization endpointtoken endpointOpenID Connect metadata documentそれぞれメモします。
image.png
image.png

ここまで 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 サービス情報を登録します。
image.png
image.png
整理したメモ値をサービス登録画面に埋めます。

画面項目 メモ項目 備考
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 側の設定

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

validate-jwt ポリシーを追加

access_tokenを認証するため、Inboundvalidate-jwt ポリシーを追加します。
image.png
image.png

備考
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 ポリシーに設定します。
image.png

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

試す前に、テスト用のユーザを追加します。
image.png
ユーザ情報を入力する
image.png
ユーザ追加完了
image.png

6. 試して見る

テストの流れ

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

  1. テストユーザがログインし、認証サーバから authorization code を取得
  2. authorization code を使って、access_tokenrefresh_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

上記フォーマットを変換し、ブラウザで開きます。
image.png
正常ログイン後、https://jwt.ms/?state=anything&code=<authorization_code> のURLが表示されます。codeの部分は 次のURLに使う authorization code です。
image.png

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
wwalpha
【AWS | GCP | Azure】Solution Architect | DevOps Engineer | React Specialist
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away