はじめに

Auth0のユニバーサルログイン機能を用いることで、ユーザがアプリケーションへログインを行うたびに、Auth0で管理された認証サーバへリダイレクトし、ユーザ認証を行わせることが可能となります。ユニバーサルログインは、埋め込み型ログインと異なり、以下の様な利点があります。
・アプリケーション側でのログイン画面実装が不要
・ソーシャルログインやMFAの追加をAuth0側機能により容易に実現可能
・管理された認証サーバが提供する画面機能を用いるため、アプリケーション側での改修を行うことなくカスタマイズ可能

本ページでは、Auth0のユニバーサルログイン機能で、実施可能な内容・項目についてご紹介します。

前提

本ページ記載の機能及び設定に関する内容は、2023年4月現在の情報となります。

NewとClassicのエクスペリエンスの違い

Auth0のユニバーサルログインにてユーザ認証を行う場合、「New Universal Login」と「Classic Universal Login」の2種類から選択可能です。利用の選択は、Auth0管理画面のBranding > Universal Loginから行います。

・New Universal Login (以下、New版)
新たな画面デザイン及びログインフローとして2019年にリリースされました。
JavaScriptを必要としないため、動作の軽量化が実現されています。また、WebAuthnやEnterprise Connectionへの対応、言語のローカリゼーション等、実現機能面においても向上が図られています。
※ただし、一部の機能はClassic版のみ利用可能であることにご注意ください。

・Classic Universal Login (以下、Classic版)
従来から提供されているユニバーサルログイン機能です。
JavaScriptにてコントロールされており、幅広いカスタマイズオプションが提供されています。

ユニバーサルログインにおけるNew版とClassic版の主な相違点を一覧化しました。相違点の詳細は、以下をご確認ください。
https://auth0.com/docs/authenticate/login/auth0-universal-login/new-universal-login-vs-classic-universal-login

なお、現在及び将来的なユニバーサルログインの開発作業は、New版向けに実施されます。そのため、ここからは、New版をメインとしてユニバーサルログインのカスタマイズをご紹介します。

ノーコーティングでのログイン画面のカスタマイズ

Auth0では、ノーコーティングにて以下項目が設定可能です。非常に多くの設定項目があり、細かい部分までカスタマイズできる点が特徴です。

上記設定は、Auth0の管理画面のBranding > Universal Login > Customize Your Loginで設定できます。

以下は、「Logo」及び「Primary bottom Color」の設定変更例です。
<Logo画像の変更>

< Primary bottom Colorを#635dffから#FF0000へ変更>

カスタマイズの詳細は、以下をご確認ください。
https://auth0.com/docs/customize/universal-login-pages/customize-new-universal-login-with-the-no-code-editor

[補足]
Classic版では、以下のみ設定可能です。
•Company Logo(ロゴ)
•Primary Color(メイン色)
•Page Background Color(ページの背景色)

APIを用いた画面テキスト文言のカスタマイズ

New版では、ログイン、MFA登録、パスワード変更等のページに表示されるテキスト文言の編集方法として、以下の2つが用意されています。

・Auth0管理画面上からの編集
　- 2023年1月9日に機能追加されました。手順の詳細は、以下をご確認ください。
　Customize New Universal Login Text Prompts – Auth0 Docs
・Auth0 Management APIを利用した編集

本ページでは、Auth0 Management APIを利用した編集方法をご紹介します。

使用するAPIのエンドポイント及び必要なパラメータは、以下の通りです。
・エンドポイント: /api/v2/prompts/{prompt}/custom-text/{language}
・メソッド: PUT
・必要なパラメータ
　‐prompt(ログインフロー内の特定のステップ)
　‐language(利用言語)
　‐body(変更対象とテキスト文言を記載)
　　形式(JSON)：{ "SCREEN": { "TEXT_ID": "text message " } }
　　SCREEN：設定するpromptの画面
　　TEXT_ID：SCREEN毎に設定するテキスト変更部分
　　text message：TEXT_IDで指定した箇所に設定するテキスト文言

APIコールに必要な上記パラメータの詳細は、以下をご確認ください。
https://auth0.com/docs/customize/universal-login-pages/customize-login-text-prompts

例として、Auth0 Management APIを用いてログイン画面のタイトルを変更する手順をご紹介します。
(1) Auth0 Management APIのアクセストークンを発行するため、Auth0管理画面のApplications > APIs > Auth0 Management APIをクリック

(2)API Explorerタブへ遷移、[Create & Authorize Test Application]をクリック

(3)発行されたアクセストークンのToken部分をコピー

(4)Auth0 Management API Explorer(https://auth0.com/docs/api/management/v2)を開き、画面左上の[SET API TOKEN]をクリック

(5)API Token欄に(3)にてコピーしたアクセストークンをペーストし、[SET TOKEN]ボタンをクリック

(6)画面左タブに、「DOMAIN」と「API TOKEN」が追加された事を確認

(7)画面下部の「Set custom text for a Specific prompt」部分まで移動

(8)APIコールに必要なパラメータを以下の通り設定し、「TRY」をクリック
※以下のパラメータ指定により、ログイン画面にてデフォルトのタイトル「ようこそ」が「ログイン画面」へと変更されます。
・prompt：login
・language：ja
・body：{"login": {"title":"ログイン画面"}}

(9)APIコール結果が表示されるので、RESPONSE CODEが「200」であることを確認
※200以外が表示された場合は失敗です。エラー内容を参考に対処してください。

(10)変更後のログイン画面を確認するため、Auth0管理画面のAuthentication > Authentication Profileへ遷移し、[Try]ボタンをクリック

(11)ログイン画面のタイトルが「ログイン画面」に変更されたことを確認

また、他の例として、ログイン画面のログインボタン標記を「続ける」から「ログイン」へ変更する際の設定内容を以下に示します。
・body内容
{"login": {"buttonText":"ログイン"}}

・設定画面

・変更前後の画面

[補足①]
curlコマンドにてAPIコールを実行する場合は、以下の通り

実行すべきcurlコマンドは、Auth0 Management API ExplorerにおけるTryボタン横の[get curl command]をクリックすることで取得可能

[補足②]
Classic版では、Auth0管理画面のBranding > Universal Login > Advanced Optionsにて設定でき、「Customize *** Page」部分をONにすることで有効化。New版を利用している場合においても、「Customize *** Page」部分の内容が優先されるので、設定の際は注意が必要

なお、Classic版のログイン画面はAuth0 Lockを用いて実装されています。Auth0 Lockの詳細については、[Auth0 Lockについて]でご紹介しています。

おわりに

Auth0のユニバーサルログイン機能を用いることで、コーティングによる変更を行うことなく、GUI操作で直感的にカスタマイズ可能です。画面のテキスト文言の変更についても、APIを用いて簡単に実装できます。

是非、こちらのユニバーサルログイン機能にて、ログイン画面のカスタマイズを行ってみてください。