> ## Documentation Index > Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. > Personnalisez la page de réinitialisation du mot de passe de Classic Login pour qu’elle corresponde au style de votre application. # Personnaliser la page de réinitialisation du mot de passe de Classic Login À 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](/docs/fr-ca/customize/login-pages/advanced-customizations). 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](/docs/fr-ca/authenticate/database-connections/password-change) * Pour les personnes qui réinitialisent leur propre mot de passe : [Réinitialiser le mot de passe du compte Auth0](/docs/fr-ca/troubleshoot/customer-support/reset-account-passwords) 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](/docs/fr-ca/customize/login-pages/classic-login/customization-classic) 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](https://manage.auth0.com/#/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 : ```js lines expandable theme={null} 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
{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](https://manage.auth0.com/#/tenant). ```js lines theme={null} 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](https://manage.auth0.com/#/tenant). * 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` : ```js lines theme={null} 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](/docs/fr-ca/customize/login-pages/classic-login/customization-classic) * [Personnaliser le MFA pour Classic Login](/docs/fr-ca/secure/multi-factor-authentication/customize-mfa/customize-mfa-classic-login)