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