> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-actions-triggers-prototype.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Personnaliser les modèles de pages de connexion universelle
> Apprenez à créer des modèles de page de connexion pour l’expérience de connexion universelle.
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) + "*****MASKED*****";
}
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 connexion universelle en fournissant un modèle de page créé avec le [langage de modèle Liquid](https://shopify.github.io/liquid/basics/introduction/). Avec les modèles de page, vous pouvez définir le contenu affiché autour des invites de connexion universelle, telles que la boîte de connexion ou un défi MFA. Comme le même modèle de page est utilisé pour toutes les pages de flux de connexion, cette méthode de personnalisation vous permet de mettre en œuvre facilement une expérience cohérente et reflétant votre marque pour les utilisateurs.
Pour utiliser des modèles de page personnalisés, vous devez configurer un [Domaine personnalisé](/docs/fr-ca/customize/custom-domains). En outre, vous ne pouvez mettre à jour les modèles de page de connexion universelle qu’avec la [Management API](/docs/fr-ca/api/management/v2).
Le terme `prompt (invite)` fait référence à une étape spécifique dans le flux de connexion, telle que la page d’inscription ou un défi MFA. Les variables et les exemples de code de cette page peuvent employer les termes `prompt` ou `widget`. Si ces termes sont synonymes dans le contexte de la connexion universelle, ils ne sont **pas** interchangeables dans votre code. Pour garantir le succès de la personnalisation, vérifiez que vous utilisez le terme approprié pour tous les éléments que vous ajoutez à votre code.
## Exigences relatives aux modèles de page
Lorsque vous créez un modèle de page de connexion universelle, vous devez inclure les balises suivantes :
| Balise | Description |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `auth0:widget` | Contient le code HTML pour l’invite affichée 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 nécessaires à l’affichage de l’invite |
Pour centrer l’invite sur la page, ajoutez `class="_widget-auto-layout"` à l’élément ``. Vous pouvez omettre cet attribut pour positionner manuellement l’invite selon vos besoins.
**Limitations des modèles de page :**
* Les noms des classes CSS changent à chaque fois qu’Auth0 génère le projet. Les CSS personnalisés qui ciblent ces classes ne fonctionneront pas à chaque nouvelle version.
* La structure HTML des pages de Connexion universelle est sujette à des modifications. Évitez les personnalisations qui dépendent de la structure HTML pour prévenir toute interruption.
Pour en savoir plus, consultez [Personnalisation CSS](#css-customization).
##### Exemple de modèle :
L’exemple suivant illustre le modèle de page de connexion universelle le plus simple que vous puissiez créer avec les balises requises :
```html 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 `