はじめに
以前の記事「Azure Static Web Appsを試してみた4【Azure AD連携】」でAzure Static Web Appsと、Azure Active Directoryとの連携について書きました。
今回は、OIDC(OpenID Connect)で連携が可能なAzure AD B2Cとの連携をやってみます。
前提
OIDCで連携するためにはAzure Static Web AppsはStandardプラン(Freeプランでは不可)である必要があります。
参考:Azure Static Web Apps でのカスタム認証
Azure AD B2C
Static Web Appsと連携するために、Azure AD B2Cでは、以下を行います。
- アプリ登録
- クライアントシークレットの作成
- ユーザーフローの作成
- metadataのURLの確認
アプリ登録
B2Cのメニューで「アプリの登録」ー>「新規登録」をクリックし、アプリケーションの登録を行います。
重要なのはリダイレクトURLで、以下のルールで設定し、登録後「アプリケーションIDをメモ」しておきます。(その他はデフォルト)
- https://{static web apps ドメイン}/.auth/login/{後述するconfigファイルの属性名}/callback
その後、ログアウト用のURLを合わせて設定しておきます。
- https://{static web apps ドメイン}/.auth/logout
クライアントシークレット
登録したアプリケーションを選択し、「証明書とシークレット」ー>「新しいクライアントシークレット」をクリックし、クライアントシークレットを登録します。登録後、必ず「値」をメモしておきます。
ユーザーフローの作成
今回は「サインアップとサインインの推奨」で作成しました。
属性選択で**「表示名」は必須**なので注意です。(ONしないと403ページが出るようになります)
metadataのURL確認
作成したユーザーフローを選択し「ユーザーフローを実行します」で表示されるURL(metadata URL)をメモしておきます。
Static Web Apps
メニューで構成を選択し「アプリケーション設定」に先程、ローカルに保存しておいた「アプリケーションID」と「クライアントシークレット」をそれぞれ登録し、キーをローカルに保存しておきます。
- B2C_Client_Secret: メモしておいたクライアントシークレットの値
- B2C_ClientID : メモしておいたアプリケーションIDの値
※ キー(名前)は任意でOKです。キー名は後述のstaticwebapp.config.jsonに設定します。
staticwebapp.config.json
Azure ADとの連携と同様に、staticwebapp.config.jsonを設定する必要があります。
customOpenIdConnectProvidersの次の要素(例ではb2c)がコールバックURLの属性値となるので注意です。
- clientIdSettingName: SWAに設定したアプリケーションIDのキー名
- clientSecretSettingName: SWAに設定したクライアントシークレットのキー名
- wellKnownOpenIdConfiguration: 保存しておいたmetadata URL
- nameClaimType: この設定のためB2C側で表示名を必ず設定しておく必要があります
{
"$schema": "https://json.schemastore.org/staticwebapp.config.json" ,
"auth": {
"identityProviders": {
"customOpenIdConnectProviders": {
"b2c": {
"registration": {
"clientIdSettingName": "<SWAに設定したアプリケーションIDのキー名>",
"clientCredential": {
"clientSecretSettingName": "<SWAに設定したクライアントシークレットのキー名>"
},
"openIdConnectConfiguration": {
"wellKnownOpenIdConfiguration": "<メモしておいたmetadata URL>"
}
},
"login": {
"nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
"scopes": ["openid", "profile"]
}
}
}
}
},
"routes": [
{
"route": "/*",
"allowedRoles": ["authenticated"]
}
],
"responseOverrides": {
"401": {
"redirect": "/.auth/login/b2c",
"statusCode": 302
}
}
}
動作確認
無事、ログインできていない場合は、ログインページが表示されました。
ログイン後はアプリケーションのページが表示されます。
(当然API側も認証されていない場合は、loginにリダイレクトされます)
まとめ
Azure Active Directory B2Cとの連携を試しましたが、OIDCで連携できるIDPと連携できるのは大きな強みだなと感じました。