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

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’Organization, 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 la fourniture 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`
OrganizationMemberManagement — Gérer les membres de l’Organization, les invitations et les attributions de rôles.	`/my-org/members`, `/my-org/invitations`
OrganizationMemberDetail — Consulter et gérer le profil d’un membre ainsi que les rôles qui lui sont attribués.	`/my-org/members/{user_id}`, `/my-org/members/{user_id}/roles`

Contrôles tenant compte des autorisations

Les composants My Organization utilisent automatiquement les autorisations My Organization de l’administrateur connecté pour adapter les contrôles offerts. Selon le composant et l’action, les contrôles non offerts sont masqués ou désactivés, avec une explication. Les gestionnaires de mutation effectuent également des vérifications des autorisations côté client avant d’envoyer des requêtes. Dans les applications SPA React, les composants lisent la demande personnalisée urn:auth0:my_org_current_user_permissions parmi les demandes du jeton d’ID. Dans les applications Next.js qui utilisent le mode proxy, ils lisent les autorisations dans la réponse de profil du proxy. Les jetons d’accès autorisent les requêtes vers l’API My Organization, qui demeure la limite d’autorisation de référence. La prop readOnly est un contrôle distinct au niveau de l’application qui désactive les mutations, même lorsque l’administrateur dispose des autorisations requises. Les mutations de membres exigent également que le membre ciblé ait un niveau d’accès limited ou full.

Zone du composant	Autorisations utilisées pour les opérations restreintes
Détails de l’Organization	`update:my_org:details`
Domaines	`create:my_org:domains`, `update:my_org:domains`, `delete:my_org:domains`, `create:my_org:identity_providers_domains`, `delete:my_org:identity_providers_domains`
Fournisseurs SSO	`create:my_org:identity_providers`, `update:my_org:identity_providers`, `delete:my_org:identity_providers`, `update:my_org:identity_providers_detach`, ainsi que les autorisations de domaine, de fourniture et de jeton SCIM requises par la configuration sélectionnée
Membres et invitations	`create:my_org:member_invitations`, `delete:my_org:member_invitations`, `create:my_org:member_roles`, `delete:my_org:member_roles`, `delete:my_org:memberships`

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
Next.js
shadcn

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 cadres d’applications React avec rendu côté serveur, consultez l’onglet Next.js.

Accédez à Auth0 Dashboard > Applications > Applications. Sélectionnez Create Application.
Choisissez Single Page Web Applications.
Dans l’onglet Settings, ajoutez http://localhost:5173 aux champs suivants :
- URL de rappel autorisées
- URL de déconnexion autorisées
Sous Expérience de connexion, sélectionnez :
- Utilisateurs professionnels.
- (Facultatif) Demander l’organisation.

Activer l’API My Organization

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

Configurer l’accès à l’application

Accédez à l’onglet Application Access.
Sélectionnez Edit pour l’application que vous souhaitez utiliser.
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.
Sélectionnez Enregistrer.

Configurer la base de données et l’utilisateur

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

Configurer le rôle

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

Permissions requises

    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
    read:my_org:permissions
    read:my_org:user_stores
    read:my_org:members
    delete:my_org:memberships
    read:my_org:member_roles
    create:my_org:member_roles
    delete:my_org:member_roles
    read:my_org:member_invitations
    create:my_org:member_invitations
    delete:my_org:member_invitations
    read:my_org:roles

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 organisation

Accédez à Organizations > Create Organization.
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

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

Les composants My Organization nécessitent un jeton d’accès pour l’audience de l’API My Organization. Pour la configuration d’une SPA React, consultez Configurer Auth0ComponentProvider.

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

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 Regular Web Application avec Next.js. Vous pouvez également configurer une Single Page Application en suivant des étapes semblables.

Accédez à Auth0 Dashboard > Applications > Applications. Sélectionnez Create Application.
Choisissez Regular Web Application.
Dans l’onglet Settings, ajoutez http://localhost:5173 aux champs suivants :
- URL de rappel autorisées
- URL de déconnexion autorisées
Sous Expérience de connexion, sélectionnez :
- Utilisateurs professionnels.
- (Facultatif) Demander l’organisation.

Activer l’API Mon organisation

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

Configurer l’accès à l’application

Accédez à l’onglet Application Access.
Sélectionnez Edit pour l’Application que vous souhaitez utiliser.
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.
Sélectionnez Enregistrer.

Configurer la base de données et l’utilisateur

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

Configurer le rôle

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

Permissions requises

    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
    read:my_org:permissions
    read:my_org:user_stores
    read:my_org:members
    delete:my_org:memberships
    read:my_org:member_roles
    create:my_org:member_roles
    delete:my_org:member_roles
    read:my_org:member_invitations
    create:my_org:member_invitations
    delete:my_org:member_invitations
    read:my_org:roles

Créer une organisation

Accédez à Organizations > Create Organization.
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

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 obtenir les instructions de configuration complètes.

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.

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 Single Page Application, mais vous pouvez aussi configurer une Regular Web Application (RWA) en suivant des étapes semblables.

Accédez à Auth0 Dashboard > Applications > Applications. Sélectionnez Create Application.
Choisissez Single Page Web Applications.
Dans l’onglet Settings, ajoutez http://localhost:5173 aux champs suivants :
- URL de rappel autorisées
- URL de déconnexion autorisées
Sous Expérience de connexion, sélectionnez :
- Utilisateurs professionnels.
- (Facultatif) Demander l’organisation.

Activer l’API My Organization

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

Configurer l’accès à l’application

Accédez à l’onglet Application Access.
Sélectionnez Edit pour l’application que vous souhaitez utiliser.
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.
Sélectionnez Enregistrer.

Configurer la base de données et l’utilisateur

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

Configurer le rôle

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

Permissions requises

    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
    read:my_org:permissions
    read:my_org:user_stores
    read:my_org:members
    delete:my_org:memberships
    read:my_org:member_roles
    create:my_org:member_roles
    delete:my_org:member_roles
    read:my_org:member_invitations
    create:my_org:member_invitations
    delete:my_org:member_invitations
    read:my_org:roles

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 organisation

Accédez à Organizations > Create Organization.
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 cadre d’applications 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

Composants Web

Composants iOS

Composants Android

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

Fonctionnement

Composants disponibles

Contrôles tenant compte des autorisations

Configurer Auth0 Dashboard

Créer l’application

Activer l’API My Organization

Configurer l’accès à l’application

Configurer la base de données et l’utilisateur

Configurer le rôle

Créer une organisation

Configurer les variables d’environnement

Créer l’application

Activer l’API Mon organisation

Configurer l’accès à l’application

Configurer la base de données et l’utilisateur

Configurer le rôle

Créer une organisation

Configurer les variables d’environnement

Créer l’application

Activer l’API My Organization

Configurer l’accès à l’application

Configurer la base de données et l’utilisateur

Configurer le rôle

Créer une organisation

Configurer les variables d’environnement

​Fonctionnement

​Composants disponibles

​Contrôles tenant compte des autorisations

​Configurer Auth0 Dashboard

​Créer l’application

​Activer l’API My Organization

​Configurer l’accès à l’application

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

​Configurer le rôle

​Créer une organisation

​Configurer les variables d’environnement

​Créer l’application

​Activer l’API Mon organisation

​Configurer l’accès à l’application

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

​Configurer le rôle

​Créer une organisation

​Configurer les variables d’environnement

​Créer l’application

​Activer l’API My Organization

​Configurer l’accès à l’application

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

​Configurer le rôle

​Créer une organisation

​Configurer les variables d’environnement

Fonctionnement

Composants disponibles

Contrôles tenant compte des autorisations

Configurer Auth0 Dashboard

Créer l’application

Activer l’API My Organization

Configurer l’accès à l’application

Configurer la base de données et l’utilisateur

Configurer le rôle

Créer une organisation

Configurer les variables d’environnement

Créer l’application

Activer l’API Mon organisation

Configurer l’accès à l’application

Configurer la base de données et l’utilisateur

Configurer le rôle

Créer une organisation

Configurer les variables d’environnement

Créer l’application

Activer l’API My Organization

Configurer l’accès à l’application

Configurer la base de données et l’utilisateur

Configurer le rôle

Créer une organisation

Configurer les variables d’environnement