はじめに
Auth0のUniversal LoginにはClassicとNewの二つがありますがどちらもデフォルトだと英語が表示されます。
Classicの場合
Newの場合
今回はこれら二つのログイン画面の表記を日本語にしてみました。
Classicの場合
Universal LoginのCustomize Login PageをONにします。
すると、画面下部にhtmlを編集する画面が表示されるので、変数のlanguageに'ja'を設定します。
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script>
// Decode utf8 characters properly
var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
config.extraParams = config.extraParams || {};
var connection = config.connection;
var prompt = config.prompt;
var languageDictionary;
var language = 'ja'; // 日本語化
if (config.dict && config.dict.signin && config.dict.signin.title) {
languageDictionary = { title: config.dict.signin.title };
} else if (typeof config.dict === 'string') {
language = config.dict;
}
var loginHint = config.extraParams.login_hint;
var colors = config.colors || {};
...
</script>
</body>
</html>
これでClassic Universal Loginの画面が日本語化されます。
Newの場合
まず、Auth0の管理画面の右上に表示されている自分自身のアイコンをクリックしてテナントの設定画面を開きます。
テナント設定のGeneralタブの下のほうにあるLanguages設定内のSupported LanguagesにあるJapanese(ja)にチェックを入れます。
ここでJapanese(ja)にチェックを入れておけば、パラメータ（クエリパラメータまたはリクエストヘッダ）を渡すとNew Universal Loginが日本語で表示されます。
パラメータの優先順は以下のようになっています。
-
/authorizeにアクセスする時のクエリパラメータにui_localesを設定(例：ui_locales=ja) - ブラウザが設定する
Accept-Languageリクエストヘッダの設定
これら二つのパラメータの値が、上記Supported Languagesでチェックを入れたものの中に含まれていれば該当した言語でログイン画面が表示されるという仕組みのようです。
逆にパラメータの値がSupported Languagesの対象の中から見つからなかった場合はDefault Languageで設定されている言語が表示されます。
念のため、日本語でログイン画面を表示したい場合は以下のようにDefault LanguageもJapanese(ja)に設定しておくことをお勧めします。
無事日本語化されると以下のように表示されます。
おわりに
Auth0を利用するにあたって一番はじめに設定するような基本的なことではありますが
こういう点もちゃんと対応しておきたいですね。