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

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

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

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

クラシックログインを使用している場合、パスワードリセットページでは、ログインできないユーザーが、パスワードを変更できます。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."
      }
    });

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が提供するデフォルトのテンプレートに戻します。

もっと詳しく