Referencia de la configuración de renderizado de ACUL

Cada pantalla de Universal Login tiene su propia configuración de renderizado: un objeto JSON que controla cómo Auth0 renderiza esa pantalla. La configuración de renderizado define el modo de renderizado, los recursos de JavaScript y CSS que componen tu interfaz de usuario personalizada y los datos de contexto disponibles para tu aplicación en tiempo de ejecución. Puedes administrar la configuración de renderizado desde el Auth0 Dashboard, con herramientas de infraestructura como código o mediante la Management API de Auth0. Para obtener más información, consulta Configurar ACUL. Para ver el esquema completo de la API, consulta el endpoint PATCH /v2/prompts/{prompt}/screen/{screen}/rendering. La configuración de renderizado incluye las siguientes propiedades:

Propiedad	Tipo	Descripción
`rendering_mode`	string	Controla cómo se renderiza la pantalla. Acepta `standard` o `advanced`.
`head_tags`	array	Un arreglo de elementos HTML insertados en el `<head>` de la página. Obligatorio cuando `rendering_mode` es `advanced`; debe incluir al menos una etiqueta `script`.
`default_head_tags_disabled`	boolean	Cuando es `true`, elimina las etiquetas `<head>` predeterminadas de Universal Login (como el favicon). El valor predeterminado es `false`.
`context_configuration`	array	Una lista de valores de contexto que se envían al navegador en tiempo de ejecución. Obligatorio cuando `rendering_mode` es `advanced`.
`use_page_template`	boolean	Cuando es `true`, renderiza la pantalla de ACUL dentro de la plantilla de página personalizada del inquilino, si se ha definido una. El valor predeterminado es `false`.
`filters`	object	Restringe el renderizado de ACUL a aplicaciones, organizaciones o dominios personalizados específicos. Si se omite, ACUL se aplica a todo el inquilino.

Modos de renderización

La propiedad rendering_mode determina si una pantalla usa la interfaz de usuario predeterminada de Universal Login o tu implementación personalizada de ACUL.

Standard: La pantalla se renderiza con la interfaz de usuario predeterminada de Universal Login. Puedes usar partials y variables de plantilla para personalizar la pantalla.
Advanced: La pantalla se renderiza con tus recursos personalizados de JavaScript y CSS cargados mediante head_tags. Los partials no se aplican. De forma predeterminada, el modo avanzado se aplica a todas las aplicaciones y organizaciones del inquilino.
Advanced (filtered): La pantalla se renderiza con ACUL para las solicitudes que coinciden con los criterios definidos en filters (aplicaciones específicas, organizaciones o dominios personalizados). Las solicitudes que no coinciden con los filtros usan la renderización estándar, donde sí se aplican los partials.

Para usar el modo filtrado, establece rendering_mode en advanced y proporciona un objeto filters con un match_type (includes_any o excludes_any) y al menos una matriz de entidades (clients, organizations o domains). Cada entidad puede identificarse por id o mediante un par clave/valor de metadata.

Etiquetas `<head>`

Las etiquetas <head> son el mecanismo principal para cargar su interfaz de usuario personalizada en la página anfitriona de ACUL. Cuando Auth0 renderiza una pantalla en modo avanzado, sirve una página HTML mínima e inserta en el <head> de la página los elementos definidos en head_tags. Estas etiquetas cargan los paquetes de recursos de JavaScript y CSS que componen su pantalla de autenticación personalizada. Cada entrada de la matriz head_tags es un objeto con las siguientes propiedades:

Propiedad	Tipo	Descripción
`tag`	string	El tipo de elemento HTML. Valores válidos: `script`, `link`, `style`, `meta`, `title`, `base`, `noscript`, `template`.
`attributes`	object	Atributos del elemento HTML (por ejemplo, `src`, `href`, `defer`, `integrity`). Máximo de 10 atributos por etiqueta.
`content`	string	Texto o marcado entre las etiquetas de apertura y cierre del elemento. Máximo de 250 caracteres.

El atributo integrity es obligatorio para las etiquetas script y las hojas de estilo. Auth0 usa Subresource Integrity (SRI) para verificar que los recursos no se hayan modificado.

Segmentos dinámicos de URL

