Découvrez comment personnaliser la page de connexion pour l’expérience Connexion classique.
À 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.
Connexion classique est une expérience de connexion hébergée par Auth0 qui s’appuie sur JavaScript pour personnaliser les pages.Dans , 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 de votre choix.
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.
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 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.
Activez le commutateur Customize Page situé en haut de l’onglet.
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.
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.
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.
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
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.
Authentification
Gérer les utilisateurs
Personnaliser
Auth0 AI
Plateforme