Personnaliser les thèmes des 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 :
Dans Auth0 Dashboard, accédez à Branding (Image de marque) > Universal Login (Connexion universelle) > Customization Options (Options de personnalisation).
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.
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 :
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.
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.
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. |
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. |
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 :