📘

SPAでGoogleアカウント認証を実装する際のIdPの構築・設定<Azure AD B2C編>

2023/05/04に公開

Azure

tech

SPAからAzure AD B2Cを使ってGoogleアカウント認証を実装するために行ったAzureの構築・設定のまとめ。色々躓いたが、クライアントでMsal.jsを使って認証できることを確認。

サブスクリプションのResource proveiders設定

Azure AD B2Cを作成するためには、Resource Providersを登録しておく必要がある。

AzurePortalから、Subscriptions一覧からAzure AD B2Cのリソースを作成するサブスクリプションを選択
左側のサイドナビゲーションのSettings配下にある Resource providers を選択
「Microsoft.AzureActiveDirectory」が「NotRegistered」となっている場合は、「Microsoft.AzureActiveDirectory」の項目を選択し、上部メニューの「Register」をクリック
3.1 Providerがたくさんあるので、上部の🔎フィルタ設定でAzureと入力すれば探しやすいです。
3.2 「NotRegistered」から「Registered」に遷移（というか表示上の反映？）するまで、少し時間がかかるようです。（数分程度でした）

Azure AD B2Cのテナントを作成する

Azure AD B2Cテナントは、作成元となるサブスクリプションでAzure ADを追加から行う
その際にAzure AD B2Cを選択
Initial domain nameに指定した名前のAzure AD B2Cテナントが新規作成される。

Azure AD B2Cテナントはサブスクリプションと関連付けられているので、Azure AD B2Cの課金請求は作成元のサブスクリプション側に紐づくのでしょうか。
azure-adb2c-idp-auth-setup
※ 今回は、見分けやすいようにAzure AD B2C側のAzure Portalは背景色を [明] に設定

サブスクリプションIDは、作成元のサブスクリプションID
ドメイン名は、Azure AD B2C作成時に指定したInitial domain name

次のセクションからは、Azure AD B2Cのテナントでの設定になる。
Azure AD B2Cのテナントで作業するためには、以下の方法などでAzure Portalのサインインを切り替る。

方法1

Azure PortalでAzure AD B2Cを作った際に設定したResource Groupに移動する
B2C Tenantという種類のリソースがあるので選択する
overviewに「Azure AD B2C Tenant」という項目があり、Azure AD B2Cが作られたAzure ADテナントへのリンクがあるのでクリックする

方法2

Azure Portalの左上部のアカウントからディレクトリをAzure AD B2Cに切り替える。
※ Azure AD B2Cを作ったAzure AD側のユーザーが外部ユーザーとして登録されている。

Azure AD B2Cにアプリケーションを登録する

アプリケーションを登録する

左側のサイドナビゲーションの管理配下にある「アプリの登録」を選択
上部メニューバーの[ ＋新規登録 ]を選択
- 名前 : 任意の名前
- サポートされているアカウントの種類 : 任意の ID プロバイダーまたは組織ディレクトリ内のアカウント (ユーザーフローを使用したユーザーの認証用)を選択
- リダイレクト URI : シングルページアプリケーション(SPA), http://localhost:3000
- アクセス許可 : ☑
- [ 登録 ]ボタンを押下してアプリケーションを作成
  
  リダイレクトURLには、クライアントアプリ（SPA）でサインインした後のURLを登録します。今回の場合は検証目的なのでlocalhostを登録している。実際には、App ServiceやStatic Web Appsなどのアプリケーションのドメインを指定する。
アプリの登録の概要に表示されているアプリケーション(クライアント)IDは、各種認証で設定するClientIdになるのでメモしておく。

azure-adb2c-idp-auth-setup

GCPにおけるAzure AD B2C認証設定

GCPにサインインする

始めにGoogle Developers Consoleにサインイン
※ GCPのアカウントを作成するにはGoogleアカウントが必要になります。

https://console.developers.google.com/

アプリを登録するにはプロジェクトが必要。既存のプロジェクトがあれば、それを利用してもいいし、新しいプロジェクトを作成してもよい。
左側のナビゲーションメニューから「APIとサービス」を選択

GCPにアプリを登録する

左側のメニューで「OAuth同意画面」を選択しアプリを登録
- User-Type：外部 を選択して[ 作成 ]を押下
アプリ情報
- アプリ名： 任意
- ユーザーサポートメール： 任意　※ 今回はGCPアカウントを作ったGmailを設定
- アプリのドメイン: 未入力
- 承認済みドメイン: ドメインを追加で b2clogin.com を設定
  - その他のAWS CognitoやFirebaseなどとアプリを共有することもできる。例えば、Cognitoの場合は、amazoncognito.comをドメインに追加する。
- デベロッパーの連絡先情報
  - メールアドレス：任意　※ 今回はGCPアカウントを作ったGmailを設定
