> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> クラシックログインのログインページをカスタマイズする方法を説明します。

# クラシックログインページをカスタマイズする

<Warning>
  現在、Auth0 の開発は Universal Login に注力しており、クラシックログインは今後更新されません。ログインページをカスタマイズするには、Auth0 では [Advanced Customizations for Universal Login](/docs/ja-jp/customize/login-pages/advanced-customizations) を推奨しています。
</Warning>

[クラシックログイン](/docs/ja-jp/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience) は、ページのカスタマイズに JavaScript を利用する、Auth0 がホストするログイン体験です。

<Tooltip tip="Auth0 Dashboard: サービスを設定するための Auth0 の主要な製品です。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip> では、すべてのログインページに適用される基本的なカスタマイズオプションを設定できます。さらに高度なカスタマイズが必要な場合は、1 つ以上のページの HTML テンプレートを直接編集できます。

さらに、任意の[バージョン管理システム](/docs/ja-jp/customize/login-pages/classic-login/version-control)を使用してページの内容を管理できます。

<div id="basic-customization">
  ## 基本的なカスタマイズ
</div>

以下のオプションは、Auth0 Dashboard の [Branding > Universal Login > 設定タブ](https://manage.auth0.com/#/login_settings) から設定できます。

* 会社ロゴ (推奨サイズ: 150 x 150 ピクセル)
* プライマリカラー
* 背景色

デフォルトでは、これらの設定はログイン画面やパスワードリセットページなど、すべてのクラシックログインページに適用されます。1 つ以上のページの HTML テンプレートを直接変更し、これらのオプションに関連する属性を編集すると、それらの属性がこれらの設定より優先されます。

<div id="advanced-customization">
  ## 高度なカスタマイズ
</div>

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

* Login (以下を参照)
* [パスワードリセット](/docs/ja-jp/customize/login-pages/classic-login/customize-password-reset-page)
* [多要素認証](/docs/ja-jp/secure/multi-factor-authentication/customize-mfa/customize-mfa-classic-login)

<div id="responsibility-for-updates">
  ### 更新に関する責任
</div>

**特定のページでカスタマイズを有効にすると、そのページの保守はお客様の責任となります**。そのページは以後 Auth0 から自動更新を受けなくなるためです。この保守には、含まれている Auth0 SDK やウィジェットのバージョン番号の更新も含まれます。

ログインページでは、セキュリティに関わる機密情報が扱われることが多いため、クロスサイトスクリプティング (XSS) の脆弱性を持ち込まないよう注意する必要があります。さらに、お使いの organization で [ホームレルムディスカバリー](/docs/ja-jp/get-started/architecture-scenarios/business-to-business/authentication#home-realm-discovery) をクラシックログインと組み合わせて使用している場合、利用可能な接続の一覧が Auth0.setClient プロパティで公開されます。この点を踏まえ、Auth0 はログインページでサードパーティの JavaScript を使用する際には十分注意することを推奨しています。

<div id="enable-page-customization">
  ### ページのカスタマイズを有効にする
</div>

特定のページでカスタマイズを有効にするには、以下の手順に従います。

1. Auth0 Dashboard で、[Branding > Universal Login](https://manage.auth0.com/#/login_settings) に移動します。
2. 次のいずれかのタブを選択します。

   * **Login**
   * **Password Reset**
   * **Multi-Factor Authentication**
3. タブ上部にある **Customize Page** トグルを有効にします。
4. 必要に応じて、手順 2 と 3 を繰り返します。

ページのカスタマイズを有効にすると、トグルの下にあるコードエディターからその HTML テンプレートを変更できます。

<Warning>
  ページコードを確認するためにカスタマイズを有効にしても、実際にはカスタマイズしない場合は、完了したら **Customize Page** トグルを無効にしてください。そうすることで、Auth0 がデフォルトのページをレンダリングできるようになります。
</Warning>

<div id="customize-the-login-page">
  ### ログインページをカスタマイズする
</div>

ログインページのテンプレートをカスタマイズするには、まずベースとして使用するテンプレートを選択する必要があります。

1. Auth0 Dashboard で、[Branding > Universal Login > Login タブ](https://manage.auth0.com/#/login_page) に移動します。
2. **Customize Login Page** トグルを有効にします。
3. HTML コードエディターの上部にある **Default Templates** メニューからオプションを選択します。

使用できるテンプレートでは、次のライブラリを利用します。

* [Lock](/docs/ja-jp/libraries/lock)
* [Lock (Passwordless Mode)](/docs/ja-jp/libraries/lock)
* [Auth0.js](/docs/ja-jp/libraries/auth0js)
* [Authentication API](https://auth0.com/docs/api/authentication)

これらのライブラリは、クラシックログイン内で使用することも、アプリケーションに直接埋め込むこともできます。ログインエクスペリエンスをどのようにカスタマイズできるかをよりよく理解するには、使用したいライブラリのドキュメントを確認してください。

<div id="lock-template">
  #### Lock テンプレート
</div>

既定のログインページを使用し、必要な変更が最小限で済む場合は、Lock テンプレートを使ってログインページ上の Lock ウィジェットの動作を変更できます。

たとえば、Lock ウィジェットでは次のように設定できます。

* 既定でログインページではなくサインアップページにユーザーを誘導する
* ログインページの色、テキスト、既定の言語を変更する
* 特定のログイン方法のみを 1 つ以上ユーザーに表示する

Lock ウィジェットのカスタマイズについて詳しくは、[Lock の設定オプション](/docs/ja-jp/libraries/lock/lock-configuration)を参照してください。

<div id="custom-login-form-template">
  #### Custom Login Form テンプレート
</div>

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

<div id="learn-more">
  ## 詳しく見る
</div>

* [クラシックログインのエクスペリエンス](/docs/ja-jp/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience)
* [Lock または SDK を使用してクラシックログインページをカスタマイズする](/docs/ja-jp/customize/login-pages/classic-login/customize-with-lock-sdk)
* [クラシックログイン向けに MFA をカスタマイズする](/docs/ja-jp/secure/multi-factor-authentication/customize-mfa/customize-mfa-classic-login)