Créer une interface Delegated Admin avec l’API My Organization

Explique comment utiliser Universal Components pour créer des interfaces d’administration déléguée avec l’API My Organization d’Auth0.

Universal Components vous permettent de créer un tableau de bord d’administration en libre-service au sein de votre propre application. Vos clients B2B, auxquels vous déléguez le rôle d’administrateur de votre Auth0 Organization, peuvent ainsi gérer leur image de marque, leurs fournisseurs d’identité et leurs domaines vérifiés sans devoir accéder à Auth0 Dashboard ni faire appel à une équipe de soutien pour les tâches administratives de base.

​

Fonctionnement

Universal Components utilise l’API My Organization, qui fonctionne avec des jetons associés à l’utilisateur, pour créer un tableau de bord d’administration SSO en libre-service. Lorsqu’un administrateur se connecte au tableau de bord intégré à votre application, le SDK Auth0 récupère un jeton d’accès contenant des scopes propres à l’Organization pour les privilèges d’administration. Les composants utilisent ce jeton pour envoyer des requêtes à l’API au nom de l’utilisateur connecté, ce qui garantit que les administrateurs délégués ne peuvent modifier que l’Auth0 Organization à laquelle ils appartiennent.

​

Composants disponibles

Chaque composant est associé à des endpoints précis de la API My Organization pour effectuer des tâches administratives.

Composant	Endpoint 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 — Répertorier, activer, désactiver, supprimer et dissocier les fournisseurs d’identité SSO.	/my-org/identity-providers
SsoProviderCreate — Assistant à 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 des composants My Organization, vous devez configurer votre tenant Auth0 avec les API, les applications et les portées appropriées.

React

Configuration d’Auth0 Dashboard — Effectuez toutes les étapes ci-dessous avant d’utiliser les composants My Organization.

​

Créer l’application

Cet exemple utilise une application monopage (SPA). Pour les frameworks React avec rendu côté serveur, consultez l’onglet Next.js.

1. Accédez à Auth0 Dashboard > Applications > Applications. Sélectionnez Create Application.

2. Choisissez Single Page Web Applications.

3. Dans l’onglet Settings, ajoutez http://localhost:5173 aux champs suivants :

   • URL de rappel autorisées
   • URL de déconnexion autorisées

4. Sous Expérience de connexion, sélectionnez :

   • Utilisateurs professionnels.
   • (Facultatif) Demander l’organisation.

​

Activer l’API My Organization

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

​

Configurer l’accès à l’application

1. Accédez à l’onglet Accès à l’application.
2. Sélectionnez Modifier pour l’application que vous souhaitez utiliser.
3. Configurez les paramètres suivants :
   • Connection Profile : Sélectionnez ou créez un profil avec des mappages d’attributs de connexion.
   • User Attribute Profile : Sélectionnez ou créez un profil avec des mappages d’attributs utilisateur.
   • Identity Providers pris en charge : Activez les fournisseurs que vos clients peuvent utiliser.
   • Comportement de suppression des connexions : Choisissez Autoriser ou Autoriser si vide.
     • Autoriser : Les utilisateurs peuvent supprimer des connexions, ce qui supprime tous les utilisateurs associés à ces connexions.
     • Autoriser si vide : Les utilisateurs peuvent uniquement supprimer des connexions ne contenant aucun utilisateur.
   • Autorisation d’accès des utilisateurs : Choisissez Unauthorized, Autorisé ou Tous.
     • Unauthorized : Aucune permission n’est autorisée.
     • Autorisé : Sélectionnez des permissions précises.
     • Tous : Incluez toutes les permissions existantes et futures.
   • Autorisation d’accès des informations d’identification du client : Choisissez Unauthorized, Autorisé ou Tous.
4. Sélectionnez Enregistrer.

​

Configurer la base de données et l’utilisateur

1. Accédez à Auth0 Dashboard > Authentication > Database pour créer une connexion à une base de données.
2. Dans l’onglet Applications de la connexion, activez votre nouvelle application SPA.
3. Créez un utilisateur de test dans cette base de données aux fins des tests initiaux.

​

Configurer le rôle

