Crear una interfaz de administración delegada con la API My Organization

Describe cómo usar Universal Components para crear interfaces de administración delegada con la API My Organization de Auth0.

Universal Components le permite crear un panel de administración de autoservicio dentro de su propia aplicación. Esto permite que sus clientes B2B, designados como administradores de su Organización de Auth0, gestionen su propia marca, proveedores de identidad y dominios verificados, sin necesidad de acceder a Auth0 Dashboard ni de recurrir a un equipo de soporte para realizar acciones administrativas básicas.

​

Cómo funciona

Universal Components utiliza la API My Organization, que opera con tokens con ámbito de usuario, para crear un Dashboard administrativo de SSO de autoservicio. Cuando un administrador inicia sesión en el Dashboard integrado en su aplicación, el SDK de Auth0 obtiene un Token de acceso que incluye alcances específicos de la Organización para privilegios administrativos. Los componentes utilizan este token para llamar a la API en nombre del usuario que ha iniciado sesión, lo que garantiza que los administradores delegados solo puedan modificar la Organización de Auth0 específica a la que pertenecen.

​

Componentes disponibles

Cada componente se asocia con endpoints específicos de la API My Organization para realizar tareas administrativas.

Componente	Endpoint de API
OrganizationDetailsEdit — Edita el nombre de la organización, el nombre para mostrar, los colores de la marca y el logotipo.	/my-org/details
SsoProviderTable — Enumera, habilita, deshabilita, elimina y desvincula proveedores de identidad de SSO.	/my-org/identity-providers
SsoProviderCreate — Asistente de varios pasos para crear proveedores de SSO (Okta, ADFS, SAML, OIDC, Google Workspace, Azure AD, Ping Federate).	/my-org/identity-providers
SsoProviderEdit — Configura los ajustes de autenticación, habilita el aprovisionamiento y administra tokens de SCIM y asociaciones de dominios.	/my-org/identity-providers/{idp_id}
DomainTable — Crea, verifica, elimina y asocia dominios con proveedores de identidad.	/my-org/domains

​

Configurar Auth0 Dashboard

Antes de usar cualquier componente de My Organization, debes configurar tu inquilino de Auth0 con las APIs, las aplicaciones y los alcances adecuados.

React

Configuración de Auth0 Dashboard - Completa todos los pasos que se indican a continuación antes de usar los componentes de My Organization.

​

Crear aplicación

Este ejemplo usa una aplicación de una sola página (SPA). Para los frameworks de React con renderizado del lado del servidor, consulta la pestaña Next.js.

1. Vaya a Auth0 Dashboard > Applications > Applications. Seleccione Create Application.

2. Selecciona Aplicaciones web de una sola página.

3. En la pestaña Settings, agrega http://localhost:5173 a los siguientes campos:
   A. Allowed Callback URLs
   B. Allowed Logout URLs

4. En Login Experience, seleccione:
   A. Usuarios empresariales.
   B. (Opcional) Solicitar Organización.

​

Habilitar la API My Organization

1. Vaya a Dashboard > Applications > APIs.
2. Seleccione My Organization API y asegúrese de que esté habilitada en su inquilino.

​

Configurar el acceso a la aplicación

1. Vaya a la pestaña Application Access.
2. Selecciona Edit en la aplicación que quieras usar.
3. Configure los siguientes ajustes:
   A. Perfil de conexión: Seleccione o cree un perfil con asignaciones de atributos de conexión.
   B. Perfil de atributos de usuario: Seleccione o cree un perfil con asignaciones de atributos de usuario.
   C. Proveedores de identidad compatibles: habilite los proveedores que sus clientes pueden usar.
   D. Comportamiento de eliminación de la conexión: elija Allow o Allow if Empty.
       • Allow: Los usuarios pueden eliminar conexiones, lo que elimina todos los usuarios de esa conexión.
       • Allow if Empty: Los usuarios solo pueden eliminar conexiones que no tengan usuarios.
   E. Autorización de acceso de usuario: Elija No autorizado, Autorizado o Todos.
       • No autorizado: No se concede ningún permiso.
       • Autorizado: Seleccione permisos específicos.
       • Todos: Incluye todos los permisos actuales y futuros.
   F. Autorización de acceso de credenciales de cliente: Elija No autorizado, Autorizado o Todos.
4. Selecciona Guardar.

​

Configurar base de datos y usuario

1. Vaya a Auth0 Dashboard > Authentication > Database para crear una conexión de base de datos.
2. Seleccione la pestaña Applications de la conexión y habilite la nueva aplicación SPA.
3. Cree un usuario de prueba en esta base de datos para realizar pruebas iniciales.

