> ## Documentation Index > Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # 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. export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => { const stageTextMap = { "beta": "bêta", "ea": "Accès anticipé" }; const stageText = stageTextMap[stage] || "une phase de lancement du produit"; const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages"; const linkify = (text, url) => { return {text}; }; const includeDetails = (plans, contact, terms) => { const hasDetails = terms || plans || contact; if (!hasDetails) return null; return {plans && <>Cette fonctionnalité est offerte avec les forfaits {linkify(`${plans}`, "https://auth0.com/pricing")}. } {contact && "Pour y participer, communiquez avec " + contact + ". "} {terms && <>En utilisant cette fonctionnalité, vous acceptez les conditions applicables de l’essai gratuit énoncées dans le {linkify("Master Subscription Agreement", "https://www.okta.com/legal")} d’Okta.} ; }; return La fonctionnalité {feature} est en {linkify(stageText, prsLink)}. {includeDetails(plans, contact, terms)} ; }; 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](/docs/fr-ca/manage-users/organizations), 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](/docs/fr-ca/api/myorganization), qui fonctionne avec des jetons associés à l’utilisateur, pour créer un [tableau de bord d’administration SSO en libre-service](/docs/fr-ca/authenticate/enterprise-connections/self-service-enterprise-configuration). 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](/docs/fr-ca/api/myorganization) 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](/docs/fr-ca/api), les applications et les [portées](/docs/fr-ca/api/myorganization) appropriées. **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**](https://manage.auth0.com/#/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**](https://manage.auth0.com/#/applications). 2. Sélectionnez **[My Organization API](/docs/fr-ca/api/myorganization)** 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](/docs/fr-ca/authenticate/enterprise-connections/connection-profile#connection-profile) : Sélectionnez ou créez un profil avec des mappages d’attributs de connexion. * [User Attribute Profile](/docs/fr-ca/authenticate/enterprise-connections/user-attribute-profile#user-attribute-profile) : Sélectionnez ou créez un profil avec des mappages d’attributs utilisateur. * [Identity Providers pris en charge](/docs/fr-ca/authenticate/identity-providers) : 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**](https://manage.auth0.com/#/connections/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. ``` 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**](https://manage.auth0.com/#/organizations). 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 : ```bash wrap lines theme={null} 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](/docs/fr-ca/get-started/universal-components/universal-components-overview). **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**](https://manage.auth0.com/#/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**](https://manage.auth0.com/#/applications). 2. Sélectionnez **[My Organization API](/docs/fr-ca/api/myorganization)** 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](/docs/fr-ca/authenticate/enterprise-connections/connection-profile#connection-profile) : sélectionnez ou créez un profil comprenant des mappages d’attributs de connexion. * [Profil d’attributs utilisateur](/docs/fr-ca/authenticate/enterprise-connections/user-attribute-profile#user-attribute-profile) : sélectionnez ou créez un profil comprenant des mappages d’attributs utilisateur. * [Fournisseurs d’identité pris en charge](/docs/fr-ca/authenticate/identity-providers) : 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**](https://manage.auth0.com/#/connections/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. ``` 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**](https://manage.auth0.com/#/organizations). 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 : ```bash wrap lines theme={null} 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](https://auth0.com/docs/quickstart/webapp/nextjs) 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](/docs/fr-ca/get-started/universal-components/universal-components-overview) **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**](https://manage.auth0.com/#/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**](https://manage.auth0.com/#/applications). 2. Sélectionnez **[My Organization API](/docs/fr-ca/api/myorganization)** 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](/docs/fr-ca/authenticate/enterprise-connections/connection-profile#connection-profile) : Sélectionnez ou créez un profil avec des mappages d’attributs de connexion. * [Profil d’attributs utilisateur](/docs/fr-ca/authenticate/enterprise-connections/user-attribute-profile#user-attribute-profile) : Sélectionnez ou créez un profil avec des mappages d’attributs utilisateur. * [Fournisseurs d’identité pris en charge](/docs/fr-ca/authenticate/identity-providers) : 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**](https://manage.auth0.com/#/connections/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. ``` 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**](https://manage.auth0.com/#/organizations). 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 : ```bash wrap lines theme={null} 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](/docs/fr-ca/get-started/universal-components/universal-components-overview)