Personnaliser les thèmes des pages de connexion universelle

Décrit comment utiliser l’éditeur No-Code pour personnaliser les thèmes pour les pages de connexion universelle.

Vous pouvez créer une expérience de connexion reflétant votre image de marque pour vos utilisateurs en personnalisant vos invites de connexion universelle. Avec l’éditeur No-Code de la connexion universelle, vous pouvez facilement modifier les couleurs, les polices, les bordures et les arrière-plans des invites affichées pendant le flux de connexion.

L’éditeur No-Code vous permet de personnaliser votre thème de connexion universelle. Pour personnaliser le texte inclus dans chaque invite, consultez Personnaliser les éléments de texte de connexion universelle. Pour des capacités de personnalisation supplémentaires, consultez Personnaliser les modèles de page de la connexion universelle.

Pour tirer parti de l’éditeur No-Code, vous devez activer la connexion universelle. L’expérience de connexion classique ne prend pas en charge cet éditeur.

​

Éditeur No-Code de la connexion universelle

Pour personnaliser votre thème de connexion universelle, suivez les étapes ci-après :

1. Dans Auth0 Dashboard, accédez à Branding (Image de marque) > Universal Login (Connexion universelle) > Customization Options (Options de personnalisation).
2. Sélectionnez un theme component (composant de thème) p. ex. Colors (Couleurs) dans le menu Styles. Personnalisez ensuite les options présentées à droite.
3. Une fois votre thème personnalisé, sélectionnez Save and Publish (Enregistrer et publier).

Après avoir enregistré votre thème, vous pouvez visualiser un aperçu de votre expérience de connexion pour consulter et tester vos écrans. Pour lancer l’aperçu dans un nouvel onglet, sélectionnez Try (Essayer) au-dessus de l’éditeur No-Code.

​

Composants de thème

Pour créer votre thème de connexion universelle, utilisez le menu Styles et ses différents composants :

Couleur

Sélectionnez un champ de saisie pour changer la couleur de l’élément. Pour choisir des couleurs spécifiques, vous pouvez :

• Utiliser le sélecteur de couleurs.
• Saisissez le code hexadécimal ou la valeur RGB.
• Sélectionnez l’outil pipette pour choisir une couleur à partir de votre écran pour les éléments disponibles.

Élément	Description
Bouton principal	Choix de la couleur du bouton principal ou du bouton qui déclenche l’action suivante.
Étiquette 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.
Étiquette du bouton secondaire	Modifie le texte des champs secondaires cliquables.
Liens et composants en évidence	Modifie la couleur du texte des liens qui amènent les utilisateurs à déclencher un autre flux de production, tel que la réinitialisation du mot de passe ou l’utilisation d’une autre méthode d’authentification.
Couleur des boutons survolés	Modifie la couleur des boutons lorsque la souris passe sur le bouton avant sélection.
Couleur des boutons cliqués	Modifie la couleur d’un bouton lorsqu’un utilisateur clique dessus.
En-tête	Modifie la couleur du texte du titre de l’en-tête.
Texte	Modifie la couleur du corps du texte.
Arrière-plan des gadgets logiciels	Modifie la couleur d’arrière-plan des gadgets logiciels.
Bordure des gadgets logiciels	Modifie la couleur de la bordure des gadgets logiciels.
Étiquettes de saisie et paramètres fictifs	Modifie le texte des étiquettes des champs de saisie et des paramètres fictifs.
Texte saisi	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 de saisie	Modifie la couleur des bordures des champs de saisie.
Fond de saisie	Modifie la couleur de fond des champs de saisie.
Icônes	Modifie la couleur des icônes dans les champs de saisie.
Erreur	Modifie la couleur des messages d’erreur dans les gadgets logiciels.
Succès	Modifie la couleur du message de réussite dans les gadgets logiciels.

Une fois que vous apportez une modification, la fenêtre de prévisualisation affiche plusieurs exemples des widgets avec vos modifications spécifiées.

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 à l’aide d’un CDN avec CORS activé ou d’un site d’hébergement avec l’en-tête Access-Control-Allow-Origin.

Dans le panneau d’URL de polices, ajustez la taille de texte générale sous l’option de taille de texte de référence en pixels. Vous devez noter que les autres options ne changent pas lorsque le texte de référence est modifié.

Modifiez les éléments suivants individuellement :

• Titre
• Sous-titre
• Corps du texte
• Texte de bouton
• Étiquettes des champs de saisie
• Liens

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

Bordures

Pour personnaliser les bordures, les styles de boutons, les champs de saisie et les coins des widgets, réglez le curseur ou choisissez parmi les options disponibles.

Option	Description
Largeur de la bordure du bouton	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 à l’intérieur des gadgets logiciels. Les options disponibles sont les suivantes : angles carrés, angles arrondis ou style en forme de pilule.
Rayon de la bordure du bouton	Ajuste les angles des boutons cliquables lorsque vous sélectionnez des angles arrondis.
Largeur de la bordure du champ de saisie	Ajuste la largeur des bordures des champs de saisie et des boutons cliquables à l’intérieur des invites de connexion.
Style des champs de saisie	Modifie la forme des champs de saisie à l’intérieur des invitations de connexion. Les options disponibles sont : coins carrés, coins arrondis ou style en forme de pilule.
Rayon de la bordure de saisie	Ajuste les coins des champs de saisie lorsque vous sélectionnez des coins arrondis.
Rayon de la bordure du gadget logiciel	Modifie la forme du gadget logiciel, en lui donnant des coins arrondis plutôt que carrés.
Largeur de la bordure du gadget logiciel	Ajuste la largeur de la bordure du gadget logiciel.
Ombre	Lorsque cette case est cochée, les gadgets logiciels auront une ombre.

Widget

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

Élément	Description
Position du logo	Choisissez l’emplacement du gadget logiciel à gauche, à droite ou au centre de la page. Vous pouvez également choisir de masquer le logo.
URL du logo	Saisissez l’emplacement de l’URL de votre logo personnalisé. Auth0 recommande les fichiers SVG.
Hauteur du logo	Ajustez la taille de votre logo en haut du gadget logiciel.
Alignement du texte de l’en-tête	Choisissez si le texte dans l’en-tête doit être justifié à gauche, à droite ou au centre.
Disposition des boutons sociaux	Choisissez si le texte doit être en haut ou en bas du bouton.

Arrière-plans de page

Ajoutez une URL d’image d’arrière-plan pour choisir un arrière-plan à afficher dans le widget d’invite. Le No-Code Editor (Éditeur sans code) prend en charge d’autres formats d’images tels que PNG et JPEG.

Auth0 recommande d’utiliser un format d’image JPEG d’une largeur minimale de 2000 px.

Ensuite, choisissez si le gadget logiciel est aligné au centre, à gauche ou à droite de l’écran.

​

Management API

Vous pouvez aussi personnaliser votre thème de connexion universelle avec Management API. Vous pouvez en particulier utiliser les points de terminaison d’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 donné
• Supprimer un thème d’image de marque
• Modifier le thème actuel