Personnaliser les thèmes des pages Universal Login

Décrit comment utiliser l’éditeur sans code pour personnaliser les thèmes des pages Universal Login.

Vous pouvez créer une expérience de connexion cohérente et à votre image de marque pour vos utilisateurs en personnalisant le style de vos invites Universal Login. Grâce à l’éditeur sans code d’Universal Login, vous pouvez facilement personnaliser les couleurs, les polices, les bordures et les arrière-plans des invites affichées aux utilisateurs tout au long du flux de connexion.

L’éditeur sans code vous permet de personnaliser le thème de l’image de marque de votre Universal Login. Pour personnaliser le texte inclus dans chaque invite, consultez Personnaliser les éléments de texte d’Universal Login. Pour des options de personnalisation plus avancées, consultez Personnaliser les modèles de page d’Universal Login.

Pour utiliser l’éditeur sans code, vous devez avoir activé Universal Login. L’expérience Classic Login ne prend pas en charge cet éditeur.

​

Éditeur sans code pour Universal Login

Pour personnaliser votre thème Universal Login, suivez les étapes ci-dessous :

1. Dans Auth0 Dashboard, accédez à Branding > Universal Login > Customization Options.
2. Sélectionnez un composant du thème (par exemple, Colors) dans le menu Styles. Personnalisez ensuite les options affichées à droite.
3. Après avoir personnalisé votre thème, sélectionnez Save and Publish.

Après avoir enregistré votre thème, vous pouvez accéder à un aperçu en temps réel de votre expérience de connexion afin de passer en revue et de tester vos écrans. Pour ouvrir l’aperçu dans un nouvel onglet, sélectionnez Try au-dessus de l’éditeur sans code.

​

Composants du thème

Pour créer le thème Universal Login voulu, le menu Styles contient les composants suivants :

Couleur

Sélectionnez un champ de saisie pour modifier la couleur de l’élément. Pour choisir des couleurs précises, vous pouvez :

• Utiliser le sélecteur de couleur.
• Entrer le code hexadécimal ou la valeur RGB.
• Sélectionner l’outil pipette pour choisir une couleur à l’écran parmi les éléments disponibles.

Élément	Description
Bouton principal	Remplit le bouton principal, ou le bouton qui déclenche l’action suivante, avec la couleur choisie.
Libellé du bouton principal	Modifie la couleur du texte dans le bouton principal.
Bordure du bouton secondaire	Modifie la bordure des champs de saisie.
Libellé du bouton secondaire	Modifie le texte dans les champs secondaires cliquables.
Liens et composants en focus	Modifie la couleur du texte des liens qui permettent aux utilisateurs de lancer un autre flux de travail, comme réinitialiser le mot de passe ou essayer une autre méthode d’authentification.
Couleur de focus de base	Modifie la couleur des boutons lorsque le pointeur survole le bouton avant la sélection.
Couleur de survol de base	Modifie la couleur d’un bouton lorsque l’utilisateur clique dessus.
En-tête	Modifie la couleur du texte du titre dans l’en-tête.
Texte du corps	Modifie la couleur du texte du corps.
Arrière-plan du widget	Modifie la couleur d’arrière-plan des widgets.
Bordure du widget	Modifie la couleur de la bordure des widgets.
Libellés et espaces réservés des champs de saisie	Modifie le texte des libellés des champs de saisie et le texte d’espace réservé.
Texte saisi dans le champ	Modifie la couleur du texte que les utilisateurs saisissent dans les champs de saisie. Par exemple, les champs nom d’utilisateur et mot de passe.
Bordure du champ de saisie	Modifie la couleur de la bordure des champs de saisie.
Arrière-plan du champ de saisie	Modifie la couleur d’arrière-plan des champs de saisie.
Icônes	Modifie la couleur des icônes à l’intérieur des champs de saisie.
Erreur	Modifie la couleur des messages d’erreur dans les widgets.
Succès	Modifie la couleur des messages de succès dans les widgets.

