Passer au contenu principal
Vous pouvez personnaliser les pages de connexion universelle en fournissant un modèle de page créé avec le langage de modèle Liquid. Avec les modèles de page, vous pouvez définir le contenu affiché autour des invites de connexion universelle, telles que la boîte de connexion ou un défi . Comme le même modèle de page est utilisé pour toutes les pages de flux de connexion, cette méthode de personnalisation vous permet de mettre en œuvre facilement une expérience cohérente et reflétant votre marque pour les utilisateurs. Pour utiliser des modèles de page personnalisés, vous devez configurer un Domaine personnalisé. En outre, vous ne pouvez mettre à jour les modèles de page de connexion universelle qu’avec la Management API.
Le terme prompt (invite) fait référence à une étape spécifique dans le flux de connexion, telle que la page d’inscription ou un défi MFA. Les variables et les exemples de code de cette page peuvent employer les termes prompt ou widget. Si ces termes sont synonymes dans le contexte de la connexion universelle, ils ne sont pas interchangeables dans votre code. Pour garantir le succès de la personnalisation, vérifiez que vous utilisez le terme approprié pour tous les éléments que vous ajoutez à votre code.

Exigences relatives aux modèles de page

Lorsque vous créez un modèle de page de connexion universelle, vous devez inclure les balises suivantes : Pour centrer l’invite sur la page, ajoutez class="_widget-auto-layout" à l’élément <body>. Vous pouvez omettre cet attribut pour positionner manuellement l’invite selon vos besoins.
Limitations des modèles de page :
  • Les noms des classes CSS changent à chaque fois qu’Auth0 génère le projet. Les CSS personnalisés qui ciblent ces classes ne fonctionneront pas à chaque nouvelle version.
  • La structure HTML des pages de Connexion universelle est sujette à des modifications. Évitez les personnalisations qui dépendent de la structure HTML pour prévenir toute interruption.
