Skip to main content
Vous pouvez personnaliser les pages de en fournissant un modèle de page créé avec le langage de modèles Liquid. Avec les modèles de page, vous pouvez définir le contenu affiché autour des écrans de Universal Login, comme la boîte de connexion ou un défi . Comme le 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 image de marque pour les utilisateurs. Pour utiliser des modèles de page personnalisés, vous devez configurer un Custom Domain pour votre tenant. De plus, vous ne pouvez mettre à jour les modèles de page de 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 un défi MFA. Les variables et les exemples de code sur 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 assurer une personnalisation réussie, vérifiez que vous utilisez le terme approprié indiqué pour tout élément que vous ajoutez à votre code.

Exigences du modèle de page

Lorsque vous créez un modèle de page pour Universal Login, vous devez inclure les balises suivantes : Pour centrer le prompt sur la page, ajoutez class="_widget-auto-layout" à l’élément <body>. Vous pouvez omettre cet attribut pour positionner le prompt manuellement au besoin.
Limites du modèle de page :
  • Les noms de classe CSS changent chaque fois qu’Auth0 génère le projet. Toute feuille de style CSS personnalisée qui cible ces classes cessera de fonctionner à chaque nouvelle génération.
  • La structure HTML des pages Universal Login peut changer. Évitez les personnalisations qui reposent sur la structure HTML afin d’éviter toute interruption.
Pour en savoir plus, consultez la section Personnalisation CSS.
Exemple de gabarit :
L’exemple suivant présente 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> empêche le rendu, car elle ne peut pas interpréter correctement ces balises.  Pour contourner le problème, 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 la façon dont une page s’affiche. 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 images de marque nécessitant des mises en page différentes.
  • Afficher un contenu différent selon le prompt précis. Par exemple, vous pourriez vouloir ajouter de l’information sur ce que votre application offre sur la page de connexion, mais préférer que le flux MFA n’affiche que le prompt de défi MFA.
  • Ajouter un pied de page contenant des renseignements de soutien aux 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

Tenant

Organizations

Les variables suivantes font référence à la fonctionnalité Auth0 Organizations.

Tenant

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 Product Release Stages. Pour participer à ce programme, communiquez avec Auth0 soutien ou votre gestionnaire de compte technique.
Nous vous recommandons fortement de ne jamais utiliser de renseignements personnels identifiables (PII) ni d’autres renseignements sensibles comme valeur unique de correlation_id.

Domaine personnalisé

Les variables suivantes font référence au domaine personnalisé utilisé pour la session actuelle. Utilisez ces variables pour afficher un contenu différent selon le domaine personnalisé auquel l’utilisateur accède, 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 actuel

Prompts

Le terme prompt désigne une étape précise du flux de connexion. Un prompt donné peut comprendre un ou plusieurs écrans. Vous pouvez gérer les prompts dans l’Auth0 Dashboard ou au moyen des points de terminaison des prompts de la Management API. Les sections ci-dessous présentent les détails de chaque prompt disponible.

Écran : brute-force-protection-unblock

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

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

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

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

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

Écran : redeem-ticket

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

Écran : consentement

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 accept-invitation

Écran : login

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

Screen : login-id

login-id reference screenshot

É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 de login-email-verification

Écran : logout

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

Écran : mfa-detect-browser-capabilities

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

Écran : mfa-enroll-result

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

Écran : mfa-login-options

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

Écran : mfa-begin-enroll-options

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

mfa-country-codes reference screenshot

Écran : mfa-sms-enrollment

mfa-sms-enrollment reference screenshot

Écran : mfa-sms-challenge

capture d'écran de référence mfa-sms-challenge

Screen: mfa-sms-list

mfa-sms-list reference screenshot

É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

mfa-webauthn-enrollment reference screenshot

Écran : 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

É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

mfa-webauthn-enrollment-success reference screenshot

Écran : 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

reset-password-request reference screenshot

Écran : reset-password-email

reset-password-email reference screenshot

Écran : reset-password

reset-password reference screenshot

Écran : reset-password-success

reset-password-success reference screenshot

Écran : reset-password-error

reset-password-error reference screenshot

É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

Screen: 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

Screen: 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 de 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 de phone-identifier-enrollment

Écran : inscription

signup reference screenshot

É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 : statut

capture d’écran de référence du statut

Paramètres de requête personnalisés

Auth0 recommande de traiter les paramètres ext- comme non fiables, puisque ces valeurs peuvent provenir d’URL contrôlées par un attaquant. Suivez les étapes recommandées pour atténuer les risques de sécurité :
  • Utilisez des sorties HTML échappées dans les modèles
  • N’interpolez pas les valeurs ext- dans les blocs <script> ni dans les 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 en matière de sécurité, consultez Security Guidance.
Vous pouvez aussi utiliser des paramètres de requête dans le contexte en les transmettant à l’endpoint /authorize au moment d’amorcer la demande d’authentification. Ces paramètres de requête personnalisés doivent porter le préfixe ext-. L’exemple suivant utilise les paramètres de requête ext-ga et ext-test dans le modèle de la page de connexion :
Les paramètres de requête personnalisés sont soumis aux limites 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}$/

Prompts d’inscription personnalisés

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

Exemples

Boîte de connexion + image

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

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 :
Exemple de mise en page de la boîte Universal Login avec adresse courriel, 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 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 gabarit, vous devez utiliser le point de terminaison suivant : Pour supprimer le gabarit, vous devez utiliser le point de terminaison suivant : La taille maximale du modèle de page est de 100 Ko. Si cela ne suffit pas, 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 cessera de fonctionner à chaque nouvelle compilation.
  • La structure HTML des pages Universal Login est susceptible de changer. Évitez les personnalisations qui reposent sur cette structure afin de prévenir toute interruption.
Voici quelques éléments que vous pouvez personnaliser à l’aide de CSS :
  • Vous pouvez redimensionner le prompt 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, puis en remplaçant la variable CSS --font-family.
  • Vous pouvez masquer le logo du tenant en ajoutant class="_hide-prompt-logo" à l’élément <body>.
  • Vous pouvez définir un logo personnalisé en ajoutant class="_use-custom-prompt-logo" à l’élément <body>. Cela vous permettrait, par exemple, de changer le logo de la page de connexion selon l’application :
La mise en œuvre actuelle ne permet pas de personnalisation CSS supplémentaire. Si vous regardez le HTML généré, vous verrez du code 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 gabarits 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, puis voir un aperçu des changements dans la fenêtre de votre navigateur. Lorsque vous fermerez la fenêtre, il vous sera demandé si vous voulez enregistrer le gabarit. Si vous répondez Oui, le gabarit sera téléversé dans votre tenant.

Dépannage

Si le modèle de page 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.