SPAでGoogleアカウント認証を実装する際のIdPの構築・設定<Azure AD B2C編>
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 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になるのでメモしておく。
GCPにおけるAzure AD B2C認証設定
GCPにサインインする
- 始めにGoogle Developers Consoleにサインイン
※ GCPのアカウントを作成するにはGoogleアカウントが必要になります。
- アプリを登録するにはプロジェクトが必要。既存のプロジェクトがあれば、それを利用してもいいし、新しいプロジェクトを作成してもよい。
- 左側のナビゲーションメニューから「APIとサービス」を選択
GCPにアプリを登録する
-
左側のメニューで「OAuth同意画面」を選択しアプリを登録
- User-Type:
外部
を選択して[ 作成 ]を押下
- User-Type:
-
アプリ情報
- アプリ名:
任意
- ユーザーサポートメール:
任意
※ 今回はGCPアカウントを作ったGmailを設定 - アプリのドメイン: 未入力
- 承認済みドメイン: ドメインを追加で
b2clogin.com
を設定- その他のAWS CognitoやFirebaseなどとアプリを共有することもできる。例えば、Cognitoの場合は、
amazoncognito.com
をドメインに追加する。
- その他のAWS CognitoやFirebaseなどとアプリを共有することもできる。例えば、Cognitoの場合は、
- デベロッパーの連絡先情報
- メールアドレス:
任意
※ 今回は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で作成された
クライアントシークレット
- [ 保存 ]を押下
- 配信元のURL :
ユーザーフローを作成する
- 左側のサイドナビゲーションの ポリシー 配下にある「ユーザー フロー」を選択
- 上部メニューバーの[ + 新しいユーザー フロー ]を選択
- ユーザーフローを作成するで
サインインとサインアップ
を選択 - バージョンで
推奨
を選択 - [ 作成 ]ボタンを押下
- 画面が切り替わり、続けてユーザーフローの詳細を設定する
- Name :
任意
- ID プロバイダー :
- ローカルアカウント :
None
を選択 - ソーシャルID プロバイダー:
作成したGoogleのIdpプロバイダー
が表示されているので☑
を入れる
- ローカルアカウント :
- 多要素認証 ※ MFAの設定は、個々の環境の既存設定に依存します。今回はOff。
- 方法の種類 : メール
- MFA の矯正 : オフ
- 条件付きアクセス : チェックしない
- ユーザー属性とトークン要求
[ 詳細を表示... ]をクリック
要求を返す
で以下をチェック- ☑
ID プロバイダー
- ☑
ID プロバイダーのアクセス トークン
[ OK ]ボタンを押下
- ☑
- [ 作成 ]ボタンを押下
- Name :
以上で構築&設定が終了
おまけ
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の初期処理のタイミングが分かっていなくて躓いてしまった。
参考にしたAzureのドキュメント
Discussion