Zenn
😇

Power Apps portals で Azure AD B2C を構成してみる(プレビューのほう)

2022/01/14に公開
Power Apps
powerappsportals
Power Pages
tech

Power Pages でも使えます。

Power Apps portals には独自のローカル認証機能が備わっていますが、これはやたらと Azure AD B2C に移行したほうがいいよと注意がされています。
じゃあやってみるか、ということで、まんま Docs の記事の通りですが、やってみたので記事にします。

完成イメージ

こんな感じに設定ができます。(Google での認証追加はこの記事にはありません)

参考

以下を参考にやってみました。
2.に関して、一部英語のドキュメントのみ記載がある部分があったので、ご注意ください。

  1. Power Apps の画面中心に作業を完了する方法(プレビュー)
    https://docs.microsoft.com/ja-jp/powerapps/maker/portals/configure/configure-azure-ad-b2c-provider

  2. Power Apps と Azure の画面いったりきたりで作業を完了する方法
    https://docs.microsoft.com/ja-jp/powerapps/maker/portals/configure/configure-azure-ad-b2c-provider-manual

プレビューのほうが画面をいったりきたりもなく、設定もだいぶ簡単です。
が、細かい設定がよくわかるので、2.の方法も一度やってみるとためになります。

事前準備

作業に入る前に、本件で利用するポータルと、Azure のサブスクリプションを作成しておきます。

Power Apps での準備

ポータルを作成する

ポータルを一から作成 に従って、ポータルを作成します。

Azure での準備

サブスクリプションを作成する

Power Apps と紐づいているテナントの Azure Portal にアクセスし、サブスクリプションを作成します。

作業手順(Docs分)

では、早速作業を行っていきます。

Power Apps での作業

ポータルサイトの認証設定を追加する

  • 対象のポータルサイトを選択し、認証設定を選択します。

  • Azure Active Directory B2C の構成を選択します。

  • 以下を設定し、次へを選択します。
項目 設定値
プロバイダー名 {任意の値}

  • 以下を設定し、次へを選択します。

※今回は新しい Azure AD B2C テナント を作る手順とします

項目 設定値
Azure Active Directory {使用するサブスクリプションがあるテナント}
サブスクリプション {使用するサブスクリプション}
リソースグループ {使用するリソースグループ}
初期ドメイン名 {任意の値}
国/地域 {任意の値}

次へを選択後、完了まで少し時間がかかります。

  • 特に何もせず、次へを選択します。

  • 特に何もせず、作成を選択します。

  • 以下の画面が表示されれば完了です。

設定を確認する

  • ポータルサイトのサインイン画面を表示すると、先ほど設定した Azure AD B2C のサインインボタンが表示されていますので、それを選択します。

  • 以下の画面が表示されれば完了です。

ということで、かなり簡単に設定できました。
サブスクリプション登録こそ必要ですが、50,000MAU までは無料(2022年1月時点)なのでよほど使い込まない限りは問題ないと思います。
が、特に言語の設定とかはなかったので、日本語で使いたい場合とかは下記の追加作業が必要です。

作業手順(日本語設定にするなど)

Azure での作業

ユーザフローを作成する

  • Azure ポータル で、今回追加した B2C のテナントに切り替えを行い、Azure AD B2C の画面を表示し、ユーザフローを選択します。

  • 新しいユーザフローを選択します。

※作成されたユーザフローを編集してもいいのですが、レガシって表示してあるので、新しく作ることにしました。
※このキャプチャは後からとったので3件見えていますが、本来は、2件になっているはずです。

  • 以下を設定し、作成を選択します。

※今回はパスワードリセットはやらず、サインアップとサインインだけやります。

項目 設定値
ユーザフロータイプ サインアップとサインイン
バージョン 推奨

  • 以下を設定し、作成を選択します。
項目 設定値
名前 {任意の値}
ID プロバイダー Email signup
多要素認証 方法の種類 メール
多要素認証 MFAの強制 オフ
ユーザ属性とトークン要求 電子メールアドレスをチェック(その他は任意)

作成を選択後、完了まで少し時間がかかります。

  • 作成できたら、作成したユーザフローを選択します。

  • ページレイアウトを選択します。(趣味のため、任意で実施してください)

  • テンプレートから任意のものを選択し、保存を選択します。(趣味のため、任意で実施してください)

  • 言語を選択します。

  • 言語のカスタマイズを有効化を選択します。

  • 日本語を選択し、表示されたパネルに以下を設定、保存を選択します。
項目 設定値
有効 はい
既定 はい

  • プロパティを選択します。

  • 以下を設定し、保存を選択します。
項目 設定値
発行者(iss)要求 {tfpを含むものを設定}

  • ユーザフローを実行しますを選択します。

  • 表示されたパネルの一番上の openid-configuration を選択します。

  • 表示された文字列の一番上の issuer の値をコピーします。

Power Apps での作業

ユーザーフローを適用する

  • Azure Active Directory B2C の構成の編集を選択し、表示されたパネルに以下を設定し、保存を選択します。
項目 設定値
オーソリティ {コピーした issuer の値}
既定のポリシーID {作成したユーザーフローの名前}
有効な発行者 {サインアップ用の値の部分を issuer の値に置き換える}

※有効な発行者の部分には、カンマ区切りで、サインアップ用の値、パスワードリセット用の値が入力されている。今回は、そのサインアップ用の値の部分を issuer の値に置き換える。

保存ができれば完了です。

設定を確認する

  • ポータルサイトのサインイン画面を表示し、再度 Azure AD B2C のサインインボタンを選択すると以下が表示されます。無事日本語になっています。

  • サインアップもできました。これで完了です。

先ほどより少し難しいですが、それでも簡単に設定できました。

感想

Azure AD B2C よくわからんなー触りたくないなーと思っていましたが、この新しい方法、そのあたりを全然意識せず進められて、すごく楽でよかったです。

一度 Zenn で記事を書いてみたかったので、やってみました。
デザインがかわいいですね！

Discussion