[Azure AD B2C]カスタムドメインのサポートがPublic Preview

こんにちは、富士榮です。

Azure AD B2Cの各種エンドポイントってxxx.microsoftonline.comなので、Azure ADを使ってるってモロにわかってしまいます。

企業内で利用するシナリオだとそれほど問題にならないかも知れませんが、B2Cシナリオでは外部へのプロモーションに使ったりするので問題になることもしばしばあります。また、同様にB2Cシナリオではログイン画面のカスタマイズを行う前提になると思うので、ドメイン名の問題でJavaScriptを仕込めない、などの機能面での不具合も出てきます。

そこで、しばらく前からPrivate Previewが行われていたカスタムドメインによるJavaScriptのサポートがようやくPublic Previewとして公開されたので紹介します。
※JavaScriptサポートはまだみたいです。想定外の動きをすることもありますが問い合わせとかはしないようにしましょう。（5/21追記）

詳細ドキュメントはこちらです。
　https://docs.microsoft.com/en-us/azure/active-directory-b2c/b2clogin


尚、最初にお伝えしておきますが、本当に好きなドメイン名でログイン画面を構成することが出来るようになるわけではありません。microsoftonline.comの代わりにb2clogin.comという別のドメインが用意され、そのドメイン上のログイン画面ではJavaScriptが使える、というだけです。

カスタムドメインを使う時のURLのルールはこのように変わります。
＜従来＞
https://login.microsoftonline.com/{テナント名}.onmicrosoft.com
＜カスタム＞
https://{テナント名}.b2clogin.com/{テナント名}.onmicrosoft.com


では、早速試してみましょう。

◆カスタムUIの準備

まずはログイン画面をカスタマイズしてJavaScriptを仕込んでみます。
最初にHTMLを作成して、blobにアップします。

次に、カスタムポリシーで（もしくは管理画面から）、UI定義で作成したHTMLを使う様に設定します。

後は、サインインポリシーやアプリケーションの定義などは必要ですが、この辺りは割愛します。

◆まずは通常通り呼び出してみる

今回はASP.NET CoreのMVCアプリを作ってAzure AD B2Cを使って認証する様に構成します。
通常はこんな感じで認証の設定を入れるとノンコーディングでAzure AD B2Cを使って認証できるようになります。

アプリケーションを起動し、SignInをしてみるとAzure AD B2Cのログイン画面が表示されます。

ここで、先にアップロードしたHTMLに合った通り、ボタンを押すとAlertが出るはずなんですが、通常のドメインで構成されているのでボタンは全く反応しません。
（もちろんログインは出来ます）

◆カスタムドメインを使う

ようやくカスタムドメインの出番です。
先のアプリケーションのappsettings.jsonを開き、Instanceの行を直接編集します。
元はlogin.microsoftonline.com/tfpだった部分をxxx.b2clogin.comへ変えます。

これだけです。
早速実行してみると、先ほどと同じログイン画面は出ますが、ドメイン名がb2clogin.comになっており、JavaScriptが実行できるようになっています。

これで色々とカスタマイズは出来るようになるので、自由度は各段に増します。
（本当は独自ドメインが使えると良いんですが・・・）

ちょっと応用で、Puzzle CAPTHAのCAPYを組み込んでみました。
この辺りも全部JavaScriptが前提となるので、従来は実現できなかった構成です。

UIのカスタマイズを含む、IdentityExperienceFrameworkの使い方については今月22日～23日のde:codeでチョークトークで解説させていただく予定です。是非こちらもお越しください。（私の出番は23日の最終セッションです）

　AD20
　実践から学ぶ！SNS ID を企業認証基盤で活用するには？
　https://www.microsoft.com/ja-jp/events/decode/2018/sessions.aspx#AD20