Auth0 新機能: ユニバーサルログイン画面のテキストをカスタマイズするAPI – 日本語のテキストを変更する

ユニバーサルログイン画面の文言を変更するための新しいAPIがリリースされました。

皆さまからご要望が多かった、Universal Login Text Customization APIをリリースしました！このAPIを使うことによって、ユニバーサルログインフロー中にレンダリングされたテキストを、エラーメッセージも含めて任意のものにオーバーライドできます！ぜひお試しを！?https://t.co/WAOZpb6DVO

— Auth0 Japan (@auth0_jp) December 5, 2019

APIドキュメントはこちら。

• Text Customization for the New Universal Login Experience

早速試します。せっかくなので、日本語のユニバーサル画面に対して、日本語をカスタマイズしてみます。

手順

• Tenant Settings で言語を日本語にする
• ユニバーサルログインで新しいほうを選択する
• JavaScriptのサンプルアプリケーションを準備して起動する
• Auth0 Management API のアクセストークンを発行する
• APIをコールしてテキストをカスタマイズする

Tenant Settings でデフォルト言語を日本語にする

テナントは作成されている前提で進めます。ユニバーサルログインで表示される言語を、日本語にしたいと思いました。国際化のマニュアルによると、

The language to render the pages will be selected based on:

• The list of languages configured in Tenant Settings, where you can select the languages your tenant supports and select a default one. By default, the list has only English, so if you want to support other languages you first need to update the list.
• The value of the ui_locales parameter sent to the authorization request endpoint, which can be used to constrain the language list for an application or session.
• The Accept-Language HTTP header sent by the browser. The pages will be rendered in this language if it is allowed by the settings above. If not, pages will be rendered in the default language.

とありました。テナント設定のデフォルト言語を日本語にすればよさそうです。次のキャプチャに従って設定してください。

これでデフォルト言語の設定は完了です。

ユニバーサルログインの画面で新しいエクスペリエンスに変更する

テキストのカスタマイズ結果は新しいユニバーサルログインのUIに反映されるようです。次の手順に従い、新しい画面に変更しておきます。

サンプルアプリケーションの準備

ダウンロード

ログイン機能を試すためのサンプルアプリケーションを用意しましょう。アプリケーションを作成して、そこからクイックスタートキットをダウンロードするのが一番早いです。左メニューから Applications を選択して、新しいアプリケーションを作成します。その後 Quick Start タブを開いて、Donwload Sample としてください。

起動

サンプルアプリケーションは 01-login というディレクトリに保存されているので、ダウンロードしたディレクトリに移動し、以下のコマンドで起動します。

> cd 01-login
> npm install
> npm start

ブラウザで http://localhost:3000 にアクセスして、ログイン画面が開けることを確認します。

さきほど、Auth0 にログインした状態でサンプルアプリケーションをダウンロードしました。こうすることで、ログイン画面を表示するために必要な各種クライアントIDの設定などを、あらかじめサンプルアプリケーションに埋め込んだ状態にしてくれます。手早く試せてありがたいですね。

Management API のアクセストークンをテスト用に発行する

カスタマイズなしのログイン画面を開くことができたので、早速APIをコールしたいと思います。そのためには、Auth0 Management API のアクセストークンが必要です。Auth0 管理画面より APIs へ遷移し、以下の手順に従います。Auth0 Management API はテナントを作成した時点で自動的につくられるため、改めて API を作る必要はありません。

API Explorer タブを開き、CREATE & AUTHRIZE TEST APPLICATION とします。

トークンが作成されるのでコピーします。

APIをコールしてテキストをカスタマイズする

準備が整いました。コールしましょう。

curl --request PUT \
--url 'https://your-tenant-name.auth0.com/api/v2/prompts/login/custom-text/ja' \
--header 'authorization: Bearer '<TOKEN>' \
      --header 'content-type: application/json' \
      --data '{ "login": { "description": "和田のサイトへログインします" } }'

• your-tenant-name を自身のテナントの名前に置き換えます。
• 日本語のテキストをカスタマイズするので末尾のパスを ja とします。
• <TOKEN> の部分をさきほど発行したものに置き換えてください。
• 今回はログイン画面の説明部分を変更してみます。

その後、再度 http://localhost:3000 のログインを開きます。

赤枠部分が変更されていました。成功です。

注意点

ドキュメントに明記されていますが、いくつか注意点があります。

文言を変更するときは、すべてのカスタマイズ内容を一つのリクエストに含める

つまり、タイトルと説明が変更されている状態で、説明部分だけをさらに修正したいと思ったとき、リクエストボディは

{ "login": { "description": "説明を修正" } }

ではなく

{ "login": { "title": "${companyName}へようこそ", "description": "説明を修正" } }

のように、すでにカスタマイズされている箇所も含め、すべての内容を含める必要があります。未指定の設定は消去されデフォルトに戻る　という点に注意してください。

カスタマイズのためにいくつか変数が使えるが、デフォルト文言で表示されているもの以外は保証しない

例えば ${email} という変数は、メールアドレス入力後の MFA 入力画面では利用できそうですが、メールアドレス/パスワードを入力するだけのログイン画面ではおそらく使えないでしょう。このように各画面で利用可能な変数は流動的で、デフォルト文言で実績があるものを使うのが確実です。

まとめ

新しいカスタムテキストAPIを使うことで、ユニバーサルログインの日本語をカスタマイズできました。入力フォームのプレースホルダーまで設定できるとのことで、ほとんどの項目をカバーしてくれているありがたい機能です。また、見ていただいたように多言語対応も同じようなインターフェイスで設定できるので、戸惑うこともありません。またひとつ、ユニバーサルログインの機能が充実しましたね。