1. Créez un rôle (par exemple, “Administrateur de l’organisation”).
2. Ajoutez au rôle les scopes requis de l’API My Organization.

Scopes requis

    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 token de l’utilisateur n’inclura que les permissions communes au rôle qui lui est attribué et aux paramètres d’autorisation d’accès utilisateur configurés à l’étape précédente.

​

Créer une Organization

1. Accédez à Organizations > Create Organization.
2. Configurez l’Auth0 Organization :
   • Dans Membres : Ajoutez votre utilisateur test et attribuez-lui le rôle « Organization Admin ».
   • Dans Connexions : Activez votre connexion à la 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 devez veiller à ce que votre utilisation de l’API My Organization et des composants d’interface utilisateur intégrables soit conforme à vos politiques de sécurité et aux lois applicables, y compris en ce qui concerne les permissions accordées à vos utilisateurs finaux.

L’utilisateur doit être authentifié et être membre de l’Auth0 Organization. Les composants chargent automatiquement les données de l’Organization à partir du contexte de l’utilisateur actuel. Pour en savoir plus sur l’installation et la configuration de Auth0ComponentProvider, consultez Auth0 Universal Components.

Next.js

Configuration du tableau de bord Auth0 — Effectuez toutes les étapes ci-dessous avant d’utiliser les composants My Organization.

​

Créer l’application

Cet exemple utilise une Regular Web Application avec Next.js. Vous pouvez également configurer une Single Page Application en suivant des étapes semblables.

1. Accédez à Auth0 Dashboard > Applications > Applications. Sélectionnez Create Application.

2. Choisissez Regular Web Application.

3. Dans l’onglet Settings, ajoutez http://localhost:5173 aux champs suivants :

   • Allowed Callback URLs
   • Allowed Logout URLs

4. Sous Expérience de connexion, sélectionnez :

   • Utilisateurs professionnels.
   • (Facultatif) Demander l’organisation.

​

Activer l’API My Organization

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

​

Configurer l’accès à l’application

1. Accédez à l’onglet Application Access.
2. Sélectionnez Edit pour l’application que vous souhaitez utiliser.
3. Configurez les paramètres suivants :
   • Profil de connexion : sélectionnez ou créez un profil comprenant des mappages d’attributs de connexion.
   • Profil d’attributs utilisateur : sélectionnez ou créez un profil comprenant des mappages d’attributs utilisateur.
   • Fournisseurs d’identité pris en charge : activez les fournisseurs que vos clients peuvent utiliser.
   • Comportement de suppression de connexion : choisissez Autoriser ou Autoriser si vide.
     • Autoriser : les utilisateurs peuvent supprimer des connexions, ce qui supprime tous les utilisateurs associés à cette connexion.
     • Autoriser si vide : les utilisateurs peuvent seulement supprimer les connexions ne comptant aucun utilisateur.
   • Autorisation d’accès des utilisateurs : choisissez Non autorisé, Autorisé ou Tous.
     • Non autorisé : aucune permission n’est accordée.
     • Autorisé : sélectionnez des permissions précises.
     • Tous : incluez toutes les permissions existantes et futures.
   • Autorisation d’accès aux informations d’identification du client : choisissez Non autorisé, Autorisé ou Tous.
4. Sélectionnez Enregistrer.

​

Configurer la base de données et l’utilisateur

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

​

Configurer le rôle

1. Créez un rôle (par exemple, “Administrateur de l’organisation”).
2. Ajoutez au rôle les scopes requis de l’API My Organization.

Scopes requis

    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 token de l’utilisateur n’inclura que les permissions présentes à la fois dans le rôle qui lui est attribué et dans les paramètres d’autorisation d’accès utilisateur configurés à l’étape précédente.

​

Créer une Organization

1. Accédez à Organizations > Créer une organisation.
2. Configurez l’Auth0 Organization :
   • Dans Membres : Ajoutez votre utilisateur test et attribuez-lui le rôle « Administrateur de l’organisation ».
   • 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 :

NEXT_PUBLIC_AUTH0_DOMAIN=your-domain.auth0.com
NEXT_PUBLIC_AUTH0_CLIENT_ID=your-client-id
AUTH0_SECRET=your-secret
AUTH0_ISSUER_BASE_URL=https://your-domain.auth0.com

