【Auth0】ログイン画面を日本語化する

6768 ワード
ログイン画面 日本語化 Auth0 日本語化 テキストリンク

はじめに

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が日本語で表示されます。

パラメータの優先順は以下のようになっています。

  1. /authorizeにアクセスする時のクエリパラメータにui_localesを設定(例：ui_locales=ja)
  2. ブラウザが設定するAccept-Languageリクエストヘッダの設定

これら二つのパラメータの値が、上記Supported Languagesでチェックを入れたものの中に含まれていれば該当した言語でログイン画面が表示されるという仕組みのようです。

逆にパラメータの値がSupported Languagesの対象の中から見つからなかった場合はDefault Languageで設定されている言語が表示されます。
念のため、日本語でログイン画面を表示したい場合は以下のようにDefault LanguageもJapanese(ja)に設定しておくことをお勧めします。

無事日本語化されると以下のように表示されます。

おわりに

Auth0を利用するにあたって一番はじめに設定するような基本的なことではありますが
こういう点もちゃんと対応しておきたいですね。