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

# はじめに
以前の記事[「Azure Static Web Appsを試してみた４【Azure AD連携】」](https://qiita.com/akihiro-nakano/items/b67e7e49d35d336f7f69)でAzure Static Web Appsと、Azure Active Directoryとの連携について書きました。
今回は、OIDC(OpenID Connect)で連携が可能なAzure AD B2Cとの連携をやってみます。

## 前提
OIDCで連携するためにはAzure Static Web AppsはStandardプラン(Freeプランでは不可)である必要があります。
参考：[Azure Static Web Apps でのカスタム認証](https://docs.microsoft.com/ja-jp/azure/static-web-apps/authentication-custom?tabs=aad#register-your-application-with-the-identity-provider)

## Azure AD B2C
Static Web Appsと連携するために、Azure AD B2Cでは、以下を行います。

- アプリ登録
- クライアントシークレットの作成
- ユーザーフローの作成
- metadataのURLの確認

### アプリ登録
B2Cのメニューで「アプリの登録」ー＞「新規登録」をクリックし、アプリケーションの登録を行います。
重要なのはリダイレクトURLで、以下のルールで設定し、登録後「**アプリケーションIDをメモ**」しておきます。(その他はデフォルト)

- https://{static web apps ドメイン}/**.auth/login/{後述するconfigファイルの属性名}/callback**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/2404b0d4-6ee3-ec4d-311c-7b02babbf9a1.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/703893ef-d959-2740-cb4d-c64b5b3e5cae.png)


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

登録したアプリケーションを選択し、「証明書とシークレット」ー＞「新しいクライアントシークレット」をクリックし、クライアントシークレットを登録します。登録後、**必ず「値」をメモ**しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/6a63faed-a6a2-ccb7-dcb3-b31038498b3f.png)

### ユーザーフローの作成

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

- 参考：[チュートリアル: Azure Active Directory B2C でユーザー フローとカスタム ポリシーを作成する](https://docs.microsoft.com/ja-jp/azure/active-directory-b2c/tutorial-create-user-flows?pivots=b2c-user-flow)

### metadataのURL確認

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/4aeb14e7-64be-cdc6-25af-2104808cecc4.png)

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/ce7f18a7-2ea5-3741-fc4e-38424bb2d55d.png)


## staticwebapp.config.json

Azure ADとの連携と同様に、staticwebapp.config.jsonを設定する必要があります。

customOpenIdConnectProvidersの次の要素（例ではb2c）がコールバックURLの属性値となるので注意です。

- clientIdSettingName: SWAに設定したアプリケーションIDのキー名
- clientSecretSettingName: SWAに設定したクライアントシークレットのキー名
- wellKnownOpenIdConfiguration: 保存しておいたmetadata URL
- nameClaimType: この設定のためB2C側で表示名を必ず設定しておく必要があります

```json
{
  "$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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/23d6d441-e460-f77a-1247-a769ffc850b6.png)

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

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

## 関連記事
* [AD B2C記事まとめ](https://qiita.com/AsukaSeki/items/46afb6846cb4057b8050)