Personnaliser la page de réinitialisation classique du mot de passe

Si vous utilisez la connexion classique, la page de réinitialisation du mot de passe permet à vos utilisateurs de modifier leur mot de passe s’ils ne peuvent pas se connecter. Dans la page de réinitialisation de mot de passe, Auth0 gère toutes les fonctionnalités requises, et notamment :

• l’hébergement de la page elle-même;

• la redirection de l’utilisateur souhaitant réinitialiser son mot de passe si nécessaire;

• la conformité du mot de passe de l’utilisateur aux exigences que vous avez définies,

• la redirection automatique de l’utilisateur après la réinitialisation de son mot de passe.

Pour créer une expérience de marque cohérente tout au long du flux de connexion, vous pouvez personnaliser la façon dont l’invite de réinitialisation du mot de passe s’affiche pour les utilisateurs. Vous pouvez également mettre à jour la page de réinitialisation du mot de passe afin d’afficher certaines informations personnelles, le cas échéant.

La page de réinitialisation du mot de passe est activée par défaut pour tous les utilisateurs Auth0 et ne nécessite pas de personnalisation. Cependant, vous pouvez activer la personnalisation avancée si vous souhaitez mettre à jour l’image de marque et d’autres éléments de la page de réinitialisation du mot de passe.

Pour activer la personnalisation avancée à partir d’Auth0 Dashboard :

1. Allez à Branding (Image de marque) > Universal Login (Connexion universelle) > onglet Password Reset (Réinitialisation du mot de passe).

2. Activez l’option Customize Password Reset Page (Personnaliser la page de réinitialisation du mot de passe) .

Dans l’éditeur de code situé sous l’option, vous pouvez maintenant modifier directement le modèle de page.

Après avoir activé la personnalisation de la page de réinitialisation du mot de passe, vous pouvez utiliser l’éditeur de code intégré pour modifier son HTML, styliser la page à l’aide de CSS et changer le code JavaScript utilisé pour récupérer et afficher les variables personnalisées. Veillez à sélectionner Save Changes (Enregistrer les modifications) sous l’éditeur de code pour enregistrer vos mises à jour.

Vous pouvez afficher des informations personnalisées sur la page de réinitialisation du mot de passe. Pour ce faire, modifiez le code JavaScript intégré à l’aide de l’éditeur de page de réinitialisation de mot de passe :

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."
      }
    });

Par exemple, l’extrait de modèle ci-dessous montre la variable tenant.picture_url. Cette variable renvoie la valeur de l’URL du logo définie dans Dashboard > Settings (Paramètres).

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

Auth0 récupère le logo fourni par l’URL et l’affiche à l’invite de réinitialisation du mot de passe. Si Auth0 ne peut pas résoudre l’URL, il affichera l’image par défaut.

Vous pouvez utiliser les variables personnalisées suivantes pour afficher des informations personnalisées sur la page de réinitialisation du mot de passe :

Remarque :

• Vous pouvez définir/vérifier les valeurs de vos variables locataires dans Dashboard > Settings (Paramètres).

• Vous ne pouvez pas rendre les personnalisations conditionnelles en fonction de l’ID de l’application (client_id).

Si votre script de base de données personnalisé renvoie une erreur personnalisée, vous pouvez mapper une description d’erreur à l’aide de la propriété dict :

new Auth0ChangePassword({
  // ...other options
  dict: {
    yourCustomError: 'This is a custom error message'
  }
});

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

Si vous n’activez pas la personnalisation de la page de réinitialisation du mot de passe, Auth0 se chargera des mises à jour nécessaires pour le script, y compris les modifications du numéro de version de l’invite de réinitialisation du mot de passe incluse.

Lorsque vous activez la personnalisation de la page de réinitialisation du mot de passe, vous assumez la responsabilité de la mise à jour et de la maintenance du script. Cela inclut la mise à jour du numéro de version de l’invite de réinitialisation du mot de passe. Si la personnalisation est activée, Auth0 ne peut pas mettre à jour votre script automatiquement sans risquer d’interférer avec les modifications que vous avez apportées.

La version actuelle de l’invite de réinitialisation du mot de passe est 1.5.5. Utilisez ce lien pour appeler la dernière version, et les futures mises à jour mineures :

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

Pour revenir à une conception antérieure de la page de réinitialisation du mot de passe, vous pouvez :

• Revenir au dernier modèle enregistré en cliquant sur Reset to Last (Réinitialiser au dernier modèle).

• Revenir au modèle par défaut fourni par Auth0 en cliquant sur Reset to Default (Revenir au modèle par défaut).

• Personnaliser les pages de connexion classiques
• Personnaliser l’authentification multifacteur (MFA) pour la connexion classique
• Vérifier les messages d’erreur
• Erreurs de modification automatique de mot de passe