Skip to main content
現在、Auth0 の開発は Universal Login に注力しており、クラシックログインは今後更新されません。ログインページをカスタマイズするには、Auth0 では Advanced Customizations for Universal Login を推奨しています。
クラシックログイン は、ページのカスタマイズに JavaScript を利用する、Auth0 がホストするログイン体験です。 では、すべてのログインページに適用される基本的なカスタマイズオプションを設定できます。さらに高度なカスタマイズが必要な場合は、1 つ以上のページの HTML テンプレートを直接編集できます。 さらに、任意のバージョン管理システムを使用してページの内容を管理できます。

​
基本的なカスタマイズ

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

​
高度なカスタマイズ

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

​
更新に関する責任

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

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

特定のページでカスタマイズを有効にするには、以下の手順に従います。
  1. Auth0 Dashboard で、Branding > Universal Login に移動します。
  2. 次のいずれかのタブを選択します。
    • Login
    • Password Reset
    • Multi-Factor Authentication
  3. タブ上部にある Customize Page トグルを有効にします。
  4. 必要に応じて、手順 2 と 3 を繰り返します。
ページのカスタマイズを有効にすると、トグルの下にあるコードエディターからその HTML テンプレートを変更できます。
ページコードを確認するためにカスタマイズを有効にしても、実際にはカスタマイズしない場合は、完了したら Customize Page トグルを無効にしてください。そうすることで、Auth0 がデフォルトのページをレンダリングできるようになります。

​
ログインページをカスタマイズする

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

​
Lock テンプレート

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

​
Custom Login Form テンプレート

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

​
詳しく見る