はじめに
Azure Active Directory B2C(以下 B2C)には以下の二通りのフローが存在します。
- ユーザーフロー
- カスタムポリシー
今回、取り上げるのはカスタムポリシーを使用した際の日本語化手順になります。
カスタムポリシー自体xmlで記載するということもあり、（個人的に）難解なのでここにまとめます。
前準備
本記事では以下のMicrosoft公式ドキュメントの設定を終えたところから始めます。
各々すでにカスタムポリシーを準備済みの方は飛ばしてください。
チュートリアル:Azure Active Directory B2C に Web アプリケーションを登録する
チュートリアル: Azure Active Directory B2C でユーザー フローとカスタム ポリシーを作成する
日本語化設定
大まかな手順は3つです。
- localizationタグを設定し大部分を日本語化する。
- 手順1で日本語化されなかった部分（主にリテラルなど）を手作業で日本語に書き換える。
- B2Cバックエンドと通信している部分を日本語化する。
手順1 localizationタグを設定し大部分を日本語化する。
基本は以下の通り進めます。
Azure Active Directory B2C での言語のカスタマイズ
今回は上記ドキュメントとは異なりTrustFrameworkBase.xmlファイルを編集していきます。
BuildingBlocks要素に以下の内容を追加し、ポリシーをビルド後、アップロードします。
...省略...
<Localization Enabled="true">
<SupportedLanguages DefaultLanguage="ja" MergeBehavior="ReplaceAll">
<SupportedLanguage>ja</SupportedLanguage>
</SupportedLanguages>
</Localization>
...省略...
そうすると以下のようにある程度日本語になっているはずです。
これで手順1はおしまいです。
手順2 手順1で日本語化されなかった部分（主にリテラルなど）を手作業で日本語に書き換える。
手順2でもTrustFrameworkBase.xmlファイルを編集していきます。
至るところに以下のようなコードがあると思います。
このDisplayNameの部分の日本語に書き換えていきます。
（UserHelpTextはマウスオーバーしたときに出てくるメッセージです。必要に応じて変更しましょう。）
変更前
...省略...
<ClaimType Id="signInName">
<DisplayName>Sign in name</DisplayName>
<DataType>string</DataType>
<UserHelpText/>
<UserInputType>TextBox</UserInputType>
</ClaimType>
...省略...
変更後
...省略...
<ClaimType Id="signInName">
<DisplayName>メールアドレス</DisplayName>
<DataType>string</DataType>
<UserHelpText/>
<UserInputType>TextBox</UserInputType>
</ClaimType>
...省略...
するとおおよそ以下のようになると思います。
基本的に変更したい文字列をxmlファイル内で検索かけるとそれっぽいところがあるのでそこを書き換えます
これで手順2もおしまいです。
補足
これはサインアップ画面ですが登録ボタンがCreateのままです。
これも以下のように変更して日本語に変更してしまいます。
変更前
...省略...
<Metadata>
<Item Key="IpAddressClaimReferenceId">IpAddress</Item>
<Item Key="ContentDefinitionReferenceId">api.localaccountsignup</Item>
<Item Key="language.button_continue">Create</Item>
</Metadata>
...省略...
変更後
...省略...
<Metadata>
<Item Key="IpAddressClaimReferenceId">IpAddress</Item>
<Item Key="ContentDefinitionReferenceId">api.localaccountsignup</Item>
<Item Key="language.button_continue">登録</Item>
</Metadata>
...省略...
手順3 B2Cバックエンドと通信している部分を日本語化する。
下の画像はサインアップ後、誤ったパスワードを入力してサインインボタンを押したときの画面です。
手順3は画像にもある通り、下記エラーメッセージの修正になります。
The username or password provided in the request are invalid.
以下の部分を修正します。
...省略...
<Item Key="ProviderName">https://sts.windows.net/</Item>
<Item Key="METADATA">https://login.microsoftonline.com/{tenant}/.well-known/openid-configuration</Item>
<Item Key="authorization_endpoint">https://login.microsoftonline.com/{tenant}/oauth2/token</Item>
<Item Key="response_types">id_token</Item>
<Item Key="response_mode">query</Item>
<Item Key="scope">email openid</Item>
- <Item Key="grant_type">password</Item>
...省略...
ハイライトした行を消します。
こうすることでエラーメッセージが変化し、手順2の対応をすることで日本語化することができます。
これにてB2Cカスタムポリシー完全日本語化終了となります。
さいごに
ユーザーフローはAzure PortalのUIからポチポチ変更していけますがカスタムポリシーは一筋縄ではいかず苦戦しました。
特に手順3が鬼門でした。
B2Cのカスタムポリシーの情報が少ないということ、日本語にローカライズするユーザーが少ないこと、
この2点に苦しめられました。
もっと簡単な実装方法・アドバイス等ありましたらコメントいただけますと幸いです。
また今回の記事に使用したxmlファイルはGitHubに置いておきますのでもし参考にされる方がいらっしゃれば…
GitHub_qiita_b2c_custom_policy