> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.
# クラシックパスワードリセットページのカスタマイズ
> クラシックログインパスワードのリセットページをカスタマイズする方法を説明します。
このページでは、クラシックログインのパスワードリセットページをカスタマイズする方法について説明します。
パスワードのリセットについてヘルプが必要な場合には、以下のドキュメントをお読みください。
* テナント管理者が他のユーザーのパスワードをリセットするには：[ユーザーのパスワードを変更する](/docs/ja-JP/ja-jp/authenticate/database-connections/password-change)
* ユーザーが自分のパスワードをリセットするには：[Auth0アカウントのパスワードをリセットする](/docs/ja-JP/ja-jp/troubleshoot/customer-support/reset-account-passwords)
クラシックログインを使用している場合、パスワードリセットページでは、ログインできないユーザーが、パスワードを変更できます。Auth0は、このページで、次のようなパスワードのリセットに必要な機能を実現します。
* ページ自体のホスト
* 必要に応じてパスワードのリセットを希望するユーザーをリダイレクト
* ユーザーのパスワードが定義した要件を満たしていることの確認
* パスワードリセットの完了後、ユーザーを自動的にリダイレクト
ログインフロー全体で一貫したブランドエクスペリエンスを作成するには、パスワードリセットプロンプトのユーザーへの表示方法をカスタマイズできます。必要に応じて、パスワードリセットページを更新して特定の個人情報を表示することもできます。
## パスワードリセットページのカスタマイズを有効にする
パスワードリセットページは、デフォルトですべてのAuth0ユーザーに対して有効になっており、カスタマイズは不要です。ただし、パスワードリセットページのブランディングやその他の要素を更新する場合は、[詳細カスタマイズ](/docs/ja-JP/ja-jp/customize/login-pages/classic-login/customization-classic)を有効にすることができます。
Auth0 Dashboardを使って詳細カスタマイズを有効にするには以下を行います。
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
{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/ja-jp/customize/login-pages/classic-login/customization-classic)
* [クラシックログインにおけるMFAのカスタマイズ](/docs/ja-JP/ja-jp/secure/multi-factor-authentication/customize-mfa/customize-mfa-classic-login)
* [エラーメッセージを確認する](/docs/ja-JP/ja-jp/troubleshoot/basic-issues/check-error-messages)
* [セルフパスワード変更のエラー](/docs/ja-JP/ja-jp/troubleshoot/authentication-issues/self-change-password-errors)