Une fois la modification effectuée, la fenêtre d’aperçu affiche plusieurs exemples de widgets avec les changements appliqués.

Polices

Pour modifier la police par défaut, saisissez l’URL de n’importe quel fichier WOFF (Web Open Font Format) dans le champ de saisie. Vos fichiers WOFF doivent être hébergés sur un CDN avec CORS activé ou sur un site d’hébergement avec l’en-tête Access-Control-Allow-Origin.

Sous le panneau de l’URL de la police, ajustez la taille générale du texte à l’aide de l’option en pixels Taille du texte de référence. Notez que les autres options ne changent pas lorsque le texte de référence est modifié.

Modifiez individuellement les éléments suivants :

• Titre
• Sous-titre
• Corps du texte
• Texte du bouton
• Libellés de champ
• Liens

Lorsque vous sélectionnez une option à configurer, le volet d’aperçu indique l’emplacement de l’élément dans le widget et s’ajuste à la taille spécifiée.

Bordures

Pour personnaliser les bordures, le style des boutons, les champs de saisie et les coins du widget, ajustez le curseur ou choisissez parmi les options disponibles.

Option	Description
Épaisseur de la bordure des boutons	Ajuste la largeur de la bordure autour des champs de saisie dans les invites de connexion.
Style des boutons	Modifie la forme des boutons cliquables dans les widgets. Les options disponibles sont : coins droits, coins arrondis ou style en capsule.
Rayon de la bordure des boutons	Ajuste les coins des boutons cliquables lorsque vous sélectionnez des coins arrondis.
Épaisseur de la bordure des champs de saisie	Ajuste la largeur des bordures des champs de saisie et des boutons cliquables dans les invites de connexion.
Style des champs de saisie	Modifie la forme des champs de saisie dans les invites de connexion. Les options disponibles sont : coins droits, coins arrondis ou style en capsule.
Rayon de la bordure des champs de saisie	Ajuste les coins des champs de saisie lorsque vous sélectionnez des coins arrondis.
Rayon des coins du widget	Modifie la forme du widget, de coins droits à des coins arrondis.
Épaisseur de la bordure du widget	Ajuste la largeur de la bordure du widget.
Ombre	Case à cocher permettant aux widgets d’avoir une ombre.

Widget

Ajoutez l’URL de votre logo pour configurer sa position, sa hauteur, l’alignement du texte et l’emplacement des options de connexion sociale.

Element	Description
Position du logo	Choisissez l’emplacement du widget : à gauche, à droite ou au centre de la page. Vous pouvez aussi choisir de masquer le logo.
URL du logo	Entrez l’URL de votre logo personnalisé. Auth0 recommande les fichiers SVG.
Hauteur du logo	Ajustez la taille de votre logo en haut du widget.
Alignement du texte de l’en-tête	Choisissez si le texte dans l’en-tête doit être aligné à gauche, à droite ou au centre.
Disposition des boutons sociaux	Choisissez si le texte doit apparaître en haut ou en bas du bouton.

Arrière-plans des pages

Ajoutez l’URL d’une image d’arrière-plan pour définir l’arrière-plan affiché dans le widget de l’invite. L’éditeur sans code prend également en charge d’autres formats d’image, comme les PNG et les JPEG.

Auth0 recommande d’utiliser une image au format JPEG d’au moins 2000 px de large.

Ensuite, choisissez si le widget s’aligne au centre, à gauche ou à droite de l’écran.

​

Management API

Vous pouvez aussi personnaliser le thème de votre Universal Login à l’aide de la Management API. Plus précisément, vous pouvez utiliser les points de terminaison liés à l’image de marque pour :

• Créer un nouveau thème d’image de marque
• Récupérer le thème d’image de marque par défaut
• Récupérer un thème d’image de marque particulier
• Supprimer un thème d’image de marque
• Mettre à jour le thème actuel