> ## 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.
> Découvrez comment créer des modèles de page de connexion pour l’expérience Universal Login.
# Personnaliser les Universal Login Page Templates
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) + "*****MASQUÉ*****";
}
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}
;
};
Vous pouvez personnaliser les pages de Universal Login en fournissant un modèle de page créé avec le [langage de modèles Liquid](https://shopify.github.io/liquid/basics/introduction/). 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 MFA. 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](/docs/fr-ca/customize/custom-domains) pour votre tenant. De plus, vous ne pouvez mettre à jour les modèles de page de Universal Login qu’avec la [Management API](https://auth0.com/docs/api/management/v2).
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 :
| Balise | Description |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `auth0:widget` | Contient le code HTML du prompt affiché sur chaque page du flux de connexion, comme la page de connexion ou la page de réinitialisation du mot de passe |
| `auth0:head` | Contient les balises requises pour l’affichage du prompt |
Pour centrer le prompt sur la page, ajoutez `class="_widget-auto-layout"` à l’élément ``. 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](#css-customization).
##### 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 :
```liquid lines theme={null}
{% assign resolved_dir = dir | default: "auto" %}
{%- auth0:head -%}
{%- auth0:widget -%}
```
Si vous utilisez Storybook pour afficher votre modèle, sachez que la balise `