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

Personnalisez la page de réinitialisation du mot de passe de Classic Login pour qu’elle corresponde au style de votre application.

À l’heure actuelle, les efforts de développement d’Auth0 se concentrent sur Universal Login, et Classic Login n’est plus mis à jour. Pour personnaliser vos pages de connexion, Auth0 recommande les Advanced Customizations for 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 de tenant 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 modifier leur mot de passe s’ils ne peuvent pas se connecter. Dans la page de réinitialisation du mot de passe, 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 uniforme et cohérente avec votre image de marque tout au long du login flow, vous pouvez personnaliser l’affichage du prompt de réinitialisation du mot de passe pour les utilisateurs. Vous pouvez également mettre à jour la page de réinitialisation du mot de passe pour y 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 dans le Auth0 Dashboard :

1. Accédez à Branding > Universal Login > onglet Password Reset.
2. Activez la bascule Customize Password Reset Page.

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

​

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 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: "Veuillez vous assurer que le mot de passe et la confirmation sont identiques.",
        // passwordStrength: {
        //   containsAtLeast: "Contenir au moins %d des %d types de caractères suivants :",
        //   identicalChars: "Pas plus de %d caractères identiques consécutifs (par exemple, \"%s\" n'est pas autorisé)",
        //   nonEmpty: "Un mot de passe non vide est requis",
        //   numbers: "Chiffres (tels que 0-9)",
        //   lengthAtLeast: "Au moins %d caractères",
        //   lowerCase: "Lettres minuscules (a-z)",
        //   shouldContain: "Doit contenir :",
        //   specialCharacters: "Caractères spéciaux (tels que !@#$%^&*)",
        //   upperCase: "Lettres majuscules (A-Z)"
        // },
        // successMessage: "Votre mot de passe a été réinitialisé avec succès.",
        // configurationError: "Une erreur s'est produite. Il semble y avoir une mauvaise configuration dans le formulaire.",
        // networkError: "Le serveur est inaccessible, il y a un problème avec le réseau.",
        // timeoutError: "Le serveur est inaccessible, veuillez réessayer.",
        // serverError: "Une erreur s'est produite lors du traitement de la réinitialisation du mot de passe.",
        // headerText: "Enter a new password for<br />{email}",
        // title: "Change Password",
        // weakPasswordError: "Le mot de passe est trop faible."
        // passwordHistoryError: "Ce mot de passe a déjà été utilisé."
      }
    });

Par exemple, l’extrait de modèle ci-dessous montre la variable tenant.picture_url. Cette variable renvoie l’URL du logo définie dans 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 à partir de l’URL et l’affiche dans le prompt de réinitialisation du mot de passe. Si Auth0 ne parvient pas à résoudre l’URL, l’image par défaut s’affichera.

​

Variables personnalisées

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

Variable	Description
email	L’adresse courriel de l’utilisateur qui demande un changement de mot de passe
ticket	Le ticket correspondant à la demande de réinitialisation du mot de passe
csrf_token	Jeton utilisé pour prévenir les activités CSRF
tenant.name	Le nom associé à votre tenant Auth0
tenant.friendly_name	Le nom affiché pour votre tenant Auth0
tenant.picture_url	L’URL menant au logo qui vous représente dans Auth0
tenant.support_email	L’adresse courriel de soutien de votre entreprise affichée à vos utilisateurs Auth0
tenant.support_url	L’URL de soutien de votre entreprise affichée à vos utilisateurs Auth0
lang	La langue de l’utilisateur
password_policy	La policy de sécurité de la connection 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 connection dans l’URL.)
password_complexity_options	Objet contenant les paramètres des exigences de complexité du mot de passe
min_length	La longueur minimale requise pour les mots de passe nouvellement créés. Peut compter de 1 à 128 caractères

Remarques :

• Vous pouvez définir ou vérifier les valeurs des variables de votre tenant dans la section Settings sous Dashboard > Settings.
• Vous ne pouvez pas rendre les personnalisations conditionnelles en fonction de l’Application ID (client_id).

​

Messages d’erreur personnalisés

Si votre script de base de données personnalisée retourne une erreur personnalisée, vous pouvez mapper 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 le prompt 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 prendra en charge les mises à jour nécessaires du script, y compris les changements du numéro de version du prompt de réinitialisation du mot de passe inclus.

Lorsque vous activez la personnalisation de la page de réinitialisation du mot de passe, vous êtes responsable de la mise à jour et de la maintenance du script. Cela comprend la mise à jour du numéro de version du prompt 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 du prompt de réinitialisation du mot de passe est 1.5.5. Utilisez ce lien pour charger 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 rétablir la page de réinitialisation du mot de passe dans une version antérieure, vous pouvez :

• Rétablir le dernier modèle enregistré en cliquant sur Réinitialiser à la dernière version.
• Rétablir le modèle par défaut fourni par Auth0 en cliquant sur Réinitialiser à la valeur par défaut.

​

En savoir plus

• Personnaliser les pages de connexion Classic Login
• Personnaliser le MFA pour Classic Login