> ## Documentation Index > Fetch the complete documentation index at: https://auth0.com/llms.txt > Use this file to discover all available pages before exploring further. # Configurer les portails Universal > Ajoutez des pages, des composants, des Forms Auth0, de la navigation, une image de marque et du code personnalisé à un portail Universal dans l’Auth0 Dashboard ou au moyen de la Management API. > [!WARNING] > > **La fonctionnalité Auth0 Universal Portals est en .** Un portail se compose d’une navigation et de pages. La navigation est une barre latérale contenant des liens. Chaque page est constituée de composants, comme un titre, un composant de gestion de la MFA ou un Form Auth0. Une section est également un composant, qui en regroupe d’autres. Vous pouvez modifier votre portail dans l’éditeur visuel du [Auth0 Dashboard](https://manage.auth0.com/dashboard/#/universal-portals) ou au moyen de la [Management API](https://auth0.com/docs/fr-ca/api/management/v2.md). Maquette fonctionnelle d’un portail pour utilisateurs finaux. La barre supérieure et la barre latérale constituent la navigation. La page à côté de la barre latérale contient des composants. Un composant contient deux autres composants. ## Informations requises * Un portail. Pour en créer un, consultez [Démarrage rapide des portails Universal](https://auth0.com/docs/fr-ca/customize/portals/quickstart.md). * Pour utiliser Management API : un [jeton d'accès Management API](https://auth0.com/docs/fr-ca/secure/tokens/access-tokens/management-api-access-tokens.md) doté des permissions `read:portals` et `update:portals`. ## Choisir les composants Un portail peut combiner librement les composants : vous pouvez donc créer un portail de compte personnel, un portail Organization, ou les deux. Les composants se répartissent en quatre groupes : * Les **composants de compte** appellent l'[API My Account](https://auth0.com/docs/fr-ca/manage-users/my-account-api.md) : [User MFA Management](https://auth0.com/docs/fr-ca/customize/portals/portal-components.md#user-mfa-management) et [Passkey Management](https://auth0.com/docs/fr-ca/customize/portals/portal-components.md#passkey-management). * Les **composants Organization** appellent l'[API My Organization](https://auth0.com/docs/fr-ca/manage-users/my-organization-api.md) : [Organization Details Edit](https://auth0.com/docs/fr-ca/customize/portals/portal-components.md#organization-details-edit) et [Domain Table](https://auth0.com/docs/fr-ca/customize/portals/portal-components.md#domain-table). * Le composant **Form** affiche un [Form Auth0](https://auth0.com/docs/fr-ca/customize/forms.md). Les Forms peuvent être utilisés dans n'importe quel portail pour recueillir ou mettre à jour des renseignements. * Les **[composants de contenu et de structure](https://auth0.com/docs/fr-ca/customize/portals/portal-components.md#content-and-structure-components)** structurent la page : Heading, Rich Text, Image et Section. Les composants de compte et Organization appellent un serveur de ressources au nom de l'utilisateur; l'application du portail doit donc y avoir accès. Pour en savoir plus, consultez [Configurer une application pour les portails Universal](https://auth0.com/docs/fr-ca/customize/portals/configure-portal-application.md). Pour découvrir l'ensemble des composants, consultez [Référence de la bibliothèque de composants de portail](https://auth0.com/docs/fr-ca/customize/portals/portal-components.md). ## Ajouter des pages et des composants > [tab] Auth0 Dashboard > > **1. Ouvrir l'éditeur** > > Accédez à [**Auth0 Dashboard > Portals**](https://manage.auth0.com/dashboard/#/universal-portals) et ouvrez votre portail. > > **2. Ajouter une page** > > Ouvrez **Pages**, sélectionnez **Add Page**, puis saisissez un **Name** et un **Slug**. Le slug se compose de lettres minuscules, de chiffres et de traits d'union, et doit commencer par une lettre. > > **3. Ajouter des composants** > > Ouvrez **Components** et faites glisser un composant sur la page, ou sélectionnez d'abord **Section**, puis ajoutez-y des composants. Une section affiche un titre et une description au-dessus de ses composants. > > **4. Modifier un composant** > > Sélectionnez un composant sur la page pour ouvrir ses paramètres, puis sélectionnez **Save**. > > L’éditeur visuel avec le panneau Components ouvert. Le composant Form est glissé depuis le panneau et déposé sur la page, où il apparaît dans un nouveau bloc. > [tab] Management API > > Appelez `PATCH /api/v2/portals/{id}` en fournissant la valeur complète de `pages`. L'API remplace l'intégralité du champ `pages`; envoyez donc toutes les pages que vous souhaitez conserver. L'exemple suivant crée une page Sécurité comportant deux sections : > > ```bash wrap lines theme={null} > curl --request PATCH \ > --url "https://YOUR_DOMAIN/api/v2/portals/{portalId}" \ > --header "authorization: Bearer {managementApiToken}" \ > --header "content-type: application/json" \ > --data '{ > "pages": { > "default": "security", > "standard": [ > { > "title": "Security", > "slug": "security", > "components": [ > { > "type": "page:component:auth0:structure:section", > "config": { > "variant": "card", > "title": "Multi-factor authentication", > "description": "Add or remove the ways you verify your sign-in.", > "children": [ > { "type": "page:component:auth0:my_account:mfa_management" } > ] > } > }, > { > "type": "page:component:auth0:structure:section", > "config": { > "variant": "card", > "title": "Passkeys", > "description": "Sign in without a password.", > "children": [ > { "type": "page:component:auth0:my_account:passkey_management" } > ] > } > } > ] > } > ] > } > }' > ``` > > Envoyez `"pages": null` pour supprimer toutes les pages. Omettez `pages` pour les conserver telles quelles. ## Définir la page par défaut L’URL du portail, `https://YOUR_DOMAIN/portals/{slug}`, ouvre la page par défaut du portail. Si le portail n’a aucune page par défaut, l’URL affiche « Page not found ». > [tab] Auth0 Dashboard > > Accédez à **Pages**. Ouvrez le menu de la page que les utilisateurs doivent voir en premier, puis sélectionnez **Set as default page**. L’étiquette **Home page** s’affiche alors sur la page. > > L’éditeur visuel avec le panneau Pages ouvert. Le menu à trois points d’une page s’ouvre et affiche les options Set as default page et Delete. Après la sélection de Set as default page, l’icône d’accueil se déplace vers cette page. > [tab] Management API > > Attribuez à `pages.default` le slug de l’une de vos pages, comme dans l’exemple précédent. ## Ajouter un Form Auth0 Créez un [Form Auth0](https://auth0.com/docs/fr-ca/customize/forms.md) à utiliser avec les portails Universal. Utilisez le Form pour recueillir des renseignements, comme une mise à jour de profil ou des préférences de communication. > [tab] Auth0 Dashboard > > **1. Ajouter le composant Form** > > Ouvrez **Components** et faites glisser **Form** dans une section de votre page. > > **2. Configurer le Form** > > Sélectionnez le composant. Dans **Form ID**, saisissez l’ID de votre Form. Dans **Completion message**, saisissez le message qui s’affiche une fois que l’utilisateur a soumis le Form. Sélectionnez **Save**. > > L’éditeur visuel avec un composant Form sélectionné dans une section. Le panneau Form à droite comporte les champs Form ID et Completion message, un bouton d’enregistrement en bas à gauche et une icône de suppression en bas à droite. > [tab] Management API > > Ajoutez un composant `page:component:auth0:form` à une page. L’exemple suivant le place dans une section : > > ```json wrap lines theme={null} > { > "type": "page:component:auth0:structure:section", > "config": { > "variant": "card", > "title": "Personal information", > "description": "Update the details we have about you.", > "children": [ > { > "type": "page:component:auth0:form", > "config": { > "form_id": "{formId}", > "completion_message": "Your profile has been updated." > } > } > ] > } > } > ``` Un Form intégré à un portail reçoit son contexte du jeton d’ID de l’utilisateur, et non d’une transaction de connexion. Seule la variable `{{context.user.user_id}}` est toujours disponible. Pour en savoir plus, consultez [Variables de contexte des Forms](https://auth0.com/docs/fr-ca/customize/portals/portal-components.md#forms-context-variables). Si un Form envoie des identifiants au navigateur pour que l’utilisateur fasse un choix, par exemple une liste de facteurs MFA, et que votre flux utilise ensuite la valeur choisie, vérifiez dans le flux que cette valeur appartient bien à l’utilisateur connecté. Comparez-la avec `{{context.*}}` ou avec une liste que vous récupérez dans une action du flux et que vous stockez dans `{{vars.*}}`. Si un Form met à jour des utilisateurs au moyen de la Management API, son flux nécessite une connexion de coffre-fort Forms. Associez cette connexion à une application de communication entre machines distincte. N’ajoutez pas le grant `client_credentials` à l’application du portail. Pour en savoir plus, consultez [Connexions de coffre-fort Auth0](https://auth0.com/docs/fr-ca/customize/forms/vaults/auth0.md). ## Organiser le contenu Regroupez les composants connexes dans une **Section**. Comme une carte, une section affiche un titre et une description au-dessus de ses composants, ce qui facilite le survol de la page. Utilisez **Heading** et **Rich Text** pour le texte, et **Image** pour les éléments de marque, comme un logo. ## Configurer la navigation La barre latérale affiche des liens vers des pages du portail ou vers des URL externes. > [tab] Auth0 Dashboard > > **1. Ajouter un élément** > > Ouvrez **Navigation**, sélectionnez **Add Item**, puis choisissez un lien vers une page du portail ou vers une URL externe. > > **2. Définir le lien** > > Saisissez une étiquette, choisissez la page ou saisissez l’URL, puis, si vous le souhaitez, saisissez un nom d’icône. Sélectionnez **Add Item**. > > **3. Réorganiser les éléments** > > Faites glisser les éléments pour en modifier l’ordre. > > L’éditeur visuel avec le panneau Navigation ouvert. Le panneau comporte un bouton Add Item au-dessus des éléments de la barre latérale. Les éléments Profile et Security permutent dans le panneau et dans l’aperçu du portail, ce qui montre que l’ordre du panneau détermine celui de la barre latérale. > [tab] Management API > > Définissez la propriété `navigation` du portail. Comme pour les pages, envoyez la valeur complète. > > ```bash wrap lines theme={null} > curl --request PATCH \ > --url "https://YOUR_DOMAIN/api/v2/portals/{portalId}" \ > --header "authorization: Bearer {managementApiToken}" \ > --header "content-type: application/json" \ > --data '{ > "navigation": { > "sidebar": { > "components": [ > { > "type": "sidebar:component:auth0:internal_link:v2", > "config": { "label": "Security", "page_slug": "security", "icon": "shield" } > }, > { > "type": "sidebar:component:auth0:external_link:v2", > "config": { "label": "Help center", "href": "https://example.com/help" } > } > ] > } > } > }' > ``` L’icône correspond au nom d’une [icône Lucide](https://lucide.dev/icons) en kebab-case, par exemple `user` ou `shield`. Le logo de la barre latérale provient de l’image de marque de votre locataire. ## Appliquer l'image de marque Les portails utilisent l'[image de marque](https://auth0.com/docs/fr-ca/customize/login-pages/universal-login/customize-themes.md) de votre locataire : logo, couleurs et polices. Dans le contexte d'une Organization, le portail utilise plutôt l'image de marque de cette Organization. Si Auth0 n'arrive pas à charger l'image de marque de l'Organization, le portail utilise celle de votre locataire. ## Ajouter du code personnalisé à la balise head Ajoutez du HTML à la balise `` de chaque page du portail, par exemple pour charger une police de caractères ou un script d'analytique. > [tab] Auth0 Dashboard > > Ouvrez **Portal Settings**, puis saisissez votre HTML dans **Custom HTML injection in \**, sous **Custom code**. > > L’éditeur visuel avec le panneau Portal Settings ouvert. Le panneau comporte les sections Général, Application et Code personnalisé; cette dernière contient un éditeur de code. > [tab] Management API > > ```bash wrap lines theme={null} > curl --request PATCH \ > --url "https://YOUR_DOMAIN/api/v2/portals/{portalId}" \ > --header "authorization: Bearer {managementApiToken}" \ > --header "content-type: application/json" \ > --data '{ > "custom_code": { > "head": "" > } > }' > ``` > [!WARNING] > > Auth0 n'injecte le code personnalisé que lorsque les utilisateurs ouvrent le portail sur un [domaine personnalisé](https://auth0.com/docs/fr-ca/customize/custom-domains.md). Le code peut contenir jusqu'à 10 000 caractères. Auth0 ne le valide pas : vous êtes responsable de sa sécurité et de ses répercussions sur la performance. ## Publier et prévisualiser Dans l'éditeur visuel, la barre supérieure affiche **Unpublished changes** tant que vous n'avez pas sélectionné **Publish**. **Preview** ouvre la dernière version publiée de votre portail dans un nouvel onglet; pensez donc à publier avant de prévisualiser. ## Prochaines étapes > [card] [Accéder aux portails](https://auth0.com/docs/fr-ca/customize/portals/access-portals.md) > > Redirigez les utilisateurs de votre application Web ou native vers le portail. > [card] [Référence de la bibliothèque de composants du portail](https://auth0.com/docs/fr-ca/customize/portals/portal-components.md) > > Consultez les types de composants, les limites de configuration et les permissions.