最近は Azure AD B2C を利用したサービスを目にすることが増えてきましたが、デフォルトのドメインである b2clogin.com をそのまま利用しているケースが多いようです。もっともドメインがデフォルトなので Azure AD B2C を使っていると分かるのですが、本番でも b2clogin.com を使っているとパスワードマネージャーとの相性が悪いという問題があります。
具体的にはパスワードマネージャーはドメイン名*1でグルーピングされていますが、Azure AD B2C のデフォルトドメインで運用されている場合には b2clogin.com でグルーピングされてしまっています。
従って全く関係のないサービスが Azure AD B2C で構築されていて、更に b2clogin.com で運用されている場合には以下のように別のサービスのメールアドレスとパスワードが選択肢に上がってくることになります。
パスワードマネージャーが Public Suffix List に従っているならば、根本的には b2clogin.com が Public Suffix List に含まれていないことが問題なのですが、ブランディングの観点からも Azure AD B2C にカスタムドメインを設定した方がベターでしょう。
意外に Azure AD B2C をカスタムドメインで運用されている例が少なそうなので、実際に Azure AD B2C にカスタムドメインを設定して今回の問題が回避できることまで確認してみます。
まずはデフォルトのドメインで運用している Azure AD B2C のログインフローを実行すると、以下のようにブラウザーのパスワードマネージャーが関係のない b2clogin.com で運用されているユーザー情報を入力しようとしてきます。ここまでは今回意図した通りの挙動です。
Azure AD B2C へカスタムドメインを設定するには、Front Door を作成する必要があるので既に Front Door を使っている場合にはエンドポイントを新しく作成すれば、追加コスト無しで実現出来るのでお得です。
カスタムドメインを設定する方法については今回は触れないので、以下のエントリや公式ドキュメントを参照してください。Azure AD B2C のテナント側でカスタムドメインを追加してしまえば、後は Front Door の一般的な設定方法と同じなので難しくはありません。
設定した後に上手くアクセスできない場合は Azure AD B2C 側でカスタムドメインの検証が成功しているか確認します。若干確認プロセスに癖があった記憶がありますので、ドキュメントをしっかり読んで手順をスキップしないのがコツです。以下のように Verified になっていれば OK です。
Front Door のカスタムドメイン設定は特に難しいことはありませんが、TLS 証明書が必要になるので Managed Certificate などを使って発行しておきます。Azure AD B2C 向けに login サブドメインを割り当てることが多いと思うので、ワイルドカード証明書を持っている場合は Key Vault を使って割り当てます。
ここまでの設定を行うことでカスタムドメイン経由で Azure AD B2C が利用できるようになるので、実際にカスタムドメインでのログインを試してみるとパスワードマネージャーが反応しなくなります。これで他の Azure AD B2C を使っているサービスのパスワードが自動入力されることを避けることが出来ました。
今回の目的はこれで果たせたのですが、折角 Front Door を導入したのでついでにカスタマイズした HTML テンプレートについても Front Door 経由で配信することで、CORS を回避しつつアセットのキャッシュが行えるようにしておきます。
以下の公式ドキュメントにあるように、通常 HTML テンプレートは Azure Storage にホストされるため Azure Storage 側で CORS の設定を行う必要がありますが、Front Door を使って同一オリジンからルーティングで Azure Storage に振り分けてしまえば不要になります。
今回は例として、以下のように Azure Storage の layout というコンテナーに保存された HTML テンプレートを Front Door から配信するように変更します。
手順としてはシンプルに Front Door に対して Azure Storage の Origin Group を追加して、ルーティングを以下のように /layout/* に対して設定します。これで /layout/* 以下のアクセスは Azure Storage に、それ以外のアクセスは Azure AD B2C にルーティングされるようになります。
最後に Azure AD B2C のユーザーフローやカスタムポリシーを変更して、利用する HTML テンプレートのパスをカスタムドメイン経由のものに置き換えます。
修正したユーザーフローを使ってログインを試してみると、以下のように配信元が全てカスタムドメイン経由になり同一のオリジンになっていることが確認出来ます。CORS を回避できますし、同一オリジンから配信されているのはユーザー的にも安心感がありますね。
Azure AD B2C が思ったよりも広く使われているのは個人的にかなり嬉しいのですが、カスタムドメインが割り当てられていないケースも意外に多そうだったので、是非分かりやすいドメインを割り当ててもらえればと思います。個人的なお勧めはやはり login サブドメインです。
*1:恐らく Public Suffix List に従っている