- その他の項目は、未入力で保存しアプリ登録を進める。

認証情報を設定する

続いて認証情報を設定します。

まず、左側のメニューで「認証情報」を選択
上部メニューバーで [ + 認証情報を作成 ]を押下、[ OAuth クライアント ID ]を選択
アプリケーションの種類でウェブアプリケーションを選択
つづいて他の項目を入力していく
- 名前 : 任意
- 承認済みのJavaScript生成元 : https://{Azure AD B2C Tenant Name}.b2clogin.com
  ※ {Azure AD B2C Tenant Name}は、Azure AD B2Cのテナント名です。 Azure AD B2Cテナントを作成する際に指定したInitial domain name
- 承認済みのリダイレクトURI : https://{Azure AD B2C Tenant Name}.b2clogin.com/{Azure AD B2C Tenant Name}.onmicrosoft.com/oauth2/authresp
- [ 作成 ]ボタンを押下
OAuth 2.0 クライアント IDが作成されるのでクライアントIDとクライアントシークレットをメモする
この値は、Azure AD B2CのソーシャルIdpの構成の際に登録することになる。

以上がGCP側の設定。次のセクションから再びAzure Portalで設定を行っていく。

ユーザーフローとカスタムポリシーの作成

Azure PortalでAzure AD B2Cのメニュー画面に移動します。

Idプロバイダーを構成する

左側のサイドナビゲーションの管理配下にある「ID プロバイダー」を選択
ID プロバイダーの一覧からgoogle を選択
ソーシャル IdPを構成
- 配信元のURL : 既定値
- コールバック URL : 既定値
- Name : 任意
- クライアント ID : GCPのOAuth クライアント IDで作成されたクライアントID
- クライアントシークレット : GCPのOAuth クライアント IDで作成されたクライアントシークレット
- [ 保存 ]を押下

ユーザーフローを作成する

左側のサイドナビゲーションの ポリシー 配下にある「ユーザーフロー」を選択
上部メニューバーの[ ＋新しいユーザーフロー ]を選択
ユーザーフローを作成するでサインインとサインアップを選択
バージョンで推奨を選択
[ 作成 ]ボタンを押下
画面が切り替わり、続けてユーザーフローの詳細を設定する
- Name : 任意
- ID プロバイダー :
  - ローカルアカウント : Noneを選択
  - ソーシャルID プロバイダー: 作成したGoogleのIdpプロバイダーが表示されているので ☑を入れる
- 多要素認証　※ MFAの設定は、個々の環境の既存設定に依存します。今回はOff。
  - 方法の種類 : メール
  - MFA の矯正 : オフ
- 条件付きアクセス : チェックしない
- ユーザー属性とトークン要求
  [ 詳細を表示... ]をクリック
  要求を返すで以下をチェック
  - ☑ ID プロバイダー
  - ☑ ID プロバイダーのアクセストークン
    [ OK ]ボタンを押下
- [ 作成 ]ボタンを押下

以上で構築＆設定が終了

おまけ

Msal.jsでの設定

.env.localの設定

# Azure AD B2C App Register spa
VITE_MSAL_REDIRECT_SIGNIN=http://localhost:3000/
VITE_MSAL_REDIRECT_SIGNOUT=http://localhost:3000/
VITE_MSAL_CLIENT_ID=<Application(Client) ID>
# Azure AD B2C
VITE_MSAL_LOGIN_AUTHORITY=https://<Azure AD B2C Tenant Name>.b2clogin.com/<Azure AD B2C Tenant Name>.onmicrosoft.com/B2C_1_<User Flow Name>/
VITE_MSAL_KNOWN_AUTHORITY=<Azure AD B2C Tenant Name>.b2clogin.com/<Azure AD B2C Tenant Name>.onmicrosoft.com

MsalBrowserの設定

import * as MsalBrowser from '@azure/msal-browser';

export const msalBrowserConfig: MsalBrowser.Configuration = {
  auth: {
    clientId: import.meta.env.VITE_MSAL_CLIENT_ID!,
    authority: import.meta.env.VITE_MSAL_LOGIN_AUTHORITY,
    knownAuthorities: [import.meta.env.VITE_MSAL_LOGIN_AUTHORITY!],
    redirectUri: import.meta.env.VITE_MSAL_REDIRECT_SIGNIN,
    postLogoutRedirectUri: import.meta.env.VITE_MSAL_REDIRECT_SIGNOUT,
  },
  cache: {
    cacheLocation: 'sessionStorage',
    storeAuthStateInCookie: true,
  },
};

蛇足

今回、Vue.js, Vue Router, Piniaで検証用アプリを作ったのだけど、Piniaの初期処理のタイミングが分かっていなくて躓いてしまった。