​

Configurar rol

1. Cree un rol (por ejemplo, “Administrador de la organización”).
2. Agrega al rol los alcances requeridos de la API My Organization.

Alcances requeridos

    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

El token del usuario solo incluirá los permisos que existan tanto en el rol que tiene asignado como en la configuración de Autorización de acceso del usuario establecida en el paso anterior.

​

Crear Organización

1. Vaya a Organizaciones > Crear organización.
2. Configure la Organización de Auth0:
   A. En Miembros: agregue su usuario de prueba y asígnele el rol “Administrador de la organización”.
   B. En Conexiones: habilite su conexión de base de datos.

​

Configurar variables de entorno

1. Cree un archivo .env en la raíz de su proyecto de React:

VITE_AUTH0_DOMAIN=your-domain.auth0.com
  VITE_AUTH0_CLIENT_ID=your-spa-client-id

Usted es responsable de garantizar que su uso de My Organization API y Embeddable UI Components cumpla con sus políticas de seguridad y con la legislación aplicable, incluidos los permisos otorgados a sus usuarios finales.

El usuario debe estar autenticado y ser miembro de la Organización de Auth0. Los componentes cargan automáticamente los datos de la Organización desde el contexto del usuario actual. Para obtener más información, consulta Auth0 Universal Components para ver la instalación y la configuración de Auth0ComponentProvider

Next.js

Configuración de Auth0 Dashboard - Completa todos los pasos que se indican a continuación antes de usar los componentes de My Organization.

​

Crear aplicación

En este ejemplo se usa una Regular Web Application para Next.js. También puede configurar una Single Page Application siguiendo pasos similares.

1. Vaya a Auth0 Dashboard > Applications > Applications. Seleccione Crear aplicación.

2. Seleccione Regular Web Application.

3. En la pestaña Settings, agrega http://localhost:5173 a los siguientes campos:
   A. Allowed Callback URLs
   B. Allowed Logout URLs

4. En Login Experience, seleccione:
   A. Usuarios empresariales.
   B. (Opcional) Solicitar Organización.

​

Habilitar la API My Organization

1. Vaya a Dashboard > Applications > APIs.
2. Seleccione My Organization API y asegúrese de que esté habilitada en su inquilino.

​

Configurar el acceso a la aplicación

1. Vaya a la pestaña Application Access.
2. Selecciona Edit en la aplicación que quieras usar.
3. Configure las siguientes opciones:
   A. Perfil de conexión: Seleccione o cree un perfil con asignaciones de atributos de conexión.
   B. Perfil de atributos de usuario: Seleccione o cree un perfil con asignaciones de atributos de usuario.
   C. Proveedores de identidad compatibles: Habilite los proveedores que sus clientes puedan usar.
   D. Comportamiento de eliminación de la conexión: elija Permitir o Permitir si está vacía.
       • Permitir: Los usuarios pueden eliminar conexiones, lo que elimina todos los usuarios de esa conexión.
       • Permitir si está vacía: Los usuarios solo pueden eliminar conexiones que no tengan usuarios.
   E. Autorización de acceso de usuario: Elija No autorizado, Autorizado o Todos.
       • No autorizado: No se concede ningún permiso.
       • Autorizado: Seleccione permisos específicos.
       • Todos: Incluye todos los permisos actuales y futuros.
   F. Autorización de acceso para credenciales de cliente: Elija No autorizado, Autorizado o Todos.
4. Selecciona Guardar.

​

Configurar base de datos y usuario

1. Vaya a Auth0 Dashboard > Authentication > Database para crear una conexión de base de datos.
2. Seleccione la pestaña Applications de la conexión y habilite la nueva aplicación SPA.
3. Cree un usuario de prueba en esta base de datos para realizar pruebas iniciales.

​

Configurar rol

1. Cree un rol (por ejemplo, “Administrador de la organización”).
2. Agrega al rol los alcances requeridos de la API My Organization.

Alcances requeridos

    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

El token del usuario solo incluirá los permisos que existan tanto en el rol que tiene asignado como en la configuración de Autorización de acceso del usuario establecida en el paso anterior.

​

Crear Organización

1. Vaya a Organizaciones > Crear organización.
2. Configure la Organización de Auth0:
   A. En Miembros: agregue su usuario de prueba y asígnele el rol “Administrador de la organización”.
   B. En Conexiones: habilite su conexión de base de datos.

​

Configurar variables de entorno

1. Cree un archivo .env en la raíz de su proyecto de 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

