Skip to main content
À l’heure actuelle, les efforts de développement d’Auth0 sont axés sur Universal Login, et Classic Login n’est plus mis à jour. Pour personnaliser vos pages de connexion, Auth0 recommande Advanced Customizations for Universal Login.
Classic Login est une expérience de connexion hébergée par Auth0 qui s’appuie sur Javascript pour la personnalisation des pages. Dans le , vous pouvez configurer des options de personnalisation de base qui s’appliquent à toutes les pages de connexion. Pour une personnalisation plus poussée, vous pouvez modifier directement le modèle HTML d’une ou de plusieurs pages. De plus, vous pouvez gérer le contenu de vos pages à l’aide du système de contrôle de version de votre choix.

​
Personnalisation de base

Vous pouvez configurer les options suivantes dans l’Auth0 Dashboard, sous Branding > Universal Login > onglet 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 Classic Login, 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 modifiez des attributs liés à ces options, ces attributs remplaceront ces paramètres.

​
Personnalisation avancée

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

​
Responsabilité des mises à jour

Lorsque vous activez la personnalisation d’une page précise, vous assumez la responsabilité de sa maintenance, puisqu’elle ne recevra plus automatiquement les mises à jour d’Auth0. Cette maintenance comprend notamment la mise à jour des numéros de version de tous les SDK Auth0 et widgets 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 script intersite (XSS) constitue un risque préoccupant. De plus, si votre organisation utilise Home Realm Discovery conjointement avec Classic Login, la liste des connexions disponibles est visible publiquement dans la propriété Auth0.setClient. Dans ce contexte, Auth0 vous encourage à faire preuve de prudence lorsque vous utilisez du JavaScript tiers sur votre page de connexion.

​
Activer la personnalisation de la page

Pour activer la personnalisation d’une page en particulier, suivez les étapes ci-dessous :
  1. Dans l’Auth0 Dashboard, accédez à Branding > Universal Login.
  2. Sélectionnez l’un des onglets suivants :
    • Login
    • Password Reset
    • Authentification multifacteur
  3. Activez la bascule Personnaliser la page située 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 la bascule.
Si vous activez la personnalisation pour inspecter le code de la page, mais décidez finalement de ne pas la personnaliser, assurez-vous de désactiver la bascule Personnaliser la page lorsque vous avez terminé afin qu’Auth0 puisse afficher les pages par défaut.

​
Personnaliser la page de connexion

Pour personnaliser le modèle de la page de connexion, vous devez d’abord choisir un modèle de base.
  1. Dans l’Auth0 Dashboard, accédez à Branding > Universal Login > onglet Login.
  2. Activez la 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 offerts utilisent les bibliothèques suivantes : Vous pouvez utiliser ces bibliothèques dans Classic Login ou les intégrer directement dans une application. Pour mieux comprendre comment personnaliser votre expérience de connexion, consultez la documentation de la bibliothèque que vous préférez.

​
Modèle Lock

Si vous comptez utiliser la page de connexion par défaut et n’avez besoin que de 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 avec différentes couleurs, différents textes ou différentes langues par défaut
  • Présenter aux utilisateurs uniquement une ou plusieurs méthodes de connexion précises
Pour en savoir plus sur la personnalisation du widget Lock, consultez les Options de configuration de Lock.

​
Modèle Custom Login Form

Si vous souhaitez modifier considérablement la page de connexion, vous pouvez utiliser le modèle Custom Login Form comme guide. Ce modèle vous 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 à votre guise. Toute personnalisation CSS doit être intégrée directement dans le code, car vous ne pouvez pas héberger de fichier CSS distinct dans votre tenant Auth0.

​
En savoir plus