Pour en savoir plus, consultez Personnalisation CSS.
Exemple de modèle :
L’exemple suivant illustre le modèle de page de connexion universelle le plus simple que vous puissiez créer avec les balises requises :
Si vous utilisez Storybook pour afficher votre modèle, sachez que la balise <script>; interrompt le rendu, car elle ne peut pas analyser correctement ces balises. Pour contourner ce problème, utilisez des guillemets inversés (`) et le signe plus (+) pour injecter correctement la balise <script> dans le code de votre modèle.Exemple :<scr+ipt>console.log("test");</scr+ipt>

Variables des modèles de page

Les modèles de page prennent en charge diverses variables de contexte qui ont une incidence sur le rendu de la page. Par exemple, vous pouvez utiliser ces variables pour :
  • Rendre un contenu différent en fonction de l’application associée au flux de connexion. Par exemple, vous pouvez gérer deux marques qui nécessitent des page différentes.
  • Rendre un contenu différent en fonction d’une invite spécifique. Par exemple, vous pouvez vouloir ajouter des informations sur ce que votre application offre sur la page de connexion, mais préférer que le flux MFA n’affiche que l’invite de défi MFA.
  • Ajouter un pied de page contenant des informations sur l’assistance aux utilisateurs, telles que des liens vers votre page d’assistance ou des informations de contact.

Variables disponibles

Les modèles de page prennent en charge les variables suivantes :

Application

Image de marque

Locataire

Organisations

Les variables suivantes concernent la fonctionnalité Auth0 Organizations.

Informations de l’utilisateur actuel

Vous ne pouvez utiliser les variables suivantes que pour les pages qui s’affichent après l’authentification.

Informations sur l’écran actuel

Invites

Le terme invite fait référence à une étape spécifique du flux de connexion. Une invite spécifique peut consister en un ou plusieurs écrans. Vous pouvez gérer les invites par le biais du Auth0 Dashboard ou des points de terminaison des invites de la Management API. Les sections ci-dessous fournissent des détails sur chaque invite disponible.

Écran: redeem-ticket

capture d’écran de référence pour redeem-ticket (échanger un billet)
capture d’écran de référence pour le consentement

Écran: device-code-activation

capture d’écran de référence pour activation du code de l’appareil

Écran : device-code-activation-allowed

Capture d’écran de référence pour l’activation du code de l’appareil autorisée

Écran : device-code-activation-denied

Capture d’écran de référence de l’activation du code de l’appareil refusée

Écran: device-code-confirmation

Capture d’écran de référence de confirmation du code de l’appareil

Écran : email-otp-challenge

Capture d’écran de référence du défi OTP par courriel

Écran : email-verification-result

Capture d’écran de référence du résultat de la vérification par courriel

Écran : accepter- invitation.

Capture d’écran de référence accepter-invitation

Écran : login

capture d’écran de référence de la connexion

Écran : login-id

capture d’écran de référence pour connexion

Écran: login-password

capture d’écran de référence pour connexion

Écran : login-passwordless-email-code

capture d’écran de référence pour code de connexion par courriel sans mot de passe
Capture d’écran de référence du lien de connexion par courriel sans mot de passe

Écran : login-passwordless-sms-otp

Capture d’écran de référence OTP par SMS pour connexion sans mot de passe

Écran : login-email-verification

Capture d’écran de référence de vérification du courriel de connexion

Écran : logout

capture d’écran de référence pour déconnexion

Écran : mfa-detect-browser-capabilities

Capture d’écran de référence pour détection des capacités du navigateur pour MFA

Écran : mfa-enroll-result

Capture d’écran de référence du résultat de l’inscription MFA

Écran : mfa-login-options

Capture d’écran de référence de l’option de connexion MFA

Écran : mfa-begin-enroll-options

Capture d’écran de référence d’options de début d’inscription MFA

Écran : mfa-email-challenge

Capture d’écran de référence mfa-email-challenge

Écran : mfa-email-list

Capture d’écran de référence mfa-email-list

Écran : mfa-otp-enrollment-qr

Capture d’écran de référence mfa-otp-enrollment-qr

Écran : mfa-otp-enrollment-code

Capture d’écran de référence du code d’inscription mfa-otp

Écran : mfa-otp-challenge

Capture d’écran de référence mfa-otp-challenge

Écran : mfa-phone-challenge

Capture d’écran de référence mfa-phone-challenge

Écran : mfa-phone-enrollment

Capture d’écran de référence mfa-phone-enrollment

Écran : mfa-push-welcome

 capture d’écran de référence pour mfa-push-welcome

Écran : mfa-push-enrollment-qr

Écran de référence mfa-push-enrollment-qr

Écran : mfa-push-challenge-push

Capture d’écran de référence mfa-push-challenge-push

Écran : mfa-push-list

Capture d’écran de référence mfa-push-list

Écran : mfa-recovery-code-enrollment

Capture d’écran de référence de l’inscription au code de récupération MFA

Écran : mfa-recovery-code-challenge

Capture d’écran de référence du défi du code de récupération MFA

Écran : mfa-country-codes

Capture d’écran de référence mfa-country-codes

Écran : mfa-sms-enrollment

Capture d’écran de référence mfa-sms-enrollment

Écran : mfa-sms-challenge

Capture d’écran de référence mfa-sms-challenge

Écran : mfa-sms-list

Capture d’écran de référence mfa-sms-list

Écran : mfa-voice-enrollment

Capture d’écran de référence mfa-voice-enrollment

Écran : mfa-voice-challenge

Capture d’écran de référence mfa-voice-challenge

Écran : mfa-webauthn-platform-enrollment

Capture d’écran de référence mfa-webauthn-platform-enrollment

Écran : mfa-webauthn-roaming-enrollment

Capture d’écran de référence mfa-webauthn-guidance-enrollment

Écran : mfa-webauthn-platform-challenge

Capture d’écran de référence : mfa-webauthn-challenge-user-initiated

Écran : mfa-webauthn-roaming-challenge

Capture d’écran de référence mfa-webauthn-challenge-user-initiated

Écran: mfa-webauthn-change-key-nickname

Capture d’écran de référence mfa-webauthn-change-key-nickname

Écran : mfa-webauthn-enrollment-success

Capture d’écran de référence mfa-webauthn-enrollment-success

Écran : mfa-webauthn-error

Capture d’écran de référence mfa-webauthn-error

Écran : mfa-webauthn-not-available-error

Capture d’écran de référence mfa-webauthn-not-available-error

Écran : organization-selection

capture d’écran de référence pour la sélection d’organisation

Écran : organization-picker

Capture d’écran de référence sélectionneur d’organisation

Écran :Demande de réinitialisation du mot de passe

capture d’écran de référence pour demande de réinitialisation du mot de passe

Écran : courriel de réinitialisation du mot de passe

Capture d’écran de référence du courriel de réinitialisation du mot de passe

Écran : réinitialisation du mot de passe

Capture d’écran de référence de réinitialisation du mot de passe

Écran : réinitialisation du mot de passe réussie

capture d’écran de référence de réinitialisation du mot de passe réussie

Écran : erreur de réinitialisation du mot de passe

capture d’écran de référence d’erreur de réinitialisation du mot de passe

Écran : Défi d’authentification par courriel pour la réinitialisation du mot de passe

Capture d’écran de référence du défi d’authentification par courriel pour la réinitialisation du mot de passe

Écran : Défi d’authentification à mot de passe à usage unique pour la réinitialisation du mot de passe

Capture d’écran de référence du défi d’authentification à mot de passe à usage unique pour la réinitialisation du mot de passe

Écran : Défi d’authentification par téléphone pour la réinitialisation du mot de passe

Capture d’écran de référence du défi d’authentification par téléphone pour la réinitialisation du mot de passe

Écran : reset-password-mfa-push-challenge-push

Capture d’écran de référence reset-password-mfa-push-challenge-push

Écran : reset-password-mfa-recovery-code-challenge

capture d’écran de référence reset-password-mfa-recovery-code-challenge

Écran : reset-password-mfa-sms-challenge

Capture d’écran de référence reset-password-mfa-sms-challenge

Écran : reset-password-mfa-voice-challenge

Capture d’écran reset-password-mfa-voice-challenge

Écran : reset-password-mfa-webauthn-platform-challenge

Capture d’écran de référence reset-password-mfa-webauthn-platform-challenge

Écran : reset-password-mfa-webauthn-roaming-challenge

Capture d’écran reset-password-mfa-webauthn-roaming-challenge

Écran : passkey-enrollment

capture d’écran de référence pour l’inscription - clé d’identification

Écran : passkey-enrollment-local

Capture d’écran de référence clé d’identification-inscription-locale

Écran : phone-identifier-challenge

Capture d'écran de référence pour le défi d'identification par téléphone

Écran : phone-identifier-enrollment

Capture d'écran de référence de l'inscription de l'identifiant téléphonique

Écran : signup

capture d’écran de référence pour inscription

Écran : signup-id

capture d’écran de référence pour signup-id

Écran : signup-password

capture d’écran de référence d’inscription-mot de passe

Screen: status

status reference screenshot

Screen: brute-force-protection-unblock

brute-force-protection-unblock reference screenshot

Screen: brute-force-protection-unblock-success

brute-force-protection-unblock-success reference screenshot

Screen: brute-force-protection-unblock-failure

brute-force-protection-unblock-failure reference screenshot

Paramètres de requête personnalisés

Vous pouvez également utiliser des paramètres de requête dans le contexte en les transmettant au point de terminaison /authorize lors du lancement de la demande d’authentification. Ces paramètres de requête personnalisés doivent avoir le préfixe ext-. L’exemple suivant utilise les paramètres de requête ext-ga et ext-test dans le modèle de page de connexion :
Les paramètres de requête personnalisés sont soumis aux limitations suivantes :
  • Chaque nom de paramètre ext- doit être unique.
  • Une demande d’autorisation peut contenir un maximum de dix paramètres ext-.
  • Le nom du paramètre ext- doit commencer par ext-, contenir uniquement [a-zA-z0-9_-] et comporter un maximum de 28 caractères, comme suit : /^ext-[\w-]{1,28}$/
  • La valeur du paramètre ext- doit contenir uniquement [a-zA-Z0-9-.*~@+ /:], et comporter un maximum de 255 caractères, comme dans les cas suivants : /^[-\w.*~@+ /:]{1,255}$/

Invites personnalisées à l’inscription

Si vous utilisez des invites d’inscription personnalisées, vous devez activer les modèles de page personnalisés. Le modèle suivant est le modèle minimum qui permet aux invites d’inscription personnalisées de s’afficher :
Pour en savoir plus, consultez Personnaliser les invites d’inscription et de connexion.

Exemples

Boîte de connexion + mise en page de l’image

Le modèle suivant affiche la boîte de connexion à gauche et une image à droite uniquement pour les pages de connexion et d’inscription. Les autres pages ressembleront aux pages par défaut.
Boîte Universal Login (Connexion universelle) et exemple de présentation d’adresse électronique/mot de passe et pieds de page

Pieds de page

L’exemple ci-dessous ajoute un pied de page gris avec des liens vers la politique de confidentialité et les conditions d’utilisation : Pour définir le modèle de page, vous devez utiliser . Vous deve](/docs/images/obtenir un jeton de Management API avec les permissions update:branding, read:branding, delete:branding. Si vous utilisez l’application API Explorer (Explorateur d’API) pour générer des jetons, assurez-vous que ces permissions sont activées pour la Management API Auth0.
Boîte Universal Login (Connexion universelle) et exemple de présentation d’adresse électronique/mot de passe et pieds de page

Modèles de page API

Pour définir le modèle de page, vous devez utiliser la Management API. Vous devez d’abord obtenir un jeton de la Management API avec les permissions update:branding, read:branding, delete:branding. Si vous utilisez l’application API Explorer (Explorateur d’API) pour générer des jetons, assurez-vous que ces permissions sont activées pour la Management API Auth0. Pour définir le modèle, vous devez utiliser le point de terminaison suivant : Pour récupérer le modèle, vous devez utiliser le point de terminaison suivant : Pour supprimer le modèle, vous devez utiliser le point de terminaison suivant : La taille maximale du modèle de page est de 100 Ko. Si cette taille n’est pas suffisante, envisagez de déplacer les fichiers images/css en dehors du code du modèle de page.

Personnalisation CSS

Limitations des modèles de page :
  • Les noms des classes CSS changent à chaque fois qu’Auth0 génère le projet. Les CSS personnalisés qui ciblent ces classes ne fonctionneront pas à chaque nouvelle version.
  • La structure HTML des pages de Connexion universelle est sujette à des modifications. Évitez les personnalisations qui dépendent de la structure HTML pour prévenir toute interruption.
Il y a quelques éléments que vous pouvez personnaliser à l’aide du CSS :
  • Vous pouvez redimensionner l’invite de connexion en insérant les variables ci-dessous dans les balises <style> de l’élément <head>.
    • Utilisez --prompt-width pour régler la largeur du conteneur. Sa valeur par défaut est de 400 px.
    • Pour les formulaires : Utilisez --form-max-width pour définir la largeur maximale du formulaire. Sa valeur par défaut est de 500 px.
      • Pour appliquer votre code à la page de formulaire uniquement, incluez {% if prompt.name == "custom-form" %} in the <head> element.
  • Vous pouvez utiliser une police Google en l’important et en écrasant la variable CSS --font-family.
  • Vous pouvez masquer le logo du locataire en ajoutant class="_hide-prompt-logo" dans l’élément <body>.
  • Vous pouvez spécifier un logo personnalisé en ajoutant class="_use-custom-prompt-logo" dans l’élément <body>. Cela vous permet, par exemple, de modifier le logo de la page de connexion en fonction de l’application :
La mise en œuvre actuelle ne permet pas de personnaliser davantage les feuilles de style CSS. Le code HTML généré ressemble à celui-ci :

Utilisation de l’interface de ligne de commande Auth0

Vous pouvez utiliser l’interface de ligne de commande Auth0 pour facilement mettre à jour les modèles de page. Dans l’interface de ligne de commande Auth0, exécutez : auth0 universal-login customize L’interface de ligne de commande Auth0 ouvrira deux fenêtres :
  • Une fenêtre de navigateur avec un Storybook qui montre la page de connexion avec le modèle de page appliqué :
Page Templates Storybook
  • L’éditeur par défaut, avec le code du modèle de page :
undefined
Vous pouvez maintenant modifier le code du modèle de page, et vous pourrez prévisualiser les modifications dans la fenêtre de votre navigateur. Une fois que vous aurez fermé la fenêtre, il vous sera demandé si vous souhaitez enregistrer le modèle. Si vous répondez Oui, le modèle sera téléchargé vers votre locataire.

Dépannage

Si le modèle n’est pas appliqué, vérifiez que vous naviguez vers {customDomain}/authorize. Si vous naviguez vers {yourDomain}/authorize, Auth0 ne rendra pas le modèle de page.](/docs/images/](/docs/images/