Para Next.js con el SDK @auth0/nextjs-auth0, consulta la documentación del SDK de Auth0 para Next.js para obtener instrucciones de configuración completas.

Usted es responsable de garantizar que el uso que haga de My Organization API y Embeddable UI Components cumpla con sus políticas de seguridad y con las leyes aplicables, incluidos los permisos otorgados a sus usuarios finales.

El usuario debe estar autenticado y ser miembro de la Organización de Auth0. Los componentes cargan automáticamente los datos de la Organización desde el contexto del usuario actual. Para obtener más información, consulta Auth0 Universal Components para ver la instalación y la configuración de Auth0ComponentProvider

shadcn

Configuración de Auth0 Dashboard - Completa todos los pasos que se indican a continuación antes de usar los componentes de My Organization.

​

Crear aplicación

En este ejemplo se usa una Single Page Application, pero también puedes configurar una Regular Web Application (RWA) siguiendo pasos similares.

1. Vaya a Auth0 Dashboard > Applications > Applications. Seleccione Create Application.

2. Selecciona Aplicaciones web de una sola página.

3. En la pestaña Settings, agrega http://localhost:5173 a los siguientes campos:
   A. Allowed Callback URLs
   B. Allowed Logout URLs

4. En Login Experience, seleccione:
   A. Usuarios empresariales.
   B. (Opcional) Solicitar Organización.

​

Habilitar la API My Organization

1. Vaya a Dashboard > Applications > APIs.
2. Seleccione My Organization API y asegúrese de que esté habilitada en su inquilino.

​

Configurar el acceso a la aplicación

1. Vaya a la pestaña Application Access.
2. Selecciona Edit en la aplicación que quieras usar.
3. Configure los siguientes ajustes:
   A. Perfil de conexión: Seleccione o cree un perfil con asignaciones de atributos de conexión.
   B. Perfil de atributos de usuario: Seleccione o cree un perfil con asignaciones de atributos de usuario.
   C. Proveedores de identidad compatibles: Habilite los proveedores que sus clientes puedan usar.
   D. Comportamiento al eliminar la conexión: Elija Permitir o Permitir si está vacía.
       • Permitir: Los usuarios pueden eliminar conexiones, lo que elimina todos los usuarios de esa conexión.
       • Permitir si está vacía: Los usuarios solo pueden eliminar conexiones que no tengan usuarios.
   E. Autorización de acceso de usuario: Elija No autorizado, Autorizado o Todos.
       • No autorizado: No se concede ningún permiso.
       • Autorizado: Seleccione permisos específicos.
       • Todos: Incluye todos los permisos actuales y futuros.
   F. Autorización de acceso para credenciales de cliente: Elija No autorizado, Autorizado o Todos.
4. Selecciona Guardar.

​

Configurar base de datos y usuario

1. Vaya a Auth0 Dashboard > Authentication > Database para crear una conexión de base de datos.
2. Seleccione la pestaña Applications de la conexión y habilite la nueva aplicación SPA.
3. Cree un usuario de prueba en esta base de datos para realizar pruebas iniciales.

​

Configurar rol

1. Cree un rol (por ejemplo, “Administrador de la organización”).
2. Agrega al rol los alcances requeridos de la API My Organization.

Alcances requeridos

    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

El token del usuario solo incluirá los permisos que existan tanto en el rol que tiene asignado como en la configuración de Autorización de acceso del usuario establecida en el paso anterior.

​

Crear Organización

1. Vaya a Organizaciones > Crear organización.
2. Configure la Organización de Auth0:
   A. En Miembros: agregue su usuario de prueba y asígnele el rol “Administrador de la organización”.
   B. En Conexiones: habilite su conexión de base de datos.

​

Configurar variables de entorno

La configuración de las variables de entorno varía según el framework y la configuración. Consulta el directorio examples/ del repositorio para ver ejemplos de implementación específicos.

Cree un archivo .env en la raíz de su proyecto de React:

VITE_AUTH0_DOMAIN=your-domain.auth0.com
VITE_AUTH0_CLIENT_ID=your-spa-client-id

Usted es responsable de garantizar que su uso de My Organization API y Embeddable UI Components cumpla con sus políticas de seguridad y con la legislación aplicable, incluidos los permisos otorgados a sus usuarios finales.

El usuario debe estar autenticado y ser miembro de la Organización de Auth0. Los componentes cargan automáticamente los datos de la Organización desde el contexto del usuario actual. Para obtener más información, consulta Auth0 Universal Components para ver la instalación y la configuración de Auth0ComponentProvider