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

> Découvrez comment personnaliser la page de connexion pour l’expérience Connexion classique.

# Personnaliser les pages de Connexion classique

<Warning>
  À l’heure actuelle, les efforts de développement d’Auth0 se concentrent sur Universal Login, et Connexion classique n’est plus mise à jour. Pour personnaliser vos pages de connexion, Auth0 recommande les [personnalisations avancées pour Universal Login](/fr-CA/docs/customize/login-pages/advanced-customizations).
</Warning>

[Connexion classique](/fr-CA/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience) est une expérience de connexion hébergée par Auth0 qui s’appuie sur JavaScript pour personnaliser les pages.

Dans <Tooltip tip="Auth0 Dashboard : le principal produit d’Auth0 pour configurer vos services." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>, vous pouvez configurer des options de personnalisation de base qui s’appliquent à toutes les pages de connexion. Pour une personnalisation avancée, vous pouvez modifier directement le modèle HTML d’une ou de plusieurs pages.

De plus, vous pouvez gérer le contenu de votre page à l’aide du [système de contrôle de version](/fr-CA/docs/customize/login-pages/classic-login/version-control) de votre choix.

<div id="basic-customization">
  ## Personnalisation de base
</div>

Vous pouvez configurer les options suivantes dans l’Auth0 Dashboard, sous [image de marque > Universal Login > onglet Paramètres](https://manage.auth0.com/#/login_settings) :

* Logo de l’entreprise (taille recommandée : 150 x 150 pixels)
* Couleur principale
* Couleur d’arrière-plan

Par défaut, ces paramètres s’appliquent à toutes les pages de Connexion classique, comme l’écran de connexion ou la page de réinitialisation du mot de passe. Si vous modifiez directement le modèle HTML d’une ou de plusieurs pages et changez des attributs liés à ces options, ces attributs remplacent ces paramètres.

<div id="advanced-customization">
  ## Personnalisation avancée
</div>

Pour une personnalisation plus poussée, vous pouvez modifier directement le modèle HTML des pages suivantes :

* Connexion (voir ci-dessous)
* [Réinitialisation du mot de passe](/fr-CA/docs/customize/login-pages/classic-login/customize-password-reset-page)
* [Authentification multifacteur (MFA)](/fr-CA/docs/secure/multi-factor-authentication/customize-mfa/customize-mfa-classic-login)

<div id="responsibility-for-updates">
  ### Responsabilité des mises à jour
</div>

**Lorsque vous activez la personnalisation pour une page en particulier, vous assumez la responsabilité d’en assurer la maintenance**, puisqu’elle ne recevra plus automatiquement les mises à jour d’Auth0. Cette maintenance comprend notamment la mise à jour des numéros de version des SDK ou widgets Auth0 inclus.

Comme des renseignements sensibles liés à la sécurité transitent souvent par la page de connexion, l’introduction de vulnérabilités de type cross-site scripting (XSS) est préoccupante. De plus, si votre organisation utilise la [découverte du domaine d’origine](/fr-CA/docs/get-started/architecture-scenarios/business-to-business/authentication#home-realm-discovery) avec Classic Login, la liste des connexions disponibles est publiquement visible dans la propriété Auth0.setClient. Compte tenu de cela, Auth0 vous encourage à faire preuve de prudence lorsque vous utilisez du JavaScript tiers sur votre page de connexion.

<div id="enable-page-customization">
  ### Activer la personnalisation d’une page
</div>

Pour activer la personnalisation d’une page en particulier, suivez les étapes ci-dessous :

1. Dans l’Auth0 Dashboard, accédez à [Image de marque > Universal Login](https://manage.auth0.com/#/login_settings).
2. Sélectionnez l’un des onglets suivants :

   * **Connexion**
   * **Réinitialisation du mot de passe**
   * **Authentification multifacteur**
3. Activez le commutateur **Customize Page** situé en haut de l’onglet.
4. Répétez les étapes 2 et 3 au besoin.

Après avoir activé la personnalisation d’une page, vous pouvez modifier son modèle HTML dans l’éditeur de code situé sous le commutateur.

<Warning>
  Si vous activez la personnalisation pour examiner le code de la page, mais décidez finalement de ne pas la personnaliser, assurez-vous de désactiver le commutateur **Customize Page** lorsque vous avez terminé afin qu’Auth0 puisse afficher les pages par défaut.
</Warning>

<div id="customize-the-login-page">
  ### Personnaliser la page de connexion
</div>

Pour personnaliser le modèle de la page de connexion, vous devez d’abord choisir un modèle de base à partir duquel travailler.

1. Dans l’Auth0 Dashboard, accédez à [Branding > Universal Login > Login tab](https://manage.auth0.com/#/login_page).
2. Activez le bouton bascule **Customize Login Page**.
3. Au-dessus de l’éditeur de code HTML, sélectionnez une option dans le menu **Default Templates**.

Les modèles disponibles utilisent les bibliothèques suivantes :

* [Lock](/fr-CA/docs/libraries/lock)
* [Lock (mode Passwordless)](/fr-CA/docs/libraries/lock)
* [Auth0.js](/fr-CA/docs/libraries/auth0js)
* [Authentication API](https://auth0.com/docs/api/authentication)

Vous pouvez utiliser ces bibliothèques dans Connexion classique ou les intégrer directement à une application. Pour mieux comprendre comment personnaliser votre expérience de connexion, consultez la documentation de la bibliothèque de votre choix.

<div id="lock-template">
  #### Modèle Lock
</div>

Si vous comptez utiliser la page de connexion par défaut et n’avez besoin que de quelques modifications mineures, vous pouvez utiliser le modèle Lock pour modifier le comportement du widget Lock sur la page de connexion.

Par exemple, vous pouvez configurer le widget Lock pour :

* Rediriger les utilisateurs vers la page d’inscription plutôt que vers la page de connexion par défaut
* Personnaliser la page de connexion en modifiant les couleurs, le texte ou la langue par défaut
* N’afficher qu’une ou plusieurs méthodes de connexion précises

Pour en savoir plus sur la personnalisation du widget Lock, consultez [Lock Configuration Options](/fr-CA/docs/libraries/lock/lock-configuration).

<div id="custom-login-form-template">
  #### Modèle Custom Login Form
</div>

Si vous souhaitez modifier en profondeur la page de connexion, vous pouvez utiliser le modèle Custom Login Form comme point de départ. Ce modèle montre comment récupérer les valeurs dont vous avez besoin avec le SDK Auth0.js. Vous pouvez ensuite modifier le style et la mise en page de la page de connexion selon vos besoins. Toute personnalisation CSS **doit** être intégrée en ligne, car vous ne pouvez pas héberger de fichier CSS distinct dans votre locataire Auth0.

<div id="learn-more">
  ## En savoir plus
</div>

* [Expérience Connexion classique](/fr-CA/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience)
* [Personnaliser les pages de Connexion classique avec Lock ou le SDK](/fr-CA/docs/customize/login-pages/classic-login/customize-with-lock-sdk)
* [Personnaliser MFA pour Connexion classique](/fr-CA/docs/secure/multi-factor-authentication/customize-mfa/customize-mfa-classic-login)