Authentification
Gérer les utilisateurs
Personnaliser
Auth0 AI
PlateformePour 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
- Dans Auth0 Dashboard, accédez à Branding > Universal Login > Customization Options.
- Sélectionnez un composant du thème (par exemple, Colors) dans le menu Styles. Personnalisez ensuite les options affichées à droite.
- Après avoir personnalisé votre thème, sélectionnez Save and Publish.
Composants du thème
Couleur
Couleur
Sélectionnez un champ de saisie pour modifier la couleur de l’élément. Pour choisir des couleurs précises, vous pouvez :
Une fois la modification effectuée, la fenêtre d’aperçu affiche plusieurs exemples de widgets avec les changements appliqués.
- 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. |
Polices
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
Bordures
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
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
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.Ensuite, choisissez si le widget s’aligne au centre, à gauche ou à droite de l’écran.
Auth0 recommande d’utiliser une image au format JPEG d’au moins 2000 px de large.