はじめに
以前から認証基盤にAzure Active Directoryを採用してきたのですが、最近、B2C向けだけではなく、B2B向けにも「Azure Active Directory B2C」を利用することが多くなってきました。
ここで課題になっていたカスタムドメインの適用について、試していこうと思います。
手順としては以下のステップです。
- Azure AD B2CテナントのAzure ADにカスタムドメインを適用する
- Front Doorを設定する
- BLOBにCORSを設定する（Azure AD B2CでカスタマイズされたHTMLを利用している場合）
カスタムドメインの適用
Azure AD B2Cのテナントにログインし、「Azure Active Directory(Azure AD B2Cではない)」を選択後、メニューから「カスタムドメイン名」、「カスタムドメインの追加」と順にクリックしていきます。
カスタムドメイン入力後、「ドメインの追加」をクリックすると、DNSサーバーへ登録する情報が表示されます。DNSサーバーでは、「TXTレコード」か「MXレコード」で表示された情報で登録して下さい。
DNSサーバー登録後は「確認ボタン」をクリックします。
一覧に戻り、登録したカスタムドメインが「確認済み」の状態になります。
確認済みになったら、DNSサーバーから追加した「TXTレコード」または「MXレコード」を削除します。
Front Doorの設定
カスタムドメインを利用するには、Azure AD B2Cの前にFront Doorを配置する必要があります。
ポイントは「バックエンドプールの作成」と「カスタムドメインの追加」となります。
バックエンドプールの作成
以下の入力し、その他はデフォルトのままとします。
- バックエンド ホストの種類：カスタムホスト
- バックエンド ホスト名：Azure AD B2Cの名前（{tenantName}.b2clogin.com）
- バックエンド ホスト ヘッダー：バックエンド ホスト名と同じ
また、バックエンドをバックエンドプールに追加後、「正常性プローブ」を「無効」にします。
その後、「ルーティング規則」を設定し、「カスタムドメインを追加」します。
カスタムドメインの追加
以下の情報でDNSサーバーにCNAMEでレコードを作成します。
- カスタムドメイン名
- FrontDoorデフォルトドメイン({frontDoorName}.azurefd.net)
DNSサーバーにレコードを作成後、カスタムドメインをFront Doorに設定します。
「カスタム ホスト名」を設定し、カスタムドメインHTTPSを有効にします。（その他はデフォルト）
DNSサーバーに対してカスタムドメインの検証が実行され、その後登録が可能となります。
尚、検証から証明書の適用までにそれなりに時間がかかりますので、気長に待ちます（20分くらい）
カスタムドメイン追加後は、「ルーティング規則」の「フロントエンドまたはドメイン」で追加したカスタムドメインに変更します。
BLOBへのCORSの設定
HTMLやCSS等の静的コンテンツにより、B2CのUIをカスタマイズする場合のみ必要となり、該当のストレージアカウントにて、CORSの設定を行います。
メニューから「ソースの共有 (CORS)」を選択後、Blob Serviceで以下を設定します。
- 許可されたオリジン : https://カスタムドメイン
- 許可されたメソッド : GET/OPTIONS
- 許可されたヘッダー : *(アスタリスク)
- 公開されるヘッダー : *(アスタリスク)
- 最長有効期間 : 200
検証
B2Cの実行ウィンドウで「ユーザー フロー エンドポイントを実行」のURLを変更したカスタムドメインに変更して、ブラウザで実行します。
無事、カスタムドメインでB2Cの画面が表示されました。
まとめ
B2Cのカスタムドメイン化は実現できたので、次回はWeb AppsのEasyAuthやAngularやAPIなどに適用を検証してみたいと思います。