Skip to main content
Puede personalizar las páginas de proporcionando una plantilla de página creada con el lenguaje de plantillas Liquid. Con las plantillas de página, puede definir el contenido que se muestra alrededor de las pantallas de Universal Login, como el cuadro de inicio de sesión o una solicitud de . Como la misma plantilla de página se usa para todas las páginas del flujo de inicio de sesión, este método de personalización le permite implementar fácilmente una experiencia coherente y acorde con su marca para los usuarios. Para usar plantillas de página personalizadas, debe configurar un dominio personalizado para su inquilino. Además, solo puede actualizar las plantillas de página de Universal Login con la Management API.
El término prompt se refiere a un paso específico del flujo de inicio de sesión, como la página de registro o una solicitud de MFA. Las variables y los ejemplos de código de esta página pueden usar el término prompt o el término widget. Aunque estos términos son sinónimos en el contexto de Universal Login, no son intercambiables en el código.  Para garantizar una personalización correcta, verifique que esté usando el término adecuado indicado para cualquier elemento que agregue a su código.

Requisitos de la plantilla de página

Al crear una plantilla de página de Universal Login, debes incluir las siguientes etiquetas: Para centrar la pantalla en la página, agrega class="_widget-auto-layout" al elemento <body>. Puedes omitir este atributo para colocar la pantalla manualmente según lo necesites.
Limitaciones de la plantilla de página:
  • Los nombres de clase de CSS cambian cada vez que Auth0 compila el proyecto. El CSS personalizado que apunta a estas clases dejará de funcionar con cada nueva compilación.
  • La estructura HTML de las páginas de Universal Login está sujeta a cambios. Evita las personalizaciones que dependan de la estructura HTML para prevenir interrupciones.
