Skip to main content
Vous pouvez personnaliser les pages de en fournissant un modèle de page créé avec le langage de gabarits Liquid. Avec les modèles de page, vous pouvez définir le contenu affiché autour des invites d’Universal Login, comme la boîte de connexion ou une demande de . Puisqu’un même modèle de page est utilisé pour toutes les pages du flux de connexion, cette méthode de personnalisation vous permet de créer facilement une expérience cohérente et fidèle à votre marque pour les utilisateurs. Pour utiliser des modèles de page personnalisés, vous devez configurer un domaine personnalisé pour votre locataire. De plus, vous ne pouvez mettre à jour les modèles de page d’Universal Login qu’avec la Management API.
Le terme prompt désigne une étape précise du flux de connexion, comme la page d’inscription ou une demande MFA. Les variables et les exemples de code de cette page peuvent utiliser le terme prompt ou le terme widget. Bien que ces termes soient synonymes dans le contexte d’Universal Login, ils ne sont pas interchangeables dans votre code.  Pour que la personnalisation fonctionne correctement, vérifiez que vous utilisez le terme approprié indiqué pour tous les éléments que vous ajoutez à votre code.

Exigences relatives au modèle de page

Lorsque vous créez un modèle de page pour Universal Login, 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 l’invite manuellement au besoin.
Limites du modèle de page :
  • Les noms de classe CSS changent chaque fois qu’Auth0 compile le projet. Le CSS personnalisé qui cible ces classes cessera de fonctionner à chaque nouvelle compilation.
  • La structure HTML des pages Universal Login peut changer. Évitez les personnalisations qui dépendent de la structure HTML afin d’éviter toute interruption.
