1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Azure Static Web Appsを試してみた5【Azure AD B2C連携】

Last updated at Posted at 2021-09-03

はじめに

以前の記事「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

image.png

その後、ログアウト用のURLを合わせて設定しておきます。

  • https://{static web apps ドメイン}/.auth/logout

image.png

クライアントシークレット

登録したアプリケーションを選択し、「証明書とシークレット」ー>「新しいクライアントシークレット」をクリックし、クライアントシークレットを登録します。登録後、必ず「値」をメモしておきます。
image.png

ユーザーフローの作成

今回は「サインアップとサインインの推奨」で作成しました。
属性選択で**「表示名」は必須**なので注意です。(ONしないと403ページが出るようになります)

metadataのURL確認

作成したユーザーフローを選択し「ユーザーフローを実行します」で表示されるURL(metadata URL)をメモしておきます。

image.png

Static Web Apps

メニューで構成を選択し「アプリケーション設定」に先程、ローカルに保存しておいた「アプリケーションID」と「クライアントシークレット」をそれぞれ登録し、キーをローカルに保存しておきます。

  • B2C_Client_Secret: メモしておいたクライアントシークレットの値
  • B2C_ClientID : メモしておいたアプリケーションIDの値

※ キー(名前)は任意でOKです。キー名は後述のstaticwebapp.config.jsonに設定します。

image.png

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
    }
  }
}

動作確認

無事、ログインできていない場合は、ログインページが表示されました。

image.png

ログイン後はアプリケーションのページが表示されます。
(当然API側も認証されていない場合は、loginにリダイレクトされます)

まとめ

Azure Active Directory B2Cとの連携を試しましたが、OIDCで連携できるIDPと連携できるのは大きな強みだなと感じました。

関連記事

1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?