クラシック Password Reset ページをカスタマイズする

アプリケーションのスタイルに合わせて、クラシックログインのパスワードリセットページをカスタマイズします。

現在、Auth0 の開発は Universal Login に注力しており、クラシックログインは今後更新されません。ログインページをカスタマイズする場合は、Auth0 は Advanced Customizations for Universal Login を推奨しています。

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

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

パスワードのリセットに関するサポートが必要な場合は、代わりに次のドキュメントを参照してください。

• 他のユーザーのパスワードをリセットするテナント管理者の場合: Change Users’ Passwords
• 自分のパスワードをリセットする場合: Reset Auth0 Account Password

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

• ページ自体のホスティング
• パスワードをリセットしようとしているユーザーの必要に応じたリダイレクト
• ユーザーのパスワードが定義した要件を満たしていることの確認
• パスワードのリセット後のユーザーの自動リダイレクト

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

​

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

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

Auth0 Dashboardから高度なカスタマイズを有効にするには:

1. Branding > Universal Login > Password Reset tab に移動します。
2. Customize Password Reset Page トグルを有効にします。

これで、トグルの下にあるコードエディターでページテンプレートを直接編集できるようになります。

​

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

パスワードリセットページのカスタマイズを有効にすると、組み込みのコードエディターを使って HTML を編集したり、CSS でページのスタイルを設定したり、カスタム変数を取得して表示するための JavaScript を変更したりできます。更新内容を保存するには、コードエディターの下にある 変更を保存 を選択してください。

​

Password Reset ページにカスタム情報を表示する

Password Reset ページには、ユーザーごとに異なる情報を表示できます。これを行うには、Password Reset ページエディターで埋め込み JavaScript を編集します：

new Auth0ChangePassword({
      container:         "change-password-widget-container",     // 必須
      email:             "{{email}}",                            // 変更しないでください
      csrf_token:        '{{csrf_token}}',                       // 変更しないでください
      ticket:            '{{ticket}}',                           // 変更しないでください
      password_policy:   '{{password_policy}}',                  // 変更しないでください
      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 が記載されています。この変数は、Auth0 Dashboard > 設定 で定義した Logo URL の値を返します。

new Auth0ChangePassword({
      theme: {
        icon: "{{tenant.picture_url | default: '//cdn.auth0.com/styleguide/1.0.0/img/badge.png'}}",
      }
    });

Auth0 はその URL からロゴを取得し、パスワードリセット画面に表示します。Auth0 がその URL を参照できない場合は、既定の画像を表示します。

​

カスタム変数

パスワードリセットページにパーソナライズされた情報を表示するには、次のカスタム変数を使用できます。

Variable	Description
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 文字まで指定できます

注:

• Auth0 Dashboard > 設定 の設定エリアで、テナント変数の値を設定または確認できます。
• アプリケーション ID (client_id) に基づいて条件付きでカスタマイズすることはできません。

​

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

Custom database スクリプトがカスタムエラーを返した場合は、dict プロパティを使ってエラーの説明をマッピングできます。

new Auth0ChangePassword({
  // ...その他のオプション
  dict: {
    yourCustomError: 'This is a custom error message'
  }
});

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

​

Password Resetプロンプトを更新する

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

パスワードリセットページのカスタマイズを有効にすると、スクリプトの更新と保守はお客様の責任となります。これには、Password Resetプロンプトのバージョン番号の更新も含まれます。カスタマイズを有効にすると、お客様が加えた変更に影響するおそれがあるため、Auth0 はスクリプトを自動的に更新できません。

現在のPassword Resetプロンプトのバージョンは 1.5.5 です。今後のマイナーバージョン更新を含む最新バージョンを呼び出すには、このリンクを使用してください。

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

​

変更を元に戻す

パスワードリセットページを以前のデザインに戻すには、次のいずれかの方法で行います。

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

​

詳しくはこちら

• クラシックログインページをカスタマイズ
• クラシックログイン向けのMFAをカスタマイズ