Para obtener más información, consulta Personalización de CSS.
Plantilla de ejemplo:
El siguiente ejemplo muestra la plantilla de página de Universal Login más sencilla que puede crear con las etiquetas requeridas:
Si usas Storybook para ver tu plantilla, ten en cuenta que la etiqueta <script> rompe la renderización, ya que no puede interpretar estas etiquetas correctamente. Como solución temporal, usa comillas invertidas (`) y el signo más (+) para insertar correctamente la etiqueta <script> en el código de tu plantilla.Ejemplo:<scr`+`ipt>console.log("test");</scr`+`ipt>

Variables de plantilla de página

Las plantillas de página admiten diversas variables de contexto que influyen en cómo se muestra una página. Por ejemplo, puede usar estas variables para:
  • Mostrar contenido diferente según la aplicación asociada al flujo de inicio de sesión. Por ejemplo, puede administrar dos marcas que requieran diseños de página distintos.
  • Mostrar contenido diferente según la pantalla específica. Por ejemplo, puede que quiera añadir información sobre lo que ofrece su aplicación en la página de inicio de sesión, pero que prefiera que el flujo de MFA solo muestre la pantalla de desafío de MFA.
  • Añadir un pie de página con información de soporte para el usuario, como enlaces a su página de soporte o información de contacto.

Variables disponibles

Las plantillas de página admiten las siguientes variables:

Aplicación

Marca

Tenant

Organizaciones

Las siguientes variables hacen referencia a la característica Auth0 Organizations.

Tenant

Seguimiento

El ID de correlación se encuentra actualmente en acceso anticipado. Al usar esta función, acepta los términos aplicables de la prueba gratuita del Master Subscription Agreement de Okta. Para obtener más información sobre el ciclo de lanzamientos de productos de Auth0, consulte Etapas de lanzamiento del producto. Para participar en este programa, póngase en contacto con Soporte de Auth0 o con su gerente técnico de cuenta.
Le recomendamos encarecidamente que no use nunca información de identificación personal (PII) ni ningún otro dato sensible como correlation_id único.

Dominio personalizado

Las siguientes variables hacen referencia al dominio personalizado usado para la sesión actual. Use estas variables para mostrar contenido diferente según el dominio personalizado al que acceda el usuario, o para recuperar los metadatos del dominio configurados para ese dominio.

Información del usuario actual

Solo puede usar las siguientes variables en páginas que se muestran después de la autenticación.

Información de la pantalla actual

Pantallas

El término prompt hace referencia a un paso específico del flujo de inicio de sesión. Un prompt concreto puede constar de una o más pantallas. Puede gestionar las pantallas a través del Auth0 Dashboard o de los endpoints de pantallas de la Management API. Las siguientes secciones proporcionan detalles sobre cada pantalla disponible.

Pantalla: brute-force-protection-unblock

captura de pantalla de referencia de brute-force-protection-unblock

Pantalla: brute-force-protection-unblock-success

captura de pantalla de referencia de brute-force-protection-unblock-success

Pantalla: brute-force-protection-unblock-failure

captura de pantalla de referencia de brute-force-protection-unblock-failure

Pantalla: redeem-ticket

captura de pantalla de referencia de redeem-ticket

Pantalla: device-code-activation

captura de pantalla de referencia de device-code-activation

Pantalla: device-code-activation-allowed

captura de pantalla de referencia de device-code-activation-allowed

Pantalla: device-code-activation-denied

captura de pantalla de referencia de device-code-activation-denied

Pantalla: device-code-confirmation

captura de pantalla de referencia de device-code-confirmation

Pantalla: email-otp-challenge

captura de pantalla de referencia de email-otp-challenge

Pantalla: email-verification-result

captura de pantalla de referencia de email-verification-result

Pantalla: accept-invitation

captura de pantalla de referencia de accept-invitation

Pantalla: login

captura de pantalla de referencia de login

Pantalla: login-id

captura de pantalla de referencia de login-id

Pantalla: login-password

captura de pantalla de referencia de login-password

Pantalla: login-passwordless-email-code

captura de pantalla de referencia de login-passwordless-email-code
captura de pantalla de referencia de login-passwordless-email-link

Pantalla: login-passwordless-sms-otp

captura de pantalla de referencia de login-passwordless-sms-otp

Pantalla: login-email-verification

captura de pantalla de referencia de login-email-verification

Pantalla: logout

captura de pantalla de referencia de logout

Pantalla: mfa-detect-browser-capabilities

captura de pantalla de referencia de mfa-detect-browser-capabilities

Pantalla: mfa-enroll-result

captura de pantalla de referencia de mfa-enroll-result

Pantalla: mfa-login-options

captura de pantalla de referencia de mfa-login-options

Pantalla: mfa-begin-enroll-options

captura de pantalla de referencia de mfa-begin-enroll-options

Pantalla: mfa-email-challenge

captura de pantalla de referencia de mfa-email-challenge

Pantalla: mfa-email-list

captura de pantalla de referencia de mfa-email-list

Pantalla: mfa-otp-enrollment-qr

captura de pantalla de referencia de mfa-otp-enrollment-qr

Pantalla: mfa-otp-enrollment-code

captura de pantalla de referencia de mfa-otp-enrollment-code

Pantalla: mfa-otp-challenge

captura de pantalla de referencia de mfa-otp-challenge

Pantalla: mfa-phone-challenge

captura de pantalla de referencia de mfa-phone-challenge

Pantalla: mfa-phone-enrollment

captura de pantalla de referencia de mfa-phone-enrollment

Pantalla: mfa-push-welcome

captura de pantalla de referencia de mfa-push-welcome

Pantalla: mfa-push-enrollment-qr

captura de pantalla de referencia de mfa-push-enrollment-qr

Pantalla: mfa-push-challenge-push

captura de pantalla de referencia de mfa-push-challenge-push

Pantalla: mfa-push-list

captura de pantalla de referencia de mfa-push-list

Pantalla: mfa-recovery-code-enrollment

captura de pantalla de referencia de mfa-recovery-code-enrollment

Pantalla: mfa-recovery-code-challenge

captura de pantalla de referencia de mfa-recovery-code-challenge

Pantalla: mfa-country-codes

Captura de pantalla de referencia de mfa-country-codes

Pantalla: mfa-sms-enrollment

Captura de pantalla de referencia de mfa-sms-enrollment

Pantalla: mfa-sms-challenge

Captura de pantalla de referencia de mfa-sms-challenge

Pantalla: mfa-sms-list

mfa-sms-list reference screenshot

Pantalla: mfa-voice-enrollment

captura de pantalla de referencia de mfa-voice-enrollment

Pantalla: mfa-voice-challenge

captura de pantalla de referencia de mfa-voice-challenge

Pantalla: mfa-webauthn-platform-enrollment

Captura de pantalla de referencia de mfa-webauthn-enrollment

Pantalla: mfa-webauthn-roaming-enrollment

captura de pantalla de referencia de mfa-webauthn-guidance-enrollment

Pantalla: mfa-webauthn-platform-challenge

captura de pantalla de referencia de mfa-webauthn-challenge-user-initiated

Pantalla: mfa-webauthn-roaming-challenge

captura de pantalla de referencia de mfa-webauthn-challenge-user-initiated

Screen: mfa-webauthn-change-key-nickname

Captura de pantalla de referencia de mfa-webauthn-change-key-nickname

Screen: mfa-webauthn-enrollment-success

Captura de pantalla de referencia de mfa-webauthn-enrollment-success

Pantalla: mfa-webauthn-error

mfa-webauthn-error reference screenshot

Pantalla: mfa-webauthn-not-available-error

mfa-webauthn-not-available-error reference screenshot

Pantalla: organization-selection

captura de pantalla de referencia de organization-selection

Pantalla: organization-picker

captura de pantalla de referencia de organization-picker

Pantalla: reset-password-request

reset-password-request reference screenshot

Pantalla: reset-password-email

Captura de pantalla de referencia de reset-password-email

Pantalla: reset-password

captura de pantalla de referencia de reset-password

Pantalla: reset-password-success

reset-password-success reference screenshot

Pantalla: reset-password-error

reset-password-error reference screenshot

Pantalla: reset-password-mfa-email-challenge

captura de referencia de reset-password-mfa-email-challenge

Pantalla: reset-password-mfa-otp-challenge

reset-password-mfa-otp-challenge reference screenshot

Pantalla: reset-password-mfa-phone-challenge

Captura de pantalla de referencia de reset-password-mfa-phone-challenge

Pantalla: reset-password-mfa-push-challenge-push

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

Pantalla: reset-password-mfa-recovery-code-challenge

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

Pantalla: reset-password-mfa-sms-challenge

reset-password-mfa-sms-challenge reference screenshot

Pantalla: reset-password-mfa-voice-challenge

Captura de pantalla de referencia de reset-password-mfa-voice-challenge

Pantalla: reset-password-mfa-webauthn-platform-challenge

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

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

Captura de pantalla de referencia de reset-password-mfa-webauthn-roaming-challenge

Pantalla: passkey-enrollment

captura de pantalla de referencia de passkey-enrollment

Pantalla: passkey-enrollment-local

captura de pantalla de referencia de passkey-enrollment-local

Pantalla: phone-identifier-challenge

captura de pantalla de referencia de phone-identifier-challenge

Pantalla: phone-identifier-enrollment

captura de pantalla de referencia de phone-identifier-enrollment

Pantalla: signup

signup reference screenshot

Pantalla: signup-id

captura de pantalla de referencia de signup-id

Pantalla: signup-password

signup-password reference screenshot

Pantalla: estado

captura de pantalla de referencia de estado

Parámetros de consulta personalizados

Auth0 recomienda que trates los parámetros ext- como no confiables, ya que estos valores pueden ser entradas de URL controladas por atacantes. Debes seguir los pasos recomendados para mitigar los riesgos de seguridad:
  • Usa salidas con escape de HTML en las plantillas
  • No interpoles valores ext- en bloques <script> ni en atributos de controladores de eventos
  • Valida los esquemas javascript: o data: antes de usar estos valores en URL
Ten en cuenta que la lista de caracteres permitidos no elimina por completo el riesgo de XSS en todos los contextos de renderizado. Para obtener más información sobre las directrices y recomendaciones de seguridad, consulta Security Guidance.
También puedes usar parámetros de consulta dentro del contexto si los pasas al endpoint /authorize al iniciar la solicitud de autenticación. Estos parámetros de consulta personalizados deben tener el prefijo ext-. El siguiente ejemplo usa los parámetros de consulta ext-ga y ext-test en la plantilla de la página de inicio de sesión:
Los parámetros de consulta personalizados tienen las siguientes limitaciones:
  • Cada nombre de parámetro ext- debe ser único
  • Una solicitud de autorización puede contener como máximo diez parámetros ext-
  • El nombre del parámetro ext- debe comenzar con ext-, contener solo [a-zA-z0-9_-] y tener un máximo de 28 caracteres, como en el siguiente ejemplo: /^ext-[\w-]{1,28}$/
  • El valor del parámetro ext- debe contener solo [a-zA-Z0-9-.*~@+ /:_] y tener un máximo de 255 caracteres, como en el siguiente ejemplo: /^[-\w.*~@+ /:]{1,255}$/

Pantallas de registro personalizadas

Si usa pantallas de registro personalizadas, debe habilitar las plantillas de página personalizadas. A continuación se muestra la plantilla mínima que permite renderizar las pantallas de registro personalizadas:
Para obtener más información, consulte Personalizar las pantallas de registro e inicio de sesión.

Ejemplos

Diseño con cuadro de inicio de sesión + imagen

La siguiente plantilla mostrará el cuadro de inicio de sesión a la izquierda y una imagen a la derecha solo en las páginas de inicio de sesión/registro. El resto de las páginas tendrá el aspecto predeterminado.
Ejemplo de diseño con imagen y cuadro de Universal Login con correo electrónico, username y contraseña

Pies de página

En el siguiente ejemplo se agrega un pie de página gris con enlaces a la Política de privacidad y los Términos de servicio:
Ejemplo de diseño de la caja de Universal Login con correo electrónico/contraseña y pie de página

API de plantillas de página

Para configurar la plantilla de página, debe usar la . Primero debe obtener un token de Management API con los alcances update:branding, read:branding, delete:branding. Si usa API Explorer Application para generar tokens, asegúrese de que esos alcances estén habilitados para Auth0 Management API. Para configurar la plantilla, debe usar el siguiente endpoint: Para obtener la plantilla, debe usar el siguiente endpoint: Para eliminar la plantilla, debe usar el siguiente endpoint: El tamaño máximo de la plantilla de página es de 100 KB. Si no es suficiente, considera mover los archivos de imágenes o CSS fuera del código de la plantilla de página.

Personalización de CSS

Limitaciones de la plantilla de página:
  • Los nombres de las clases de CSS cambian cada vez que Auth0 genera el proyecto. El CSS personalizado que apunte a esas clases dejará de funcionar con cada nueva compilación.
  • La estructura HTML de las páginas de Universal Login está sujeta a cambios. Evite las personalizaciones que dependan de la estructura HTML para evitar interrupciones.
Hay algunos aspectos que puede personalizar con CSS:
  • Puede cambiar el tamaño de la pantalla de inicio de sesión incluyendo las variables siguientes en etiquetas <style> dentro del elemento <head>.
    • Use --prompt-width para ajustar el ancho del contenedor. Su valor predeterminado es 400px.
    • Para Forms: use --form-max-width para establecer el ancho máximo del formulario. Su valor predeterminado es 500px.
      • Para aplicar el código solo a la página del formulario, incluya {% if prompt.name == "custom-form" %} en el elemento <head>.
  • Puede usar una fuente de Google importándola y sobrescribiendo la variable CSS --font-family.
  • Puede ocultar el logo del inquilino agregando class="_hide-prompt-logo" en el elemento <body>.
  • Puede especificar un logo personalizado agregando class="_use-custom-prompt-logo" en el elemento <body>. Esto le permite, por ejemplo, cambiar el logo de la página de inicio de sesión según la aplicación:
La implementación actual no admite más personalización de CSS. Si observa el HTML generado, verá código como este:

Uso de la CLI de Auth0

Puede usar la Auth0 CLI para actualizar fácilmente las plantillas de página. En la CLI de Auth0, ejecute: auth0 universal-login customize La CLI de Auth0 abrirá dos ventanas:
  • Una ventana del navegador con un Storybook que muestra la página de inicio de sesión con la plantilla de página aplicada:
Storybook de plantillas de página
  • El editor predeterminado, con el código de la plantilla de página:
undefined
Ahora puede cambiar el código de la plantilla de página y podrá previsualizar los cambios en la ventana del navegador. Una vez que cierre la ventana, se le preguntará si desea guardar la plantilla. Si responde , la plantilla se cargará en su inquilino.

Solución de problemas

Si no se está aplicando la plantilla, verifica que estés accediendo a {customDomain}/authorize. Si estás accediendo a {yourDomain}/authorize, Auth0 no mostrará la plantilla de página.