> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Referencia del objeto de configuración de renderizado de ACUL y sus propiedades
# 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](/es/docs/customize/login-pages/advanced-customizations/configure/overview). Para ver el esquema completo de la API, consulta el endpoint [`PATCH /v2/prompts/{prompt}/screen/{screen}/rendering`](/es/docs/api/management/v2/prompts/patch-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 `` 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 `` 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](/es/docs/customize/login-pages/universal-login). Puedes usar [partials](/es/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts) y [variables de plantilla](/es/docs/customize/login-pages/universal-login/customize-templates#page-template-variables) 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 ``
Las etiquetas `` 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 `` 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)](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) 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.
```json theme={null}
{
"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](/es/docs/libraries/acul/react-sdk) o los métodos del [SDK de ACUL JS](/es/docs/libraries/acul/js-sdk) 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-`