Power PagesでAzure AD B2CをIDプロバイダーに設定する方法

期末の進行に押されて、ブログを書く習慣が途切れておりました💦
心機一転、本日はPower PagesでIDプロバイダーにAzure AD B2Cを設定する方法をまとめます。

# Power Pagesって？
「Microsoft Build 2022」で「Microsoft Power Platform」で5つ目のサービスとして、リリースされた、ウェブサイトを構築できるサービスです。
Power Pagesの場合、ローコードとも言えないくらい基本は簡単にデザインスタジオから、テンプレートを使って素早くウェブサイトを構築することができます。

似たようなサービスとしては、Word PressやMovable Type Cloudのような、CMSサービスとなりますが、やはりDataverseが採用されているので、他のサービスと違いデータをサイロ化させにくいのが素晴らしい点です。
もちろん、Word PressやMovable Type CloudもAPIを活用して外部連携は可能ですが、コネクタで誰でも繋げてデータを社内・社外でも活用できるのは、大きな差別化の要因だと思っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/b65dec1f-a747-345e-a55e-f8593259276c.png)

# 会員サイトも簡単に構築できる！
ウェブサイトなので、会員サイトも構築できるようになっており、ログインしたユーザーに対して、ページ個別の表示・非表示や、データへのアクセスなど、権限コントロール出来るようになっています。

IDプロバイダーのデフォルトでは、ローカル サインインとAzure Active Directoryが有効になっていますが、ローカル サインインは非推薦とされています。

:::note info
[ID プロバイダーを Azure AD B2C に移行する](https://learn.microsoft.com/en-us/power-apps/maker/portals/configure/migrate-identity-providers "ID プロバイダーを Azure AD B2C に移行する")
:::

ウェブサイトの性質上、一般ユーザーに対して会員サービスを提供することを考慮すると、Azure AD B2Cを活用するのがベストです。
ですので、今回はPower PagesにAzure AD B2CをIDプロバイダーに設定してみたいと思います。

# Azure AD B2C作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/5a6b5d00-2335-ebfe-0f18-d4aba9dba087.png)

まずは、Azureへログインして、ご自身のサブスクリプション内に今回作成するリソースグループを作成してください。
※この辺りはAzureの基本操作なので詳しい説明は割愛します。
詳しくは[チュートリアル:Azure Active Directory B2C テナントの作成](https://learn.microsoft.com/ja-jp/azure/active-directory-b2c/tutorial-create-tenant)を参考にしてください。

:::note warn
注意
Azure AD B2Cを作成しようとした際に **「The subscription is not registered to use namespace ‘Microsoft.AzureActiveDirectory’. See https://aka.ms/rps-not-found for how to register subscriptions. 」** とエラーが出る場合があります。

エラーの理由は、Microsoft.AzureActiveDirectory 名前空間プロバイダーがサブスクリプションに対して既定で有効になっていないことです。
リソース プロバイダーから、Microsoft.AzureActiveDirectoryを検索して登録する必要があります。
詳しくは、下記ページを参照してください。
[The subscription is not registered to use namespace ‘Microsoft.AzureActiveDirectory’](https://sureshmaurya.me/2021/06/28/the-subscription-is-not-registered-to-use-namespace-microsoft-azureactivedirectory/ "The subscription is not registered to use namespace ‘Microsoft.AzureActiveDirectory’")
:::

構築が完了したら、Open B2C Tenantから設定画面に入ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/3e0fb9fe-661d-1c69-0c63-f84023a184a5.png)
設定は赤枠部分に記載された、1.アプリケーションの登録 → 3.ユーザーフローの作成をおこないます。

### 1.アプリケーションの登録
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/66e3dc0d-0776-6478-ec50-7613b2472e33.png)
名前：自由に決めてください。
リダイレクト URI：アプリケーションのタイプは[web]を選び、URIには後で解説するPower PagesのAzure AD B2Cの「構成」に表示される「応答URL」を記載してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/6f587e39-e7cd-9507-2466-de08bfc639fa.png)

