Personnaliser les pages de connexion classiques

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.

​

Personnalisation de base

Vous pouvez configurer les options suivantes à partir d’Auth0 Dashboard sous l’onglet Image de marque > Connexion universelle > Paramètres :

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

​

Personnalisation avancée

Vous pouvez modifier directement le modèle HTML des pages suivantes pour une personnalisation accrue :

• Connexion (voir ci-dessous)
• Réinitialisation du mot de passe
• Authentification multifacteur (MFA)

​

Responsabilité des mises à jour

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.

​

Activer la personnalisation de la page

Suivez les étapes ci-dessous pour activer la personnalisation d’une page particulière :

1. Dans Auth0 Dashboard, rendez-vous à Image de marque > Connexion universelle.

2. Sélectionnez l’un des onglets suivants :

   • Connexion
   • Réinitialisation du mot de passe :
   • Authentification multifacteur (MFA)

3. Activez le bouton bascule Customize Page (Personnalisation de la 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 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.

​

Personnaliser la page de connexion

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

1. Dans Auth0 Dashboard, rendez-vous à l’onglet Image de marque > Connexion universelle > Connexion.
2. Activez le bouton bascule Customize Login Page (Personnalisation de la page de connexion).
3. Au-dessus de l’éditeur de code HTML, sélectionnez une option dans le menu Default Templates (Modèles par défaut).

Les modèles proposés utilisent les bibliothèques suivantes :

• Lock
• Lock (mode sans mot de passe)
• Auth0.js
• Authentication API

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.

​

Modèle Lock

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.

Pour en savoir plus sur la personnalisation du gadget logiciel Lock, consultez les Options de configuration de Lock.

​

Modèle de formulaire de connexion personnalisée

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.

​

En savoir plus

• l’expérience de connexion classique
• Personnaliser les pages de connexion classiques avec Lock ou une trousse SDK
• Personnaliser l’authentification multifacteur (MFA) pour la connexion classique