Pour en savoir plus, consultez la personnalisation CSS.
Exemple de modèle :
L’exemple suivant illustre le modèle de page Universal Login 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> perturbe le rendu, car Storybook ne peut pas interpréter correctement ces balises.  Comme solution de contournement, utilisez les caractères accent grave (`) et signe plus (+) pour injecter correctement la balise <script> dans le code de votre modèle.Exemple :<scr`+`ipt>console.log("test");</scr`+`ipt>

Variables de modèle de page

Les modèles de page prennent en charge diverses variables de contexte qui influencent le rendu d’une page. Par exemple, vous pouvez utiliser ces variables pour :
  • Afficher un contenu différent selon l’application associée au flux de connexion. Par exemple, vous pourriez gérer deux marques qui nécessitent des mises en page différentes.
  • Afficher un contenu différent selon l’invite précise. Par exemple, vous pourriez vouloir ajouter de l’information sur ce qu’offre votre application sur la page de connexion, mais préférer que le flux MFA n’affiche que l’invite de vérification MFA.
  • Ajouter un pied de page contenant de l’information de soutien pour les utilisateurs, comme des liens vers votre page de soutien ou vos coordonnées.

Variables disponibles

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

Application

Image de marque

Locataire

Organisations

Les variables suivantes font référence à la fonctionnalité Organisations d’Auth0.

Locataire

Suivi

L’ID de corrélation est actuellement en accès anticipé. En utilisant cette fonctionnalité, vous acceptez les conditions applicables de l’essai gratuit énoncées dans le Master Subscription Agreement d’Okta. Pour en savoir plus sur le cycle de publication des produits d’Auth0, consultez les étapes de publication des produits. Pour participer à ce programme, communiquez avec l’assistance Auth0 ou votre chargé de compte technique.
Nous vous recommandons fortement de ne jamais utiliser de renseignements personnels identifiables (PII) ni d’autres renseignements sensibles comme identifiant correlation_id unique.

Domaine personnalisé

Les variables suivantes font référence au domaine personnalisé utilisé pour la session en cours. Utilisez ces variables pour afficher un contenu différent selon le domaine personnalisé utilisé par l’utilisateur, ou pour récupérer les métadonnées du domaine configurées pour ce domaine.

Informations sur l’utilisateur actuel

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

Informations sur l’écran en cours

Invites

Le terme prompt désigne une étape précise du flux de connexion. Une invite donnée peut comprendre un ou plusieurs écrans. Vous pouvez gérer les invites dans le Auth0 Dashboard ou au moyen des points de terminaison des invites de la Management API. Les sections ci-dessous fournissent des détails sur chaque invite disponible.

Écran : brute-force-protection-unblock

capture d’écran de référence brute-force-protection-unblock

Écran : brute-force-protection-unblock-success

capture d’écran de référence brute-force-protection-unblock-success

Écran : brute-force-protection-unblock-failure

capture d’écran de référence brute-force-protection-unblock-failure

Écran : redeem-ticket

capture d’écran de référence redeem-ticket
capture d’écran de référence du consentement

Écran : device-code-activation

capture d’écran de référence device-code-activation

Écran : device-code-activation-allowed

capture d’écran de référence device-code-activation-allowed

Écran : device-code-activation-denied

capture d’écran de référence device-code-activation-denied

Écran : device-code-confirmation

capture d’écran de référence device-code-confirmation

Écran : email-otp-challenge

capture d’écran de référence email-otp-challenge

Écran : email-verification-result

capture d’écran de référence de email-verification-result

Écran : accept-invitation

capture d’écran de référence de l’écran accept-invitation

Écran : login

capture d’écran de référence de login

Écran : login-id

Capture d'écran de référence login-id

Écran : login-password

capture d’écran de référence login-password

Écran: login-passwordless-email-code

capture d’écran de référence login-passwordless-email-code
capture d’écran de référence login-passwordless-email-link

Écran: login-passwordless-sms-otp

capture d’écran de référence login-passwordless-sms-otp

Écran : login-email-verification

capture d’écran de référence login-email-verification

Écran : logout

capture d’écran de référence logout

Écran : mfa-detect-browser-capabilities

capture d’écran de référence de mfa-detect-browser-capabilities

Écran : mfa-enroll-result

capture d’écran de référence de mfa-enroll-result

Écran : mfa-login-options

capture d’écran de référence de mfa-login-options

Écran : mfa-begin-enroll-options

capture d’écran de référence de mfa-begin-enroll-options

É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 mfa-otp-enrollment-code

É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 mfa-push-welcome

Écran : mfa-push-enrollment-qr

capture d’é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 mfa-recovery-code-enrollment

Écran : mfa-recovery-code-challenge

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

É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 pour mfa-sms-enrollment

Écran : mfa-sms-challenge

capture d’écran de référence de 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 de mfa-voice-enrollment

Écran : mfa-voice-challenge

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

Screen: mfa-webauthn-platform-enrollment

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

Screen: mfa-webauthn-roaming-enrollment

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

Screen: mfa-webauthn-platform-challenge

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

Screen: mfa-webauthn-roaming-challenge

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

Screen: mfa-webauthn-change-key-nickname

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

Screen: mfa-webauthn-enrollment-success

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

Screen: mfa-webauthn-error

mfa-webauthn-error reference screenshot

Screen: mfa-webauthn-not-available-error

mfa-webauthn-not-available-error reference screenshot

Écran : organization-selection

capture d’écran de référence organization-selection

Écran : organization-picker

capture d’écran de référence organization-picker

Écran : reset-password-request

Capture d'écran de référence reset-password-request

Écran : reset-password-email

Capture d'écran de référence reset-password-email

Écran : reset-password

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

Écran : reset-password-success

Capture d'écran de référence reset-password-success

Écran : reset-password-error

Capture d'écran de référence reset-password-error

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

reset-password-mfa-email-challenge reference screenshot

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

reset-password-mfa-otp-challenge reference screenshot

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

reset-password-mfa-phone-challenge reference screenshot

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

reset-password-mfa-push-challenge-push reference screenshot

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

reset-password-mfa-recovery-code-challenge reference screenshot

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

reset-password-mfa-sms-challenge reference screenshot

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

reset-password-mfa-voice-challenge reference screenshot

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

reset-password-mfa-webauthn-platform-challenge reference screenshot

Screen: reset-password-mfa-webauthn-roaming-challenge

reset-password-mfa-webauthn-roaming-challenge reference screenshot

Écran : passkey-enrollment

capture d’écran de référence passkey-enrollment

Écran : passkey-enrollment-local

capture d’écran de référence pour passkey-enrollment-local

Écran : phone-identifier-challenge

capture d’écran de référence phone-identifier-challenge

Écran : phone-identifier-enrollment

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

Écran : signup

capture d'écran de référence pour l'inscription

Écran : signup-id

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

Écran : signup-password

Capture d'écran de référence signup-password

Écran : état

capture d’écran de référence de l’état

Paramètres de requête personnalisés

Auth0 recommande de traiter les paramètres ext- comme non fiables, car ces valeurs peuvent provenir d’entrées d’URL contrôlées par un attaquant. Suivez les étapes recommandées pour atténuer les risques de sécurité :
  • Utilisez des sorties avec échappement HTML dans les modèles
  • N’interpolez pas les valeurs ext- dans des blocs <script> ni dans des attributs de gestionnaire d’événements
  • Validez les schémas JavaScript ou de données avant d’utiliser ces valeurs dans des URL
Notez que la liste de caractères autorisés n’élimine pas tous les risques de XSS dans tous les contextes de rendu. Pour en savoir plus sur les directives et recommandations de sécurité, consultez Security Guidance.
Vous pouvez aussi utiliser des paramètres de requête dans le contexte en les transmettant au point de terminaison /authorize lors de l’initialisation de la requête 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 requête d’autorisation peut contenir au maximum dix paramètres ext-
  • Le nom du paramètre ext- doit commencer par ext-, contenir uniquement [a-zA-z0-9_-] et comporter au maximum 28 caractères, comme dans l’exemple suivant : /^ext-[\w-]{1,28}$/
  • La valeur du paramètre ext- doit contenir uniquement [a-zA-Z0-9-.*~@+ /:_] et comporter au maximum 255 caractères, comme dans l’exemple suivant : /^[-\w.*~@+ /:]{1,255}$/

Invites d’inscription personnalisées

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

Exemples

Mise en page avec boîte de connexion + image

Le modèle suivant affiche la boîte de connexion à gauche et une image à droite, uniquement sur les pages de connexion et d’inscription. Les autres pages conserveront l’apparence par défaut.
Exemple de disposition d’une boîte Universal Login avec courriel, nom d’utilisateur/mot de passe et image

Pieds de page

L’exemple ci-dessous ajoute un pied de page gris contenant des liens vers la Politique de confidentialité et les Conditions d’utilisation :
Exemple de mise en page de la boîte Universal Login avec champs de courriel et de mot de passe, et pieds de page

API des modèles de page

Pour définir le modèle de page, vous devez utiliser la . Vous devez d’abord obtenir un jeton de la Management API avec les scopes update:branding, read:branding, delete:branding. Si vous utilisez l’API Explorer Application pour générer des jetons, assurez-vous que ces scopes sont activés pour l’Auth0 Management API. Pour définir le modèle, vous devez utiliser le point de terminaison suivant : Pour récupérer le modèle, utilisez le point de terminaison suivant : Pour supprimer le modèle, utilisez le point de terminaison suivant : La taille maximale du modèle de page est de 100 KB. Si ce n’est pas suffisant, envisagez de déplacer les images et les fichiers CSS à l’extérieur du code du modèle de page.

Personnalisation CSS

Limites du modèle de page :
  • Les noms de classe CSS changent chaque fois qu’Auth0 génère le projet. Le CSS personnalisé qui cible ces classes ne fonctionnera plus à chaque nouvelle compilation.
  • La structure HTML des pages Universal Login peut changer. Évitez les personnalisations qui reposent sur la structure HTML afin de prévenir toute interruption.
Vous pouvez personnaliser certains éléments à l’aide de CSS :
  • Vous pouvez redimensionner l’invite de connexion en plaçant les variables ci-dessous dans des balises <style> de l’élément <head>.
    • Utilisez --prompt-width pour ajuster la largeur du conteneur. Sa valeur par défaut est de 400px.
    • Pour Forms : utilisez --form-max-width pour définir la largeur maximale du formulaire. Sa valeur par défaut est de 500px.
      • Pour appliquer votre code uniquement à la page Form, incluez {% if prompt.name == "custom-form" %} dans l’élément <head>.
  • Vous pouvez utiliser une police Google en l’important et en remplaçant 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 définir un logo personnalisé en ajoutant class="_use-custom-prompt-logo" dans l’élément <body>. Cela vous permettrait, par exemple, de modifier le logo de la page de connexion selon l’application :
L’implémentation actuelle ne permet pas de personnalisation CSS supplémentaire. Si vous examinez le code HTML généré, vous verrez quelque chose comme :

Utiliser l’Auth0 CLI

Vous pouvez utiliser l’Auth0 CLI pour mettre à jour facilement les modèles de page. Dans l’Auth0 CLI, exécutez : auth0 universal-login customize L’Auth0 CLI ouvrira deux fenêtres :
  • Une fenêtre de navigateur contenant un Storybook qui affiche la page de connexion avec le modèle de page appliqué :
Storybook des modèles de page
  • 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 voir les changements dans la fenêtre de votre navigateur. Une fois la fenêtre fermée, il vous sera demandé si vous voulez enregistrer le modèle. Si vous répondez Oui, le modèle sera téléversé vers votre locataire.

Dépannage

Si le modèle n’est pas appliqué, assurez-vous d’accéder à {customDomain}/authorize. Si vous accédez à {yourDomain}/authorize, Auth0 n’affichera pas le modèle de page.