はじめに

以前の記事「Azure Static Web Appsを試してみた４【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ページが出るようになります)

• 参考：チュートリアル: Azure Active Directory B2C でユーザー フローとカスタム ポリシーを作成する

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と連携できるのは大きな強みだなと感じました。