Configurer les portails Universal

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 ou au moyen de la Management API.

Informations requises

Un portail. Pour en créer un, consultez Démarrage rapide des portails Universal.
Pour utiliser Management API : un jeton d’accès Management API 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 : User MFA Management et Passkey Management.
Les composants Organization appellent l’API My Organization : Organization Details Edit et Domain Table.
Le composant Form affiche un Form Auth0. 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 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. Pour découvrir l’ensemble des composants, consultez Référence de la bibliothèque de composants de portail.

Ajouter des pages et des composants

Auth0 Dashboard
Management API

Ouvrir l'éditeur

Accédez à Auth0 Dashboard > Portals et ouvrez votre portail.

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.

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.

Modifier un composant

Sélectionnez un composant sur la page pour ouvrir ses paramètres, puis sélectionnez Save.

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 :

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 ».

Auth0 Dashboard
Management API

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.

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 à 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.

Auth0 Dashboard
Management API

Ajouter le composant Form

Ouvrez Components et faites glisser Form dans une section de votre page.

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.

Ajoutez un composant page:component:auth0:form à une page. L’exemple suivant le place dans une section :

{
  "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. 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.

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. La barre latérale affiche des liens vers des pages du portail ou vers des URL externes.

Auth0 Dashboard
Management API

Ajouter un élément

Ouvrez Navigation, sélectionnez Add Item, puis choisissez un lien vers une page du portail ou vers une URL externe.

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.

Réorganiser les éléments

Faites glisser les éléments pour en modifier l’ordre.

Définissez la propriété navigation du portail. Comme pour les pages, envoyez la valeur complète.

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 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 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 <head> de chaque page du portail, par exemple pour charger une police de caractères ou un script d’analytique.

Auth0 Dashboard
Management API

Ouvrez Portal Settings, puis saisissez votre HTML dans Custom HTML injection in <head>, sous Custom code.

curl --request PATCH \
  --url "https://YOUR_DOMAIN/api/v2/portals/{portalId}" \
  --header "authorization: Bearer {managementApiToken}" \
  --header "content-type: application/json" \
  --data '{
    "custom_code": {
      "head": "<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">"
    }
  }'

Auth0 n’injecte le code personnalisé que lorsque les utilisateurs ouvrent le portail sur un domaine personnalisé. 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

Accéder aux portails

Redirigez les utilisateurs de votre application Web ou native vers le portail.

Référence de la bibliothèque de composants du portail

Consultez les types de composants, les limites de configuration et les permissions.

Personnalisation de l’image de marque

Personnalisation du code

Personnalisation par des tiers

Configurer les portails Universal

Informations requises

Choisir les composants

Ajouter des pages et des composants

Définir la page par défaut

Ajouter un Form Auth0

Organiser le contenu

Configurer la navigation

Appliquer l’image de marque

Ajouter du code personnalisé à la balise head

Publier et prévisualiser

Prochaines étapes

Accéder aux portails

Référence de la bibliothèque de composants du portail

​Informations requises

​Choisir les composants

​Ajouter des pages et des composants

​Définir la page par défaut

​Ajouter un Form Auth0

​Organiser le contenu

​Configurer la navigation

​Appliquer l’image de marque

​Ajouter du code personnalisé à la balise head

​Publier et prévisualiser

​Prochaines étapes

Accéder aux portails

Référence de la bibliothèque de composants du portail

Informations requises

Choisir les composants

Ajouter des pages et des composants

Définir la page par défaut

Ajouter un Form Auth0

Organiser le contenu

Configurer la navigation

Appliquer l’image de marque

Ajouter du code personnalisé à la balise head

Publier et prévisualiser

Prochaines étapes