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).
Composants de thème
Pour créer votre thème de connexion universelle, utilisez le menu Styles et ses différents composants :Couleur
Couleur
Sélectionnez un champ de saisie pour changer la couleur de l’élément. Pour choisir des couleurs spécifiques, vous pouvez :
Une fois que vous apportez une modification, la fenêtre de prévisualisation affiche plusieurs exemples des widgets avec vos modifications spécifiées.
- 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. |
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 à 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
Bordures
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
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
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.Ensuite, choisissez si le gadget logiciel est aligné au centre, à gauche ou à droite de l’écran.
Auth0 recommande d’utiliser un format d’image JPEG d’une largeur minimale de 2000 px.