Pour Next.js avec le SDK @auth0/nextjs-auth0, consultez la documentation du SDK Auth0 Next.js pour connaître toutes les instructions de configuration.

Vous êtes responsable de veiller à ce que votre utilisation de l’API My Organization et des composants d’interface utilisateur intégrables soit conforme à vos politiques de sécurité et aux lois applicables, y compris en ce qui concerne les permissions accordées à vos utilisateurs finaux.

L’utilisateur doit être authentifié et membre de l’Auth0 Organization. Les composants chargent automatiquement les données de l’Organization à partir du contexte de l’utilisateur actuel. Pour en savoir plus sur l’installation et la configuration de Auth0ComponentProvider, consultez Auth0 Universal Components

shadcn

Configuration du Auth0 Dashboard — Effectuez toutes les étapes ci-dessous avant d’utiliser les composants My Organization.

​

Créer l’application

Cet exemple utilise une Single Page Application, mais vous pouvez aussi configurer une Regular Web Application (RWA) en suivant des étapes semblables.

1. Accédez à Auth0 Dashboard > Applications > Applications, puis sélectionnez Create Application.

2. Choisissez Single Page Web Applications.

3. Dans l’onglet Settings, ajoutez http://localhost:5173 aux champs suivants :

   • URL de rappel autorisées
   • URL de déconnexion autorisées

4. Sous Expérience de connexion, sélectionnez :

   • Utilisateurs professionnels.
   • (Facultatif) Demander l’organisation.

​

Activer l’API My Organization

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

​

Configurer l’accès à l’application

1. Accédez à l’onglet Application Access.
2. Sélectionnez Edit pour l’Application que vous souhaitez utiliser.
3. Configurez les paramètres suivants :
   • Profil de connexion : Sélectionnez ou créez un profil avec des mappages d’attributs de connexion.
   • Profil d’attributs utilisateur : Sélectionnez ou créez un profil avec des mappages d’attributs utilisateur.
   • Fournisseurs d’identité pris en charge : Activez les fournisseurs que vos clients peuvent utiliser.
   • Comportement de suppression des connexions : Choisissez Autoriser ou Autoriser si vide.
     • Autoriser : Les utilisateurs peuvent supprimer des connexions, ce qui supprime tous les utilisateurs associés à cette connexion.
     • Autoriser si vide : Les utilisateurs peuvent uniquement supprimer des connexions sans utilisateurs.
   • Autorisation d’accès des utilisateurs : Choisissez Non autorisé, Autorisé ou Tous.
     • Non autorisé : Aucune permission n’est accordée.
     • Autorisé : Sélectionnez des permissions précises.
     • Tous : Incluez toutes les permissions actuelles et futures.
   • Autorisation d’accès des identifiants client : Choisissez Non autorisé, Autorisé ou Tous.
4. Sélectionnez Enregistrer.

​

Configurer la base de données et l’utilisateur

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

​

Configurer le rôle

1. Créez un rôle (par exemple, “Organization Admin”).
2. Ajoutez au rôle les scopes requis de l’API My Organization.

Scopes requis

    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 token de l’utilisateur n’inclura que les permissions présentes à la fois dans le rôle qui lui est attribué et dans les paramètres d’autorisation d’accès utilisateur configurés à l’étape précédente.

​

Créer une Organization

1. Accédez à Organizations > Create Organization.
2. Configurez l’Auth0 Organization :
   • Dans Membres : Ajoutez votre utilisateur de test et attribuez-lui le rôle « Organization Admin ».
   • Dans Connexions : Activez votre connexion à la base de données.

​

Configurer les variables d’environnement

La configuration des variables d’environnement varie selon le framework et la configuration. Consultez le répertoire examples/ du dépôt pour des exemples précis de mise en œuvre.

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 permissions accordées à vos utilisateurs finaux.

L’utilisateur doit être authentifié et appartenir à l’Auth0 Organization. Les composants chargent automatiquement les données de l’Organization à partir du contexte de l’utilisateur actuel. Pour en savoir plus sur l’installation et la configuration de Auth0ComponentProvider, consultez Auth0 Universal Components