クラシックログインページのカスタマイズ
クラシックログインは、ページのカスタマイズのJavaScriptに依存するAuth0ホストのログインエクスペリエンスです。
Auth0ダッシュボードから、すべてのログインページに適用される基本的なカスタマイズオプションを構成できます。詳細カスタマイズを行うには、1つ異常のページのHTMLテンプレートを直接変更できます。
さらに、選択したバージョン管理システムを使用してページコンテンツを管理することもできます。
基本的なカスタマイズ
［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］>［Settings（設定）］タブのAuth0ダッシュボードから次のオプションを構成できます。
会社ロゴ（推奨サイズ：150 x 150画素）
プライマリカラー
Background Color（背景色）
デフォルトでは、これらの設定は、ログイン画面やパスワードリセットページなど、すべてのクラシックログインページに影響します。1つ以上のページのHTMLテンプレートを直接変更し、これらのオプションに関連する属性を編集すると、それらの属性がこれらの設定よりも優先されます。
詳細カスタマイズ
さらにカスタマイズするには、次のページのHTMLテンプレートを直接変更できます。
更新の責任
特定のページのカスタマイズを有効にすると、Auth0からの自動更新を受信しなくなるため、そのページを維持する責任はユーザーにあります。このようなメンテナンスには、含まれるAuth0 SDKまたはウィジェットのバージョン番号の更新が含まれます。
機密性の高いセキュリティ関連情報がログインページを通じて流れることが多いため、クロスサイトスクリプティング(XSS)の脆弱性が導入されることが懸念されます。さらに、組織がクラシックログインと組み合わせてホームレルム検出を使用している場合、利用可能な接続のリストがAuth0.setClientプロパティで公開されます。これを考慮して、Auth0では、ログインページでサードパーティJavaScriptを使用する場合は注意することをお勧めします。
ページカスタマイズを有効にする
特定ページのカスタマイズを有効にするには、次のステップに従います。
Auth0ダッシュボードで、［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］に移動します。
次のタブのうちの1つを選択します。
［Login（ログイン）］
［Password Reset（パスワードリセット）］
［Multi-Factor Authentication（多要素認証）］
タブの上部にある［Customize Page（ページのカスタマイズ）］トグルを有効にします。
必要に応じて、ステップ2と3を繰り返します。
ページのカスタマイズを有効にした後、トグルの下にあるコードエディターを使用してHTMLテンプレートを変更できます。
ページコードを検査するためのカスタマイズを有効にしたにもかかわらず、カスタマイズしないことにした場合は、Auth0がデフォルトのページをレンダリングできるように、終了時には必ず［Customize Page（ページをカスタマイズ）］を無効にしてください。
ログインページのカスタマイズ
ログインページテンプレートをカスタマイズするには、まず作業のベーステンプレートを選択してください。
Auth0ダッシュボードで、［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］>［Login（ログイン）］タブに移動します。
［Customize Login Page（ログインページのカスタマイズ）］トグルを有効にします。
HTMLコードエディターの上にある［Default Templates（デフォルトテンプレート）］メニューからオプションを選択します。
利用可能なテンプレートは次のライブラリを使用します。
これらのライブラリはクラシックログイン内で使用することも、アプリケーションに直接埋め込むこともできます。ログインエクスペリエンスをカスタマイズする方法について詳しく理解するには、希望するライブラリのドキュメントを確認してください。
ロックテンプレート
デフォルトのログインページを使用する予定で、最小限の変更のみが必要な場合は、ロックテンプレートを使用して、ログインページのロックウィジェットの動作を変更できます。
たとえば、ロックウィジェットを次のように構成できます。
デフォルトでは、ユーザーをログインページではなくサインアップページに誘導する。
ログインページをさまざまな色、テキスト、またはデフォルトの言語でカスタマイズする。
ユーザーに1つ以上の特定のログイン方法のみを提示する。
ロックウィジェットのカスタマイズの詳細については、「ロック構成オプション」を確認してください。
カスタムログインフォームテンプレート
ログインページを大幅に変更する場合は、カスタムログインフォームテンプレートをガイドとして使用できます。このテンプレートは、Auth0.js SDKを使用して必要な値を取得する方法を示します。その後、必要に応じてログインページのスタイルとレイアウトを変更できます。Auth0テナントで個別のCSSファイルをホストすることはできないため、CSSのカスタマイズはすべてインラインで行わなければなりません。