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

# クラシックパスワードリセットページのカスタマイズ

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

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

  パスワードのリセットについてヘルプが必要な場合には、以下のドキュメントをお読みください。

  * テナント管理者が他のユーザーのパスワードをリセットするには：[ユーザーのパスワードを変更する](/docs/ja-jp/authenticate/database-connections/password-change)
  * ユーザーが自分のパスワードをリセットするには：[Auth0アカウントのパスワードをリセットする](/docs/ja-jp/troubleshoot/customer-support/reset-account-passwords)
</Card>

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

* ページ自体のホスト
* 必要に応じてパスワードのリセットを希望するユーザーをリダイレクト
* ユーザーのパスワードが定義した要件を満たしていることの確認
* パスワードリセットの完了後、ユーザーを自動的にリダイレクト

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

## パスワードリセットページのカスタマイズを有効にする

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

<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-jp/glossary?term=auth0-dashboard" tip="Auth0 Dashboard: サービスを構成するためのAuth0の主製品。" cta="用語集の表示">Auth0 Dashboard</Tooltip>を使って詳細カスタマイズを有効にするには以下を行います。

1. [［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］>［Password Reset（パスワードリセット）］タブ](https://manage.auth0.com/#/password_reset)に移動します。
2. **［Customize Password Reset Page（パスワードリセットページをカスタマイズ）］** トグルを有効にします。

トグル下のコードエディターでページテンプレートを直接修正できるようになりました。

## パスワードリセットページを編集する

パスワードリセットページのカスタマイズを有効にしたら、ビルトインコードエディターを使って、HTMLを変更し、CSSでページのスタイルを設定し、カスタム変数の取得・表示に使うJavaScriptを変更することができます。更新内容を保存するには、コードエディターの下にある **［Save Changes（変更を保存）］** を選択してください。

### パスワードリセットページにカスタムの情報を表示する

パスワードリセットページには、パーソナライズした情報を表示できます。それには、パスワードリセットページエディターを使って埋め込まれたJavaScriptを編集します。

```js lines expandable theme={null}
new Auth0ChangePassword({
      container:         "change-password-widget-container",     // required
      email:             "{{email}}",                            // DO NOT CHANGE THIS
      csrf_token:        '{{csrf_token}}',                       // DO NOT CHANGE THIS
      ticket:            '{{ticket}}',                           // DO NOT CHANGE THIS
      password_policy:   '{{password_policy}}',                  // DO NOT CHANGE THIS
      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`が表示されます。この変数は、[［Dashboard］>［Settings（設定）］](https://manage.auth0.com/#/tenant)で定義されたロゴ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を解読できない場合は、デフォルトの画像が表示れます。

#### カスタム変数

次のカスタム変数を使用して、パスワードリセットページに個人情報を表示できます。

| 変数                            | 説明                                                                                                                                             |
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `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文字の範囲で設定可能                                                                                                          |

**注：**

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

#### カスタムエラーメッセージ

カスタムデータベーススクリプトがカスタムエラーを返す場合は、`dict`プロパティを使用してエラーの説明をマップできます。

```js lines theme={null}
new Auth0ChangePassword({
  // ...other options
  dict: {
    yourCustomError: 'This is a custom error message'
  }
});

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

## パスワードリセットプロンプトをアップデートする

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

**パスワードリセットページのカスタマイズを有効にすると** 、スクリプトの更新と保守の責任はユーザーにあります。これには、パスワードリセットプロンプトのバージョンの更新も含まれます。カスタマイズが有効な場合、Auth0がスクリプトを自動更新することはできません。自動更新によって、カスタマイズや変更の内容が干渉される可能性があるためです。

現在のパスワードリセットプロンプトのバージョンは1.5.5です。このリンクを使って、今後のマイナーバージョンの更新を含め、最新バージョンを呼び出します。

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

## 変更を元に戻す

パスワードリセットページを以前のデザインに戻すには、次の操作を行います。

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

## もっと詳しく

* [クラシックログインページのカスタマイズ](/docs/ja-jp/customize/login-pages/classic-login/customization-classic)
* [クラシックログインにおけるMFAのカスタマイズ](/docs/ja-jp/secure/multi-factor-authentication/customize-mfa/customize-mfa-classic-login)
* [エラーメッセージを確認する](/docs/ja-jp/troubleshoot/basic-issues/check-error-messages)
* [セルフパスワード変更のエラー](/docs/ja-jp/troubleshoot/authentication-issues/self-change-password-errors)