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 pour vos utilisateurs une expérience de connexion cohérente avec votre image de marque en personnalisant le style de vos prompts Universal Login. Grâce à l’éditeur sans code Universal Login, vous pouvez facilement personnaliser les couleurs, les polices, les bordures et les arrière-plans des prompts affichés aux utilisateurs tout au long du flux de connexion.

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

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 de Universal Login

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

1. Dans l’Auth0 Dashboard, accédez à Branding > Universal Login > Customization Options.
2. Sélectionnez un composant de thème (p. ex., 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 direct de votre expérience de connexion afin de passer en revue et tester vos écrans. Pour lancer l’aperçu dans un nouvel onglet, sélectionnez Try au-dessus de l’éditeur no-code.

​

Composants du thème

Pour créer le thème Universal Login de votre choix, le menu Styles comprend 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 couleurs.
• Saisir le code hexadécimal ou la valeur RGB.
• Sélectionner l’outil pipette pour choisir une couleur sur votre écran parmi les éléments disponibles.

Élément	Description
Bouton principal	Applique la couleur choisie au remplissage du bouton principal, ou du bouton qui déclenche l’action suivante.
Libellé du bouton principal	Modifie la couleur du texte à l’intérieur du bouton principal.
Bordure du bouton secondaire	Modifie la bordure des champs de saisie.
Libellé du bouton secondaire	Modifie le texte à l’intérieur des éléments secondaires cliquables.
Liens et composants en focus	Modifie la couleur du texte des liens qui permettent aux utilisateurs de déclencher 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 de la souris les survole 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 de l’espace réservé.
Texte saisi dans les champs	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 que vous avez spécifiés.

Polices

Pour changer la police par défaut, entrez 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 dans l’option en pixels Reference text size. Veuillez noter 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
• Body Text
• Texte du bouton
• Libellés des champs de saisie
• Liens

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

Bordures

Pour personnaliser les bordures, le style des boutons, les champs de saisie et les coins du widget, réglez le curseur ou choisissez parmi les options offertes.

Option	Description
Épaisseur de la bordure du bouton	Règle la largeur de la bordure autour des champs de saisie dans les écrans de connexion.
Style des boutons	Modifie la forme des boutons cliquables dans les widgets. Les options offertes sont : coins carrés, coins arrondis ou style pilule.
Rayon de la bordure du bouton	Règle les coins des boutons cliquables lorsque vous sélectionnez des coins arrondis.
Épaisseur de la bordure des champs de saisie	Règle la largeur des bordures des champs de saisie et des boutons cliquables dans les écrans de connexion.
Style des champs de saisie	Modifie la forme des champs de saisie dans les écrans de connexion. Les options offertes sont : coins carrés, coins arrondis ou style pilule.
Rayon de la bordure des champs de saisie	Règle les coins des champs de saisie lorsque vous sélectionnez des coins arrondis.
Rayon des coins du widget	Modifie la forme du widget pour passer de coins carrés à des coins arrondis.
Épaisseur de la bordure du widget	Règle la largeur de la bordure du widget.
Ombre	Case à cocher permettant d’ajouter une ombre aux widgets.

Widget

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

Element	Description
Position du logo	Choisissez où le widget doit apparaître : à gauche, à droite ou au centre de la page. Vous pouvez aussi 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 de l’en-tête doit être aligné à gauche, à droite ou au centre.
Disposition des boutons de connexion sociale	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 du prompt. L’éditeur No-Code prend 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 doit être aligné au centre, à gauche ou à droite de l’écran.

​

Management API

Vous pouvez aussi personnaliser votre thème Universal Login à l’aide de la Management API. Plus précisément, vous pouvez utiliser les endpoints Branding 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