Azure初心者がAzure AD B2Cについて整理してみた part3
はじめに
この記事は4部構成で書いている記事の第3弾です。
今回は少し長めの記事になります。
- part1 アカウント作成〜B2Cテナント作成
- part2 B2Cテナントを触ってログイン画面を作る
- part3 part2で作った画面（ユーザーフロー）のカスタマイズ ← 今回
- part4 GraphAPIを使ってみる
part3である当記事は、B2Cテナントを触ってログイン画面を作るの部分を書いていきます。
part1, part2の記事は以下からご確認ください。
part3でやること
- ログインに必要な情報（IDプロバイダー）を変更する
- テンプレートの変更
- 会社のブランド機能
- 言語のカスタマイズ
- ユーザー属性の追加
- HTMLテンプレートを利用したカスタマイズ
前提
この記事で紹介する内容は、前提として以下の作業が必ず必要となります。
- part1の作業が全て完了していること
- part1の記事で作成したB2Cテナントに切り替えていること
- part2の記事の「アプリの登録」と「ユーザーフローの作成」の作成が完了していること
ログインに必要な情報（IDプロバイダー）を変更する
デフォルトでは、メールアドレスを使用してログインするような設定になっています。
今回は、これをユーザー名（id）でログインできるよう変更してみます。
↓Azure AD B2Cの画面を開き、「IDプロバイダー」をクリックします。
↓「ローカルアカウント」をクリックします。
↓"Username"をチェックして、「保存」をクリックします。
↓ユーザーフロー一覧の画面で、part2の記事で作成したユーザーフローを選択します。
↓「IDプロバイダー」をクリックします。
↓デフォルトでは"Email signup"が選択されています。今回はユーザー名（id）でログインできるようにしたいので、"User ID signup"を選択して「保存」をクリックします。
User ID signup を設定した際の注意点
"User ID signup"を設定した場合、注意点があります。
ユーザーフローのサインアップ画面からコンシューマーユーザーを作成する場合は問題ありませんが（サインアップ画面から登録する場合は、メールアドレスの入力項目があるため）、Azure portalで作成する場合、別途メールアドレスを登録する必要があります。
上記メールアドレスは、パスワードを忘れた場合のフローで必要になります。
実際に登録してみます。
↓メールアドレスを登録したいユーザーのプロファイル画面を開き、認証方法をクリックします。
↓電子メールの入力項目に登録したいメールアドレスを入力し、「保存」をタップします。
以上で完了です。
これでAzure portalから登録したコンシューマーユーザーもパスワードを忘れた場合のフローを実行できるようになります。
テンプレートの変更
Azure AD B2Cでは、以下の3パターンのテンプレートデザインが用意されています。
- オーシャンブルー
- スレート グレー
- クラシック
上記テンプレートがどんなレイアウトかは以下の公式ドキュメントから確認できます。
実際にこの機能を利用して画面のレイアウトを変えてみます。
↓ユーザーフロー一覧の画面で、part2の記事で作成したユーザーフローを選択します。
↓「ページレイアウト」をクリックします。
↓「テンプレート」をクリックし、変更したいレイアウトをタップします。今回は「スレート グレー」を選択します。
↓変更前のレイアウトです。
↓変更後のレイアウトです。レイアウトが変わっていることが分かります。
会社のブランド機能
会社のブランド機能というものを利用して、各種ユーザーフローの画面のロゴ等を変更することができます。
この機能を利用してロゴを更新すると、ユーザーフローの機能である確認コードのメール等でもロゴが表示されるようになります。
詳しくは以下のページを参考にしてください。
言語のカスタマイズ
言語のカスタマイズ機能を利用して、ユーザーフローで作成した画面の文言を変えることが可能です。
言語はデフォルトでは英語になっています。今回はこれを日本語に変え、さらにオーバーライド機能を使って、表示される内容を変えてみます。
今回やる内容は以下の公式ドキュメントでも確認できます。
言語を日本語にする
↓ユーザーフロー一覧の画面で、part2の記事で作成したユーザーフローを選択します。
↓「言語」をクリックします。
↓「言語のカスタマイズを有効化」をクリックします。これを行うことで、言語のカスタマイズが可能になります。
↓「日本語を」クリックし、「有効」と「既定」をはいにして「保存」をクリックします。
↓まだ「English」が有効になっているので、「English」をクリックし、「有効」をいいえにして「保存」をクリックします。
↓これで画面の言語が日本語になりました。
オーバーライド機能を利用して、文言を変えてみる。
今回はサインインの画面のサインインボタンの文言を一部変えてみます。
↓「日本語」をクリックし、「統合されたサインアップまたはサインインページ」を選択し、「既定値のダウンロード（ja）」をクリックします。すると、jsonファイルがダウンロードできます。
↓ダウンロードしたファイルには、以下の要素があると思います。
{
"ElementType": "UxElement",
"ElementId": null,
"StringId": "button_signin",
"Override": false,
"Value": "サインイン"
},
↓以下のように書き換えます。変更しているのは"Oberride"と"Value"のみです。"Value"を更新した場合は、必ず"Oberride"をtrueにする必要があります。
{
"ElementType": "UxElement",
"ElementId": null,
"StringId": "button_signin",
"Override": true,
"Value": "ログイン"
},
↓jsonファイルを書き換えたら、日本語の統合されたサインアップまたはサインインページを選択し、ファイルの選択から、書き換えたjsonファイルを選択してアップロードします。
↓「サインイン」だった文言が「ログイン」に変わっていることが分かります。
ユーザー属性の追加
ユーザー属性とは
まず、ユーザー属性とはユーザー情報のことです。例えば姓、名などです。
ユーザー属性の入力は、サインアップ画面やプロファイル編集画面で行います。
B2Cテナントでユーザー属性を追加する
↓B2Cの画面を開いて、「ユーザー属性」をクリックします。
↓「追加」をクリックし、追加する属性の名前・データ型・説明を入力後「作成」をクリックします（デフォルトで用意されているユーザー属性を利用する場合は追加する必要はありません）。
ユーザーフローで利用するユーザー属性を追加する
ユーザーフローでは、どのユーザー属性を利用するか（ユーザーに入力させるか）設定することができます。
↓ユーザーフロー一覧の画面で、part2の記事で作成したユーザーフローを選択します。
↓「ユーザー属性」をクリックします。
↓先程作成したユーザー属性（もしくはユーザーに入力させたいその他のユーザー属性）にチェックを入れ、「保存」をタップします。
サインアップ画面を確認してみます。
↓元々のサインアップ画面
↓ユーザーフローで利用するユーザー属性を追加した後のサインアップ画面
入力項目が追加されていることが分かります。
アプリケーション要求
ユーザーフローでは、アプリケーションに渡すユーザーフローの値を選択することが可能です。
上記は「アプリケーション要求」という機能を利用して実現します。
↓ユーザーフローの画面で「アプリケーション要求」をクリック。
↓アプリ側に渡したい値にチェックを入れ、「保存」をクリックします。
HTMLテンプレートを利用したカスタマイズ
今までのレイアウトの変更方法を紹介しましたが、もっとレイアウトを変更したいこともあると思います（というより、大体のパターン出そうだと思います）。
そのような場合に、こちらの方法を利用します。
以下の公式ドキュメントを参考にして進めます。
今回はサインイン画面のみカスタマイズします。
では実際にやっていきます。
↓まず、以下リポジトリをcloneもしくはダウンロードします。
↓歯車マークをタップして表示される画面から、 B2Cテナントに紐づいているテナント（part1のアカウント作成時にされたADテナント）に移動します。
↓Azure portalのホーム画面にある検索ボックスから「ストレージアカウント」で検索し、選択します。公式ドキュメントの「2. Azure Blobストレージアカウント」を作成する参考にし、各種入力項目を入力して作成してください。
↓作成したストレージアカウントを選択し、コンテナーをクリックします。公式ドキュメントの「2.1 コンテナーを作成する」を参考にしてコンテナを作成します。
↓「アップロード」から、公式ドキュメントの「2.2 カスタムページコンテンツファイルをアップロードする」を参考にして、先ほどダウンロードしたリポジトリのtemplates/AzureBlue/unified.htmlをアップロードします。
unified.htmlを確認すると分かりますが、fontのファイルやpngファイルなどを読み込んでいることがわかります。先ほどダウンロードしたリポジトリのtemplatesのtemplates/src下のファイルをアップロードする必要があるます。
今回はtemplates/src/fontsにあるファイルのアップロードを実際にやっていきます。
その他のファイルは同じ要領で行なっていただければと思います。
↓アップロードをクリックします。
↓ファイルを選択した上で（今回はsegoeui_bold.WOFFとsegoeui.WOFF）、「詳細設定」をクリックし、アップロード先のフォルダにtemplates/src/fontsと入力して「アップロード」をクリックします。すると、コンテナーにフォルダも作られていると思います。このやり方でtemplates/src下の他の他のファイルもアップロードしてください。
次に、CORSの設定をします。この辺りの手順は日本語の公式ドキュメントだと誤った手順になっています（2022年2月時点）。
↓作成したストレージアカウント画面のサイドバーにある「リソースの共有(CORS)」をクリックします。
↓許可されたオリジンには、「https://test.b2clogin.com」の形式で入力します。testの部分には、B2Cテナントの名前を入力してください（歯車マークから確認できる画面の、ドメインの項目にあるXXXX.onmicrosoft.comのXXXXの部分）。
許可されたメソッドには、GETとOPTIONSを選択します。
許可されたヘッダーと公開されるヘッダーには「*」を入力します。
最長有効期間には「200」を入力します。
入力が完了したら、「保存」をクリックします。
「3.1 CORSをテストする」の手順を行いたい場合、許可されたオリジンには「https://www.test-cors.org」を入力し、他の値は上記手順と同じ値を入力して試してください。
最後にユーザーフローを更新して、サインイン画面のレイアウトを先ほどアップロードしたHTMLに変更します。
あらかじめ先ほどコンテナにアップロードしたHTMLのURLをコピーしておいてください。
（コンテナを開いてアップロードしたhtmlファイルをクリックし、URLの項目をコピーします。）
↓B2Cのテナントに移動しユーザーフローを選択した上で、「ページレイアウト」をクリックします。
「統合されたサインアップまたはサインインページ」をクリックし、「カスタムページコンテンツの使用」をはいにします。カスタムページURIにはあらかじめコピーしていたURLをペーストし、「保存」をクリックします。これで、サインイン画面はアップロードしたHTMLが表示されるようになります。
HTMLを更新したいときは、最初にアップロードした時と同じ手順を行なってください。
今回は以上です。
Discussion