New Universal Login使用時にログイン画面などのテキストを変更したい(Auth0)

2020.09.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Auth0のユニバーサルログインのテキスト文言を変更したいという要望があり、自分で調べて簡単にできることがわかったので記録に残します。

Prompt APIがmanagement apiに用意されており、これを使うことで簡単にカスタマイズ可能となります。

path: /api/v2/prompts/{prompt}/custom-text/{language}

method: PUT

実行に必要なScope: update:prompts

必要なパラメータとして

  • prompt
    • ログインフローの特定のステップを指すためのもの
    • login, login-email-verification, signup, reset-password, consent, mfa-push, mfa-otp, mfa-voice, mfa-phone, mfa-sms, mfa-email, mfa-recovery-code, mfa, status, device-flow, email-verification, organizations, common
  • language
    • 利用可能な言語
    • cs, da, de, en, es, fi, fr-FR, fr-CA, hi, hu, it, ja, ko, nb, nl, po, pt-BR, pt-PT, ro, ru, sk, sv, zh-CN, zh-TW
  • body
    • 画面グループのカスタム辞書を含むオブジェクト(json形式)
    • { "SCREEN": { "TEXT_ID": "text1 in language" }

bodyの SCREEN, TEXT_IDはpromptによって変わります。

現在、SCREENの内容がドキュメント化されているpromptは、

上記13個で、login-email-verification, mfa-voice, mfa-phone, status, organizationsのページは存在していませんでした。この件に関してはドキュメントのフィードバックを上げておきます。

では、ログイン画面を例にして試してみます。

デフォルトの状態:

赤枠の部分を変更したいとします。

{ "SCREEN": { "TEXT_ID": "text1 in language" } の形式でbodyパラメーターを与えますが、

TEXT_IDに関してはドキュメントを見ないとどのkeyを使うべきなのかはわからないようです(Prompt APIにはキーの一覧を取得するメソッドがない)。

今回は、prompt:loginのtext, description, buttonText, forgotPasswordText を変更するのでbodyは

{
  "login": {
    "title":"ログイン画面",
    "description":"ログインするにはメールアドレスとパスワードを入力してください",
    "buttonText":"ログイン",
    "forgotPasswordText":"パスワードを忘れた方はここをクリック"
  }
}

になります。

curlで実行するときのコマンドは、

curl -H "Authorization: Bearer {YOUR_ACCESS_TOKEN}" \
-X PUT \
-H "Content-Type: application/json" \
-d '{"login":{"title":"ログイン画面","description":"ログインするにはメールアドレスとパスワードを入力してください","buttonText":"ログイン","forgotPasswordText":"パスワードを忘れた方はここをクリック"}}' \
https://classmethod-partner-jp.auth0.com/api/v2/prompts/login/custom-text/ja

です。

{YOUR_ACCESS_TOKEN}は自身で取得したものに置き換えます.

Auth0のAPIエクスプローラーで実行する時は、以下の画像のようにpromptとlanguageを選択し、bodyに上記の値を入力して実行します。

結果もUIで確認できます。

キーが間違っているなどのエラーになった時も教えてくれます。

変更後のログイン画面:

この機能を使うことによってブランドイメージやニーズに合わせた文言に変更できるので良いなと思った次第です。 多言語化しているアプリケーションでも、コードを変更せずに簡単に文言を変更できますね。

※ ちなみに、文章をHTML上で改行する事はできませんでした

参考