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

Apprenez à personnaliser la page de réinitialisation du mot de passe de la connexion classique.

Comment réinitialiser un mot de passe

Cette page décrit comment vous pouvez personnaliser une page de réinitialisation de mot de passe de connexion classique.

Si vous avez besoin d’aide pour réinitialiser un mot de passe, consultez plutôt la documentation suivante :

• Pour les administrateurs locataires qui réinitialisent les mots de passe d’autres utilisateurs : Modification des mots de passe d’utilisateurs
• Pour les personnes qui réinitialisent leur propre mot de passe : Réinitialiser le mot de passe d’un compte Auth0

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.

​

Activer la personnalisation de la page de réinitialisation du mot de passe

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.

​

Modifier la page de réinitialisation du mot de passe

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.

​

Afficher des informations personnalisées sur la page de réinitialisation du mot de passe

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.

​

Variables personnalisées

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

Variable	Description
email	L’adresse courriel de l’utilisateur qui demande une modification de mot de passe
ticket	Le ticket représentant la demande de réinitialisation de mot de passe
csrf_token	Jeton utilisé pour empêcher l’activité CSRF
tenant.name	Le nom associé à votre locataire Auth0
tenant.friendly_name	Le nom affiché pour votre locataire Auth0
tenant.picture_url	L’URL menant au logo vous représentant dans Auth0
tenant.support_email	L’adresse courriel d’assistance pour votre entreprise affichée à vos utilisateurs Auth0
tenant.support_url	L’URL d’assistance pour votre entreprise affichée à vos utilisateurs Auth0
lang	La langue de l’utilisateur
password_policy	La politique de sécurité active pour la connexion. Vous pouvez voir ce que c’est en utilisant https://manage.auth0.com/#/connections/database/con_VOTRE-ID-CONNEXION/security. Assurez-vous de fournir votre identifiant de connexion dans l’URL.)
password_complexity_options	Objet contenant les paramètres relatifs aux exigences de complexité du mot de passe
min_length	Longueur minimale requise pour les mots de passe nouvellement créés. Entre 1 et 128 caractères

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).

​

Messages d’erreur personnalisés

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'));
}

​

Invite de réinitialisation du mot de passe

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

​

Annuler des modifications

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).

​

En savoir plus

• 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