> ## 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.

> アプリケーションのスタイルに合わせて、クラシックログインのパスワードリセットページをカスタマイズします。

# クラシック Password Reset ページをカスタマイズする

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

<Card title="パスワードをリセットする場合">
  このページでは、クラシックログインのパスワードリセットページをカスタマイズする方法について説明します。

  パスワードのリセットに関するサポートが必要な場合は、代わりに次のドキュメントを参照してください。

  * 他のユーザーのパスワードをリセットするテナント管理者の場合: [Change Users' Passwords](/docs/ja-jp/authenticate/database-connections/password-change)
  * 自分のパスワードをリセットする場合: [Reset Auth0 Account Password](/docs/ja-jp/troubleshoot/customer-support/reset-account-passwords)
</Card>

クラシックログインを使用している場合、パスワードリセットページでは、ログインできないユーザーがパスワードを変更できます。パスワードリセットページでは、Auth0 が次のような必要な機能をすべて処理します。

* ページ自体のホスティング
* パスワードをリセットしようとしているユーザーの必要に応じたリダイレクト
* ユーザーのパスワードが定義した要件を満たしていることの確認
* パスワードのリセット後のユーザーの自動リダイレクト

ログインフロー全体で一貫したブランド体験を実現するために、パスワードリセットプロンプトのユーザーへの表示方法をカスタマイズできます。また、必要に応じて特定の個人情報を表示するように、パスワードリセットページを更新することもできます。

<div id="enable-password-reset-page-customization">
  ## パスワードリセットページのカスタマイズを有効にする
</div>

パスワードリセットページは、デフォルトですべての Auth0 ユーザーに対して有効になっており、カスタマイズは不要です。ただし、パスワードリセットページのブランディングやその他の要素を変更したい場合は、[高度なカスタマイズ](/docs/ja-jp/customize/login-pages/classic-login/customization-classic)を有効にできます。

<Tooltip tip="Auth0 Dashboard: サービスを設定するための Auth0 の主要製品。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>から高度なカスタマイズを有効にするには:

1. [Branding > Universal Login > Password Reset tab](https://manage.auth0.com/#/password_reset) に移動します。
2. **Customize Password Reset Page** トグルを有効にします。

これで、トグルの下にあるコードエディターでページテンプレートを直接編集できるようになります。

<div id="edit-password-reset-page">
  ## パスワードリセットページを編集
</div>

パスワードリセットページのカスタマイズを有効にすると、組み込みのコードエディターを使って HTML を編集したり、CSS でページのスタイルを設定したり、カスタム変数を取得して表示するための JavaScript を変更したりできます。更新内容を保存するには、コードエディターの下にある **変更を保存** を選択してください。

<div id="display-custom-information-on-the-password-reset-page">
  ### Password Reset ページにカスタム情報を表示する
</div>

Password Reset ページには、ユーザーごとに異なる情報を表示できます。これを行うには、Password Reset ページエディターで埋め込み JavaScript を編集します：

```js lines expandable theme={null}
new Auth0ChangePassword({
      container:         "change-password-widget-container",     // 必須
      email:             "{{email}}",                            // 変更しないでください
      csrf_token:        '{{csrf_token}}',                       // 変更しないでください
      ticket:            '{{ticket}}',                           // 変更しないでください
      password_policy:   '{{password_policy}}',                  // 変更しないでください
      theme: {
        icon: "{{tenant.picture_url | default: '//cdn.auth0.com/styleguide/1.0.0/img/badge.png'}}",
        primaryColor: "#ea5323"
      },
      dict: {
        // passwordPlaceholder: "your new password",
        // passwordConfirmationPlaceholder: "confirm your new password",
        // passwordConfirmationMatchError: "Please ensure the password and the confirmation are the same.",
        // passwordStrength: {
        //   containsAtLeast: "Contain at least %d of the following %d types of characters:",
        //   identicalChars: "No more than %d identical characters in a row (such as, \"%s\" not allowed)",
        //   nonEmpty: "Non-empty password required",
        //   numbers: "Numbers (such as 0-9)",
        //   lengthAtLeast: "At least %d characters in length",
        //   lowerCase: "Lower case letters (a-z)",
        //   shouldContain: "Should contain:",
        //   specialCharacters: "Special characters (such as !@#$%^&*)",
        //   upperCase: "Upper case letters (A-Z)"
        // },
        // successMessage: "Your password has been reset successfully.",
        // configurationError: "An error occurred. There appears to be a misconfiguration in the form.",
        // networkError: "The server cannot be reached, there is a problem with the network.",
        // timeoutError: "The server cannot be reached, please try again.",
        // serverError: "There was an error processing the password reset.",
        // headerText: "Enter a new password for<br />{email}",
        // title: "Change Password",
        // weakPasswordError: "Password is too weak."
        // passwordHistoryError: "Password has previously been used."
      }
    });
```

たとえば、以下のサンプルテンプレートのスニペットには、変数 `tenant.picture_url` が記載されています。この変数は、[Auth0 Dashboard > 設定](https://manage.auth0.com/#/tenant) で定義した Logo URL の値を返します。

```js lines theme={null}
new Auth0ChangePassword({
      theme: {
        icon: "{{tenant.picture_url | default: '//cdn.auth0.com/styleguide/1.0.0/img/badge.png'}}",
      }
    });
```

Auth0 はその URL からロゴを取得し、パスワードリセット画面に表示します。Auth0 がその URL を参照できない場合は、既定の画像を表示します。

<div id="custom-variables">
  #### カスタム変数
</div>

パスワードリセットページにパーソナライズされた情報を表示するには、次のカスタム変数を使用できます。

| Variable                      | Description                                                                                                                                 |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `email`                       | パスワード変更をリクエストしたユーザーのメールアドレス                                                                                                                 |
| `ticket`                      | 該当するパスワードリセットリクエストを表すチケット                                                                                                                   |
| `csrf_token`                  | CSRF を防ぐために使用されるトークン                                                                                                                        |
| `tenant.name`                 | Auth0 テナントに関連付けられた名前                                                                                                                        |
| `tenant.friendly_name`        | Auth0 テナントに表示される名前                                                                                                                          |
| `tenant.picture_url`          | Auth0 上であなたを表すロゴの URL                                                                                                                       |
| `tenant.support_email`        | Auth0 ユーザーに表示される、貴社のサポート用メールアドレス                                                                                                            |
| `tenant.support_url`          | Auth0 ユーザーに表示される、貴社のサポート用 URL                                                                                                               |
| `lang`                        | ユーザーの言語                                                                                                                                     |
| `password_policy`             | 現在有効な接続のセキュリティポリシーです。内容は `https://manage.auth0.com/#/connections/database/con_YOUR-CONNECTION-ID/security` で確認できます。URL には必ず接続 ID を指定してください。 |
| `password_complexity_options` | パスワードの複雑性要件の設定を含むオブジェクト                                                                                                                     |
| `min_length`                  | 新しく作成するパスワードに必要な最小文字数です。1 文字から 128 文字まで指定できます                                                                                               |

**注:**

* [Auth0 Dashboard > 設定](https://manage.auth0.com/#/tenant) の設定エリアで、テナント変数の値を設定または確認できます。
* アプリケーション ID (`client_id`) に基づいて条件付きでカスタマイズすることはできません。

<div id="custom-error-messages">
  #### カスタムエラーメッセージ
</div>

Custom database スクリプトがカスタムエラーを返した場合は、`dict` プロパティを使ってエラーの説明をマッピングできます。

```js lines theme={null}
new Auth0ChangePassword({
  // ...その他のオプション
  dict: {
    yourCustomError: 'This is a custom error message'
  }
});

function changePassword(email, newPassword, callback) {
  callback(new ValidationError('yourCustomError'));
}
```

<div id="update-password-reset-prompt">
  ## Password Resetプロンプトを更新する
</div>

パスワードリセットページのカスタマイズを有効にしていない場合、スクリプトに必要な更新は Auth0 が行います。これには、含まれているPassword Resetプロンプトのバージョン番号の変更も含まれます。

**パスワードリセットページのカスタマイズを有効にすると**、スクリプトの更新と保守はお客様の責任となります。これには、Password Resetプロンプトのバージョン番号の更新も含まれます。カスタマイズを有効にすると、お客様が加えた変更に影響するおそれがあるため、Auth0 はスクリプトを自動的に更新できません。

現在のPassword Resetプロンプトのバージョンは 1.5.5 です。今後のマイナーバージョン更新を含む最新バージョンを呼び出すには、このリンクを使用してください。

`https://cdn.auth0.com/js/change-password-1.5.min.js`

<div id="revert-changes">
  ## 変更を元に戻す
</div>

パスワードリセットページを以前のデザインに戻すには、次のいずれかの方法で行います。

* **Reset to Last** をクリックして、最後に保存したテンプレートに戻します。
* **Reset to Default** をクリックして、Auth0 が提供するデフォルトテンプレートに戻します。

<div id="learn-more">
  ## 詳しくはこちら
</div>

* [クラシックログインページをカスタマイズ](/docs/ja-jp/customize/login-pages/classic-login/customization-classic)
* [クラシックログイン向けのMFAをカスタマイズ](/docs/ja-jp/secure/multi-factor-authentication/customize-mfa/customize-mfa-classic-login)