Passer au contenu principal
Universal Components vous permet de créer un tableau de bord d’administration en libre-service dans votre propre application. Cela permet à vos clients B2B, à qui vous avez délégué l’administration de leur Organisation Auth0, de gérer eux-mêmes leur image de marque, leurs fournisseurs d’identité et leurs domaines vérifiés, sans avoir à accéder à Auth0 Dashboard ni à faire appel à une équipe de soutien pour des tâches administratives de base.

​
Fonctionnement

Universal Components s’appuie sur la API My Organization, qui utilise des jetons de portée utilisateur, pour créer un tableau de bord d’administration SSO en libre-service. Lorsqu’un administrateur se connecte à votre tableau de bord intégré à votre application, le SDK Auth0 récupère un Jeton d’accès contenant des scopes propres à l’organisation pour les privilèges d’administration. Les composants utilisent ce jeton pour appeler l’API en tant qu’utilisateur connecté, ce qui garantit que les administrateurs délégués ne peuvent modifier que l’Organisation Auth0 à laquelle ils appartiennent.

​
Composants disponibles

Chaque composant est associé à des points de terminaison précis dans l’API My Organization pour exécuter des tâches administratives.
ComposantPoint de terminaison API
OrganizationDetailsEdit — Modifier le nom de l’Organisation, le nom d’affichage, les couleurs de l’image de marque et le logo./my-org/details
SsoProviderTable — Lister, activer, désactiver, supprimer et détacher des fournisseurs d’identité pour le SSO./my-org/identity-providers
SsoProviderCreate — Assistant en plusieurs étapes pour créer des fournisseurs SSO (Okta, ADFS, SAML, OIDC, Google Workspace, Azure AD, Ping Federate)./my-org/identity-providers
SsoProviderEdit — Configurer les paramètres d’authentification, activer le provisionnement et gérer les jetons SCIM ainsi que les associations de domaines./my-org/identity-providers/{idp_id}
DomainTable — Créer, vérifier, supprimer et associer des domaines à des fournisseurs d’identité./my-org/domains

​
Configurer Auth0 Dashboard

Avant d’utiliser les composants My Organization, vous devez configurer votre locataire Auth0 avec les API, les applications et les scopes adéquats.
Configuration dans Auth0 Dashboard - Suivez toutes les étapes ci-dessous avant d’utiliser les composants My Organization.

​
Créer une application

Cet exemple utilise une application monopage (SPA). Pour les frameworks React à rendu côté serveur, consultez l’onglet Next.js.
  1. Accédez à Auth0 Dashboard > Applications > Applications. Cliquez sur Create Application.
  2. Choisissez Applications Web à page unique.
  3. Dans l’onglet Paramètres, ajoutez http://localhost:5173 aux champs suivants :
    A. Allowed Callback URLs
    B. Allowed Logout URLs
  4. Sous Expérience de connexion, sélectionnez :
    A. Utilisateurs d’entreprise.
    B. (Facultatif) Inviter à saisir l’organisation.

​
Activer l’API My Organization

  1. Accédez à Auth0 Dashboard > Applications > APIs.
  2. Sélectionnez API My Organization et assurez-vous qu’elle est activée pour votre locataire.

​
Configurer l’accès à l’application

  1. Accédez à l’onglet Application Access.
  2. Sélectionnez Edit pour l’application que vous voulez utiliser.
  3. Configurez les paramètres suivants :
    A. Profil de connexion : Sélectionnez ou créez un profil avec des mappages d’attributs de connexion.
    B. Profil d’attributs utilisateur : Sélectionnez ou créez un profil avec des mappages d’attributs utilisateur.
    B. Fournisseurs d’identité pris en charge : Activez les fournisseurs que vos clients peuvent utiliser.
    C. Comportement lors de la suppression de la connexion : Choisissez Allow ou Allow if Empty.
    • Autoriser : Les utilisateurs peuvent supprimer des connexions, ce qui supprime tous les utilisateurs de cette connexion.
    • Autoriser si vide : Les utilisateurs peuvent seulement supprimer des connexions qui ne comptent aucun utilisateur.
      D. Autorisation d’accès de l’utilisateur : Choisissez Non autorisé, Autorisé ou Toutes.
    • Non autorisé : Aucune autorisation n’est accordée.
    • Autorisé : Sélectionnez des autorisations précises.
    • Toutes : Inclut toutes les autorisations existantes et futures.
      E. Autorisation d’accès des informations d’identification de l’application : Choisissez Non autorisé, Autorisé ou Toutes.
  4. Cliquez sur Save.

​
Configurer la base de données et l’utilisateur

  1. Accédez à Auth0 Dashboard > Authentification > Base de données pour créer une connexion de base de données.
  2. Sélectionnez l’onglet Applications de la connexion, puis activez votre nouvelle application SPA.
  3. Créez un utilisateur test dans cette base de données pour les essais initiaux.

​
Configurer le rôle

  1. Créez un rôle (p. ex., “Administrateur d’organisation”).
  2. Ajoutez au rôle les scopes requis de l’API My Organization.
    read:my_org:details
    update:my_org:details
    create:my_org:identity_providers
    read:my_org:identity_providers
    update:my_org:identity_providers
    delete:my_org:identity_providers
    update:my_org:identity_providers_detach
    create:my_org:identity_providers_domains
    delete:my_org:identity_providers_domains
    read:my_org:domains
    delete:my_org:domains
    create:my_org:domains
    update:my_org:domains
    read:my_org:identity_providers_scim_tokens
    create:my_org:identity_providers_scim_tokens
    delete:my_org:identity_providers_scim_tokens
    create:my_org:identity_providers_provisioning
    read:my_org:identity_providers_provisioning
    delete:my_org:identity_providers_provisioning
    read:my_org:configuration
Le jeton de l’utilisateur n’inclura que les autorisations présentes à la fois dans le rôle qui lui est attribué et dans les paramètres User Access Authorization configurés à l’étape précédente.

​
Créer une organisation

  1. Accédez à Organisations > Créer une organisation.
  2. Configurez l’organisation Auth0 :
    A. Dans Membres : ajoutez votre utilisateur test et attribuez-lui le rôle “Administrateur de l’organisation”.
    B. Dans Connexions : activez votre connexion de base de données.

​
Configurer les variables d’environnement

  1. Créez un fichier .env à la racine de votre projet React :
VITE_AUTH0_DOMAIN=your-domain.auth0.com
  VITE_AUTH0_CLIENT_ID=your-spa-client-id
Vous êtes responsable de vous assurer que votre utilisation de l’API My Organization et des composants d’interface utilisateur intégrables respecte vos politiques de sécurité et les lois applicables, y compris les autorisations accordées à vos utilisateurs finaux.
L’utilisateur doit être authentifié et être membre de l’Organisation Auth0. Les composants chargent automatiquement les données de l’Organisation à partir du contexte de l’utilisateur actuel. Pour en savoir plus, consultez Auth0 Universal Components pour en savoir plus sur l’installation et la configuration de Auth0ComponentProvider