Classic パスワードリセットページをカスタマイズする

Classic Login のパスワードリセットページをカスタマイズする方法を説明します。

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

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

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

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

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

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

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

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

​

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

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

Auth0 Dashboardから高度なカスタマイズを有効にするには、次の手順に従います。

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

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

​

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

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

​

パスワードリセットページにカスタム情報を表示する

パスワードリセットページには、ユーザーごとにカスタマイズした情報を表示できます。これを行うには、パスワードリセットページエディターで埋め込み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 が含まれています。この変数は、Dashboard > Settings で定義した Logo 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 の Settings エリアで設定および確認できます。
• アプリケーション ID (client_id) に基づいて条件付きでカスタマイズすることはできません。

​

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

カスタムデータベーススクリプトがカスタムエラーを返す場合は、dict プロパティを使用してエラーの説明を対応付けることができます。

new Auth0ChangePassword({
  // ...その他のオプション
  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 が提供するデフォルトテンプレートに戻します。

​

詳細情報

• Classic Login ページをカスタマイズする
• Classic Login 用の MFA をカスタマイズする