Personnaliser la page de réinitialisation du mot de passe de Classic Login

Découvrez comment personnaliser une page de réinitialisation du mot de passe de Classic Login.

Pour le moment, les efforts de développement actifs d’Auth0 sont axés sur Universal Login, et Classic Login n’est plus mis à jour. Pour personnaliser vos pages de connexion, Auth0 recommande les personnalisations avancées pour Universal Login.

Vous réinitialisez un mot de passe ?

Cette page explique comment personnaliser une page de réinitialisation du mot de passe de Classic Login.

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

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

Si vous utilisez Classic Login, la page de réinitialisation du mot de passe permet à vos utilisateurs de changer leur mot de passe s’ils ne parviennent pas à se connecter. Dans cette page, Auth0 prend en charge toutes les fonctionnalités requises, notamment :

• L’hébergement de la page elle-même
• La redirection de l’utilisateur qui souhaite réinitialiser son mot de passe, au besoin
• La vérification que le mot de passe de l’utilisateur respecte les exigences que vous avez définies
• La redirection automatique de l’utilisateur après la réinitialisation de son mot de passe

Pour offrir une expérience cohérente avec votre image de marque 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 aux utilisateurs. Vous pouvez également mettre à jour la page de réinitialisation du mot de passe pour afficher certains renseignements personnels, au besoin.

​

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 d’Auth0 et ne nécessite aucune personnalisation. Toutefois, 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 du Auth0 Dashboard :

1. Accédez à Branding > Universal Login > onglet Réinitialisation du mot de passe.
2. Activez le bouton bascule Personnaliser la page de réinitialisation du mot de passe.

Dans l’éditeur de code situé sous le bouton bascule, 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 code HTML, mettre en forme la page à l’aide de CSS et modifier le code JavaScript utilisé pour récupérer et afficher des variables personnalisées. Assurez-vous de sélectionner Save Changes sous l’éditeur de code pour enregistrer vos modifications.

​

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 la page de réinitialisation du mot de passe :

new Auth0ChangePassword({
      container:         "change-password-widget-container",     // requis
      email:             "{{email}}",                            // NE PAS MODIFIER
      csrf_token:        '{{csrf_token}}',                       // NE PAS MODIFIER
      ticket:            '{{ticket}}',                           // NE PAS MODIFIER
      password_policy:   '{{password_policy}}',                  // NE PAS MODIFIER
      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 affiche la variable tenant.picture_url. Cette variable renvoie la valeur de l’URL du logo définie dans Auth0 Dashboard > Settings.

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

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

​

Variables personnalisées

Vous pouvez utiliser les variables personnalisées suivantes pour afficher de l’information personnalisée sur la page de réinitialisation du mot de passe :

Variable	Description
email	L’adresse courriel de l’utilisateur qui demande le changement de mot de passe
ticket	Le ticket correspondant à la demande de réinitialisation du mot de passe donnée
csrf_token	Jeton utilisé pour prévenir les attaques 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 qui vous représente dans Auth0
tenant.support_email	L’adresse courriel d’assistance de votre entreprise affichée à vos utilisateurs Auth0
tenant.support_url	L’URL d’assistance de votre entreprise affichée à vos utilisateurs Auth0
lang	La langue de l’utilisateur
password_policy	La stratégie de sécurité de la connexion active. Vous pouvez la consulter à l’adresse https://manage.auth0.com/#/connections/database/con_YOUR-CONNECTION-ID/security. Assurez-vous d’indiquer l’ID de votre connexion dans l’URL.)
password_complexity_options	Objet contenant les paramètres des exigences de complexité du mot de passe
min_length	Longueur minimale requise pour les mots de passe nouvellement créés. Peut varier de 1 à 128 caractères

Remarques :

• Vous pouvez définir ou vérifier les valeurs des variables de votre locataire dans la section Settings, sous Auth0 Dashboard > Settings.
• 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 associer une description d’erreur à l’aide de la propriété dict :

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

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

​

Mettre à jour l’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 du script, y compris des changements apportés au 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, il vous incombe de mettre à jour et de maintenir le script. Cela comprend la mise à jour du numéro de version de l’invite de réinitialisation du mot de passe. Lorsque la personnalisation est activée, Auth0 ne peut pas mettre à jour automatiquement votre script 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 version la plus récente, y compris les futures mises à jour de version mineure :

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

​

Annuler les modifications

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

• Revenir au dernier modèle enregistré en cliquant sur Reset to Last.
• Revenir au modèle par défaut fourni par Auth0 en cliquant sur Reset to Default.

​

En savoir plus

• Personnaliser les pages Classic Login
• Personnaliser la MFA pour Classic Login
• Vérifier les messages d’erreur
• Erreurs liées au changement de mot de passe libre-service