期末の進行に押されて、ブログを書く習慣が途切れておりました💦
心機一転、本日は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を活用して外部連携は可能ですが、コネクタで誰でも繋げてデータを社内・社外でも活用できるのは、大きな差別化の要因だと思っています。

会員サイトも簡単に構築できる！

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

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

ID プロバイダーを Azure AD B2C に移行する

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

Azure AD B2C作成する

まずは、Azureへログインして、ご自身のサブスクリプション内に今回作成するリソースグループを作成してください。
※この辺りはAzureの基本操作なので詳しい説明は割愛します。
詳しくはチュートリアル:Azure Active Directory B2C テナントの作成を参考にしてください。

注意
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’

構築が完了したら、Open B2C Tenantから設定画面に入ります。

設定は赤枠部分に記載された、1.アプリケーションの登録 → 3.ユーザーフローの作成をおこないます。

1.アプリケーションの登録

名前：自由に決めてください。
リダイレクト URI：アプリケーションのタイプは[web]を選び、URIには後で解説するPower PagesのAzure AD B2Cの「構成」に表示される「応答URL」を記載してください。

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

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

3.ユーザーフローの作成

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

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

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

注意
上記のユーザーフロー設定画面に、トークンの互換性設定の項目があります。
こちらの「発行者 (iss) 要求」の部分ですが、クリックして「tfp」を含んだURIを選んでください。

Power Pages側の設定

設定メニューから、認証にある「ID プロバイダー」を選択して、Azure AD B2Cの「構成」ボタンを押してください。

Azure AD B2C側で設定した内容を、Power Pages側にも設定していきます。

「2.サイトの設定を構成する」部分の以下設定内容です。
オーソリティー：
Azure AD B2Cのユーザーフローを実行した際に表示されるURIをクリックすると表示される

"issuer":に続くURLをコピペします。（”ダブルコーテーションなどは要らないhttpsから始まるURIをコピペしてください）

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

クライアント ID：
Azure AD B2Cで設定した「アプリ」のアプリケーション ID を入力します。

「パスワードのリセット設定を構成する」以下の設定内容です。
既定のポリシー ID：
パスワードのリセットポリシー ID：
B2Cから始まるユーザーフローの名前を入力します。

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

動作テスト

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

「プレビュー」を押してサイトを表示したら「サインイン」からログイン画面を表示します。

うまく設定できていれば、Azure AD B2Cのログイン画面へリダイレクトされると思います。
Sign up now から新規登録を試して、サイトへログイン出来たら成功です。

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

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

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