Découvrez comment personnaliser la page de connexion pour l’expérience de connexion classique.
La connexion classique est une expérience de connexion hébergée par Auth0 qui s’appuie sur JavaScript pour la personnalisation des pages.Vous pouvez configurer des options de personnalisation de base qui s’appliquent à toutes les pages de connexion à partir d’Auth0 Dashboard. Pour une personnalisation avancée, vous pouvez modifier directement le modèle HTML d’une ou plusieurs pages.De plus, vous pouvez gérer le contenu de votre page en utilisant le système de contrôle des versions 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 affectent toutes les pages de connexion classique, comme l’écran de connexion ou la page de réinitialisation du mot de passe. Ces attributs remplaceront ces paramètres si vous modifiez directement le modèle HTML d’une ou de plusieurs pages et que vous modifiez les attributs liés à ces options.
Lorsque vous activez la personnalisation pour une page particulière, vous assumez la responsabilité de son entretien, puisque Auth0 n’effectuera plus les mises à jour. Cet entretien englobe la mise à jour des numéros de version de toutes les trousses SDK ou gadgets logiciels Auth0 inclus.Étant donné qu’on trouve souvent sur la page de connexion des informations confidentielles et sensibles liées à la sécurité, l’introduction de vulnérabilités de type scripting inter-site (XSS) est une source d’inquiétude. De plus, si votre organisation utilise la découverte de domaine d’accueil en conjonction avec la connexion classique, une liste des connexions proposées est visible publiquement dans la propriété Auth0.setClient. En tenant compte de cela, Auth0 vous encourage à faire preuve de prudence lorsque vous utilisez du JavaScript de tiers sur votre page de connexion.
Activez le bouton bascule Customize Page (Personnalisation de la 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 via l’éditeur de code situé en dessous du bouton bascule.
Si vous activez la personnalisation pour inspecter le code de la page mais décidez de ne pas le personnaliser, assurez-vous de désactiver la bascule Customize Page (Personnaliser la Page) une fois terminé afin qu’Auth0 puisse afficher les pages par défaut.
Vous pouvez utiliser ces bibliothèques dans la connexion classique ou les intégrer directement dans une application. Consultez la documentation de la bibliothèque de votre choix pour mieux comprendre comment personnaliser votre expérience de connexion.
Si vous prévoyez d’utiliser la page de connexion par défaut et que vous n’avez besoin que de quelques modifications mineures, vous pouvez utiliser le modèle Lock pour modifier le comportement du gadget logiciel Lock sur la page de connexion.Vous pouvez configurer le gadget logiciel Lock pour :
Diriger les utilisateurs vers la page d’inscription au lieu de la page de connexion par défaut.
Personnaliser la page de connexion en y ajoutant des couleurs, du texte ou une langue par défaut.
Présenter aux utilisateurs une ou plusieurs méthodes de connexion particulières uniquement.
Vous pouvez vous inspirer du modèle de formulaire de connexion personnalisé si vous souhaitez modifier la page de connexion de manière significative. Ce modèle vous montre comment obtenir les valeurs dont vous avez besoin avec la trousse SDK Auth0.js. Vous pouvez ensuite modifier le style et la mise en page de la page de connexion selon vos préférences. Assurez-vous d’inclure toutes les personnalisations CSS, car il est impossible d’héberger un fichier CSS distinct dans votre locataire Auth0.