「登録」ボタンを押すとアプリケーションの登録は完了です。

左メニューの「認証」を選び、暗黙的な許可およびハイブリッド フローのセクションで「アクセス トークン (暗黙的なフローに使用)」のチェックを入れて保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/82ede197-282c-b7cc-255f-10ec467fdb94.png)



###  3.ユーザーフローの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/a2801f0b-c851-f900-ed26-f7696a12662a.png)

サインアップとサインインや、パスワード変更などのユーザー フローを作成します。ユーザー フローとは、B2C側でログインに関わる機能を設定する画面だと思ってください。
左メニューからユーザーフローを選び、「新しいユーザーフロー」から、フローを作成します。

設定は、下記ページを参照してください。
このページ内の「サインアップとサインイン ユーザー フローを作成する」「セルフサービス パスワード リセットを有効にする」を設定していただければ、本番を想定した機能を持たせられると思います。

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

:::note warn
注意
上記のユーザー フロー設定画面に、トークンの互換性設定の項目があります。
こちらの「発行者 (iss) 要求」の部分ですが、クリックして「tfp」を含んだURIを選んでください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/7c63c90f-961f-52b1-2aaf-9fb66b233fae.png)
:::

# Power Pages側の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/c4405c29-98be-d0a6-b082-aee9d9129520.png)
設定メニューから、認証にある「ID プロバイダー」を選択して、Azure AD B2Cの「構成」ボタンを押してください。

Azure AD B2C側で設定した内容を、Power Pages側にも設定していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/f260519f-da23-b7e8-75ed-7674e169a740.png)

「2.サイトの設定を構成する」部分の以下設定内容です。
**オーソリティー：**
Azure AD B2Cのユーザー フローを実行した際に表示されるURIをクリックすると表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/ec5b182c-82ef-7c81-3ac1-cae7722fb058.png)
"issuer":に続くURLをコピペします。（”ダブルコーテーションなどは要らないhttpsから始まるURIをコピペしてください）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/f6d497c5-2274-236a-d8c2-cc3710c8526e.png)

:::note warn
注意
コピペするURIに「tfp」の文字列を含むURIを設定しているか確認してください。
:::

**クライアント ID：**
Azure AD B2Cで設定した「アプリ」の アプリケーション ID を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/391a5434-6edb-baa4-9f78-4461c3853748.png)

「パスワードのリセット設定を構成する」以下の設定内容です。
**既定のポリシー ID：**
**パスワードのリセットポリシー ID：**
B2Cから始まるユーザーフローの名前を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/39d32a73-6d33-4bcc-c3da-54f54a778220.png)

**有効な発行者：**
ここには「**オーソリティー**」に登録したURIを入力します。
保存を押していただければ、以上で設定は完了です。

# 動作テスト
Power PagesのIDプロバイダー設定画面で、Azure AD B2Cを「既定として設定」を選んでください。
これを選ぶことで、ログインボタンを押した後にAzure AD B2Cのログイン画面へ移動するようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/db84b1fd-eae4-37b2-5f82-157a406ef4df.png)


「プレビュー」を押してサイトを表示したら「サインイン」からログイン画面を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/0b17cb67-d43b-a7ab-66a0-9fe1a6086618.png)

うまく設定できていれば、Azure AD B2Cのログイン画面へリダイレクトされると思います。
Sign up now から新規登録を試して、サイトへログイン出来たら成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/114ffb3d-8a37-e034-62e7-8468c50168f9.png)

如何でしたでしょうか。
Azure AD B2Cを利用することで、驚くほど素早く認証機能を設置することが出来たので驚きました。

認証に関しては、知識不足な部分も多くて苦労しましたが、先日kenichiro nakamura（@kenakamu108）さんか主催する「勝手勉強会」で、OAuth 2.0について学んだ予備知識が役に立ちました！
https://katte.connpass.com/event/260922/

まだプレビュー版ですがPower Pagesでウェブサイトを公開してみてください。