> ## 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.
> Aprenda a crear plantillas de páginas de inicio de sesión para la experiencia de Universal Login.
# Personalice las plantillas de página de Universal Login
export const AuthCodeGroup = ({children, dropdown}) => {
const [processedChildren, setProcessedChildren] = useState(children);
useEffect(() => {
let unsubscribe = null;
function init() {
unsubscribe = window.autorun(() => {
const processChildren = node => {
if (typeof node === "string") {
let processedNode = node;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
processedNode = processedNode.replaceAll(new RegExp(escapedKey, "g"), value);
}
return processedNode;
} else if (Array.isArray(node)) {
return node.map(processChildren);
} else if (node && node.props && node.props.children) {
return {
...node,
props: {
...node.props,
children: processChildren(node.props.children)
}
};
}
return node;
};
setProcessedChildren(processChildren(children));
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
return {processedChildren};
};
export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
const [displayText, setDisplayText] = useState(children);
const [copyText, setCopyText] = useState(children);
const wrapperRef = React.useRef(null);
useEffect(() => {
let unsubscribe = null;
function init() {
if (!window.autorun || !window.rootStore) {
return;
}
unsubscribe = window.autorun(() => {
let processedChildrenForDisplay = children;
let processedChildrenForCopy = children;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
let displayValue = value;
if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
displayValue = value.substring(0, 3) + "*****ENMASCARADO*****";
}
processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
}
setDisplayText(processedChildrenForDisplay);
setCopyText(processedChildrenForCopy);
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
useEffect(() => {
if (!wrapperRef.current) return;
const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
let isOverriding = false;
const handleClick = e => {
const button = e.target.closest('[data-testid="copy-code-button"]');
if (!button || !wrapperRef.current.contains(button)) return;
isOverriding = true;
navigator.clipboard.writeText = text => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
return originalWriteText(copyText);
}
return originalWriteText(text);
};
setTimeout(() => {
if (isOverriding) {
isOverriding = false;
navigator.clipboard.writeText = originalWriteText;
}
}, 100);
};
const wrapper = wrapperRef.current;
wrapper.addEventListener('click', handleClick, true);
return () => {
wrapper.removeEventListener('click', handleClick, true);
if (navigator.clipboard.writeText !== originalWriteText) {
navigator.clipboard.writeText = originalWriteText;
}
};
}, [copyText]);
return
{displayText}
;
};
Puede personalizar las páginas de Universal Login proporcionando una plantilla de página creada con el [lenguaje de plantillas Liquid](https://shopify.github.io/liquid/basics/introduction/). 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 MFA. 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](/es/docs/customize/custom-domains) para su inquilino. Además, solo puede actualizar las plantillas de página de Universal Login con la [Management API](https://auth0.com/docs/api/management/v2).
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:
| Etiqueta | Descripción |
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `auth0:widget` | Contiene el HTML de la pantalla que se muestra en cada página del flujo de inicio de sesión, como la página de inicio de sesión o la de restablecimiento de contraseña |
| `auth0:head` | Contiene las etiquetas necesarias para renderizar la pantalla |
Para centrar la pantalla en la página, agrega `class="_widget-auto-layout"` al elemento ``. 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](#css-customization).
##### 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:
```liquid lines theme={null}
{% assign resolved_dir = dir | default: "auto" %}
{%- auth0:head -%}
{%- auth0:widget -%}
```
Si usas Storybook para ver tu plantilla, ten en cuenta que la etiqueta `