Las URL de la etiqueta head admiten segmentos dinámicos mediante la sintaxis de plantillas Liquid, lo que le permite entregar distintos paquetes de recursos según el contexto de autenticación actual. Por ejemplo, puede cargar un paquete de JavaScript diferente por cliente o por organización para admitir múltiples marcas. Las variables disponibles para los segmentos dinámicos incluyen:

Prompt y pantalla: {{ screen.name }}, {{ prompt.name }}, {{ locale }}
Cliente: {{ client.id }}, {{ client.name }}, {{ client.metadata.KEY_NAME }}
Organización: {{ organization.id }}, {{ organization.name }}, {{ organization.metadata.KEY_NAME }}

Al usar segmentos dinámicos de URL, proporcione un hash SRI para cada posible variante de recurso. El atributo integrity acepta varios hashes separados por espacios en blanco; el navegador carga el recurso si alguno de los hashes coincide.

{
  "head_tags": [
    {
      "tag": "script",
      "attributes": {
        "src": "https://cdn.example.com/assets/{{ client.name }}/bundle.js",
        "defer": true,
        "integrity": "sha256-hashForClientA sha256-hashForClientB"
      }
    },
    {
      "tag": "link",
      "attributes": {
        "rel": "stylesheet",
        "href": "https://cdn.example.com/assets/{{ client.name }}/styles.css",
        "integrity": "sha256-cssHashForClientA sha256-cssHashForClientB"
      }
    }
  ]
}

También puede usar etiquetas de encabezado para cargar scripts de analítica, fuentes personalizadas o metaetiquetas. Para reemplazar las etiquetas de encabezado predeterminadas de Universal Login (como el favicon) por las suyas, establezca default_head_tags_disabled en true.

Datos de contexto

Los datos de contexto controlan qué información del inquilino, del cliente, de la organización y de la marca Auth0 envía a tu pantalla personalizada en tiempo de ejecución. Auth0 proporciona estos datos a través del objeto universal_login_context en la página anfitriona. En el código de tu aplicación, usa los hooks del SDK de ACUL React o los métodos del SDK de ACUL JS para acceder a los datos de contexto. Cada valor que quieras poner a disposición en tu pantalla debe incluirse explícitamente en la matriz context_configuration. Auth0 elimina de la carga útil las claves que se resuelven en valores vacíos o nulos. Están disponibles los siguientes valores de contexto estáticos:

Valor	Descripción
`branding.settings`	Configuración de marca del inquilino (colores, logotipo)
`branding.themes.default`	Tema predeterminado de Universal Login
`client.logo_uri`	URL del logotipo de la aplicación
`client.description`	Descripción de la aplicación
`organization.display_name`	Nombre para mostrar de la organización
`organization.branding`	Configuración de marca de la organización
`screen.texts`	Cadenas de texto localizadas de la pantalla actual
`tenant.name`	Nombre del inquilino
`tenant.friendly_name`	Nombre descriptivo del inquilino
`tenant.logo_url`	URL del logotipo del inquilino
`tenant.enabled_locales`	Configuraciones regionales habilitadas en el inquilino
`untrusted_data.submitted_form_data`	Datos del formulario enviados anteriormente
`untrusted_data.authorization_params.login_hint`	Sugerencia de inicio de sesión de la solicitud de autorización
`untrusted_data.authorization_params.screen_hint`	Sugerencia de pantalla de la solicitud de autorización
`untrusted_data.authorization_params.ui_locales`	Configuraciones regionales de la interfaz solicitadas
`user.organizations`	Organizaciones a las que pertenece el usuario
`transaction.custom_domain.domain`	Dominio personalizado de la transacción actual

También puedes agregar claves dinámicas con notación de puntos:

client.metadata.YOUR_KEY para los metadatos de la aplicación
organization.metadata.YOUR_KEY para los metadatos de la organización
transaction.custom_domain.domain_metadata.YOUR_KEY para los metadatos del dominio personalizado
untrusted_data.authorization_params.ext-YOUR_KEY para parámetros de consulta personalizados enviados al endpoint /authorize con el prefijo ext-

Personalización de la marca

Personalización mediante código

Personalización de terceros

Referencia de la configuración de renderizado de ACUL

Modos de renderización

Etiquetas `<head>`

Segmentos dinámicos de URL

Datos de contexto

​Modos de renderización

​Etiquetas <head>

​Segmentos dinámicos de URL

​Datos de contexto

Modos de renderización

Etiquetas `<head>`

Segmentos dinámicos de URL

Datos de contexto