クラシックパスワードリセットページのカスタマイズ
パスワードをリセットする
このページでは、クラシックログインのパスワードリセットページをカスタマイズする方法について説明します。
パスワードのリセットについてヘルプが必要な場合には、以下のドキュメントをお読みください。
テナント管理者が他のユーザーのパスワードをリセットするには:ユーザーのパスワードを変更する
ユーザーが自分のパスワードをリセットするには:Auth0アカウントのパスワードをリセットする
クラシックログインを使用している場合、パスワードリセットページでは、ログインできないユーザーが、パスワードを変更できます。Auth0は、このページで、次のようなパスワードのリセットに必要な機能を実現します。
ページ自体のホスト
必要に応じてパスワードのリセットを希望するユーザーをリダイレクト
ユーザーのパスワードが定義した要件を満たしていることの確認
パスワードリセットの完了後、ユーザーを自動的にリダイレクト
ログインフロー全体で一貫したブランドエクスペリエンスを作成するには、パスワードリセットプロンプトのユーザーへの表示方法をカスタマイズできます。必要に応じて、パスワードリセットページを更新して特定の個人情報を表示することもできます。
パスワードリセットページのカスタマイズを有効にする
パスワードリセットページは、デフォルトですべてのAuth0ユーザーに対して有効になっており、カスタマイズは不要です。ただし、パスワードリセットページのブランディングやその他の要素を更新する場合は、詳細カスタマイズを有効にすることができます。
Auth0 Dashboardを使って詳細カスタマイズを有効にするには以下を行います。
[Branding(ブランディング)]>[Universal Login(ユニバーサルログイン)]>[Password Reset(パスワードリセット)]タブに移動します。
[Customize Password Reset Page(パスワードリセットページをカスタマイズ)]トグルを有効にします。
トグル下のコードエディターでページテンプレートを直接修正できるようになりました。
パスワードリセットページを編集する
パスワードリセットページのカスタマイズを有効にしたら、ビルトインコードエディターを使って、HTMLを変更し、CSSでページのスタイルを設定し、カスタム変数の取得・表示に使うJavaScriptを変更することができます。更新内容を保存するには、コードエディターの下にある[Save Changes(変更を保存)]を選択してください。
パスワードリセットページにカスタムの情報を表示する
パスワードリセットページには、パーソナライズした情報を表示できます。それには、パスワードリセットページエディターを使って埋め込まれたJavaScriptを編集します。
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."
}
});
Was this helpful?
たとえば、下のサンプルテンプレートのスニペットには、変数tenant.picture_url
が表示されます。この変数は、[Dashboard]>[Settings(設定)]で定義されたロゴURL値を返します。
new Auth0ChangePassword({
theme: {
icon: "{{tenant.picture_url | default: '//cdn.auth0.com/styleguide/1.0.0/img/badge.png'}}",
}
});
Was this helpful?
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(設定)]の設定エリアで設定/チェックできます。
アプリケーションID(
client_id
)に基づいてカスタマイズを条件付きにすることはできません。
カスタムエラーメッセージ
カスタムデータベーススクリプトがカスタムエラーを返す場合は、dict
プロパティを使用してエラーの説明をマップできます。
new Auth0ChangePassword({
// ...other options
dict: {
yourCustomError: 'This is a custom error message'
}
});
function changePassword(email, newPassword, callback) {
callback(new ValidationError('yourCustomError'));
}
Was this helpful?
パスワードリセットプロンプトをアップデートする
パスワードリセットページのカスタマイズを有効にしない場合は、Auth0が、含まれるパスワードリセットプロンプトのバージョン番号の変更など、スクリプトに必要な更新を処理します。
パスワードリセットページのカスタマイズを有効にすると、スクリプトの更新と保守の責任はユーザーにあります。これには、パスワードリセットプロンプトのバージョンの更新も含まれます。カスタマイズが有効な場合、Auth0がスクリプトを自動更新することはできません。自動更新によって、カスタマイズや変更の内容が干渉される可能性があるためです。
現在のパスワードリセットプロンプトのバージョンは1.5.5です。このリンクを使って、今後のマイナーバージョンの更新を含め、最新バージョンを呼び出します。
https://cdn.auth0.com/js/change-password-1.5.min.js
変更を元に戻す
パスワードリセットページを以前のデザインに戻すには、次の操作を行います。
[Reset to Last(最後にリセット)]をクリックすると、最後に保存したテンプレートに戻ります。
[Reset to Default(デフォルトにリセット)]をクリックして、Auth0が提供するデフォルトのテンプレートに戻します。