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

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

パスワードをリセットする

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

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

• テナント管理者が他のユーザーのパスワードをリセットするには：ユーザーのパスワードを変更する
• ユーザーが自分のパスワードをリセットするには：Auth0アカウントのパスワードをリセットする

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

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

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

​

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

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

Auth0 Dashboardを使って詳細カスタマイズを有効にするには以下を行います。

1. ［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］>［Password Reset（パスワードリセット）］タブに移動します。
2. ［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."
      }
    });

たとえば、下のサンプルテンプレートのスニペットには、変数tenant.picture_urlが表示されます。この変数は、［Dashboard］>［Settings（設定）］で定義されたロゴURL値を返します。

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（設定）］の設定エリアで設定/チェックできます。
• アプリケーション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'));
}

​

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

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

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

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

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

​

変更を元に戻す

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

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

​

もっと詳しく

• クラシックログインページのカスタマイズ
• クラシックログインにおけるMFAのカスタマイズ
• エラーメッセージを確認する
• セルフパスワード変更のエラー