メインコンテンツへスキップ
現在、Auth0 の開発は Universal Login に注力されており、Classic Login は今後更新されません。ログインページをカスタマイズするには、Auth0 では Universal Login の高度なカスタマイズ を推奨しています。
Classic Login は、ページのカスタマイズに JavaScript を利用する Auth0 ホスト型のログイン体験です。 では、すべてのログインページに適用される基本的なカスタマイズオプションを設定できます。高度なカスタマイズを行う場合は、1 つ以上のページの HTML テンプレートを直接変更できます。 さらに、任意のバージョン管理システムを使用してページコンテンツを管理することもできます。

​
基本的なカスタマイズ

次のオプションは、Auth0 Dashboard の ブランディング > Universal Login > Settings タブ で設定できます。
  • 会社ロゴ (推奨サイズ: 150 x 150 ピクセル)
  • メインカラー
  • 背景色
デフォルトでは、これらの設定はログイン画面やパスワードリセットページなど、すべての Classic Login ページに適用されます。1 つ以上のページの HTML テンプレートを直接変更し、これらのオプションに関連する属性を編集した場合は、それらの属性が優先され、これらの設定は上書きされます。

​
高度なカスタマイズ

さらにカスタマイズするには、以下のページの HTML テンプレートを直接編集できます。

​
更新に関する責任

特定のページでカスタマイズを有効にすると、そのページの保守はお客様の責任となります。以後、そのページには Auth0 からの自動更新が適用されなくなるためです。これには、組み込まれている Auth0 SDK やウィジェットのバージョン番号の更新も含まれます。 ログインページでは機密性の高いセキュリティ関連情報がやり取りされることが多いため、クロスサイトスクリプティング (XSS) の脆弱性を持ち込むリスクに注意が必要です。さらに、組織で Classic Login とあわせて home realm discovery を使用している場合、利用可能な接続の一覧が Auth0.setClient プロパティに公開された状態になります。こうした点を踏まえ、Auth0 はログインページでサードパーティ製の JavaScript を使用する際は十分に注意することを推奨しています。

​
ページのカスタマイズを有効にする

特定のページでカスタマイズを有効にするには、以下の手順に従います。
  1. Auth0 Dashboard で、ブランディング > Universal Login に移動します。
  2. 次のいずれかのタブを選択します。
    • ログイン
    • パスワードのリセット
    • 多要素認証
  3. タブ上部にある Customize Page トグルを有効にします。
  4. 必要に応じて、手順 2 と 3 を繰り返します。
ページのカスタマイズを有効にすると、トグルの下にあるコードエディターでその HTML テンプレートを編集できます。
ページコードを確認するためにカスタマイズを有効にしたものの、実際にはカスタマイズしない場合は、作業が終わったら Customize Page トグルを必ず無効にしてください。これにより、Auth0 はデフォルトのページを表示できます。

​
Login ページをカスタマイズする

ログインページのテンプレートをカスタマイズするには、まずベースとして使用するテンプレートを選択する必要があります。
  1. Auth0 Dashboard で、ブランディング > Universal Login > Login タブに移動します。
  2. Customize Login Page トグルを有効にします。
  3. HTML コードエディターの上部にある Default Templates メニューからオプションを選択します。
使用可能なテンプレートでは、次のライブラリが使われています。 これらのライブラリは、Classic Login 内で使用することも、アプリケーションに直接埋め込むこともできます。ログインエクスペリエンスをどのようにカスタマイズできるかを詳しく理解するには、使用するライブラリのドキュメントを参照してください。

​
Lock テンプレート

デフォルトのログインページを使用する予定で、変更が最小限で済む場合は、Lock テンプレートを使用してログインページ上の Lock ウィジェットの動作を変更できます。 たとえば、Lock ウィジェットでは次のような設定が可能です。
  • デフォルトでログインページではなくサインアップページにユーザーを誘導する
  • 色、テキスト、デフォルトの言語を変更してログインページをカスタマイズする
  • 1 つ以上の特定のログイン方法のみをユーザーに表示する
Lock ウィジェットのカスタマイズの詳細については、Lock Configuration Optionsを参照してください。

​
Custom Login Form テンプレート

ログインページを大幅に変更する場合は、Custom Login Form テンプレートを参考にできます。このテンプレートでは、Auth0.js SDK を使用して必要な値を取得する方法を示しています。その後、必要に応じてログインページのスタイルやレイアウトを変更できます。Auth0 テナントでは個別の CSS ファイルをホストできないため、CSS のカスタマイズは必ずインラインで行う必要があります。

​
詳細はこちら