Compartir por

Autohospede su portal del Centro de API

En este artículo se muestra cómo hospedar automáticamente el portal del Centro de API, un sitio web que los desarrolladores y otras partes interesadas de la organización pueden usar para detectar las API en el centro de API. Implemente una referencia de implementación del portal a partir del repositorio API Center portal starter.

Captura de pantalla del portal del Centro de API después del inicio de sesión del usuario.

Sugerencia

Nuevo Ahora puede configurar una versión administrada por Azure del portal del Centro de API. Para más información, consulte Configuración del portal del Centro de API.

Acerca de autohospedaje del portal

Puede compilar e implementar una implementación de referencia del portal mediante código en el repositorio de inicio del portal del Centro de API . El portal usa la API del plano de datos del Centro de API de Azure para recuperar datos del centro de API.

La implementación de referencia del portal del Centro de API proporciona:

  • Marco para publicar y mantener un portal de API administrado por el cliente mediante Acciones de GitHub
  • Una plataforma del portal que los clientes pueden modificar o ampliar para satisfacer sus necesidades
  • Flexibilidad para hospedar en distintas infraestructuras, incluida la implementación en servicios como Azure Static Web Apps.

Nota:

Al hospedar automáticamente el portal del Centro de API, se convierte en su mantenedor y es responsable de sus actualizaciones. El soporte técnico de Azure es limitado.

Prerrequisitos

  • Un centro de API en la suscripción de Azure. Si aún no ha creado uno, consulte Inicio rápido: Creación del centro de API.

  • Permisos para crear un registro de aplicaciones en un inquilino de Microsoft Entra asociado a su suscripción de Azure y permisos para conceder acceso a los datos en el centro de API.

  • Para compilar e implementar el portal, necesita una cuenta de GitHub y las siguientes herramientas instaladas en el equipo local:

Creación de un registro de aplicaciones de Microsoft Entra

En primer lugar, configure un registro de una aplicación en el tenant de Microsoft Entra ID. El registro de aplicaciones permite que el portal del Centro de API acceda a los datos desde el centro de API en nombre de un usuario que ha iniciado sesión.

El Centro de API puede configurar el registro de aplicaciones automáticamente o puede crear el registro de la aplicación manualmente.

Configurar automáticamente el registro de la aplicación

Para configurar el registro de la aplicación automáticamente, siga estos pasos:

  1. En Azure Portal vaya al centro de API.
  2. En el menú de la izquierda, seleccioneConfiguración del > del Centro de API.
  3. En la pestaña Proveedor de identidades , seleccione Iniciar configuración.
  4. En la pestaña Configuración rápida , seleccione Guardar y publicar.

Si necesita acceder al registro de aplicaciones más adelante, puede encontrarlo en el portal en Registros de aplicaciones. La aplicación se denomina con el siguiente formato: <api-center-name-apic-aad>.

Configure manualmente el registro de la aplicación

Si desea crear manualmente el registro de la aplicación, siga estos pasos:

  1. En el portal de Azure, vaya a Microsoft Entra ID>Administrar>registros de aplicaciones.

  2. Seleccione + Nuevo registro.

  3. En la página Registrar una aplicación, establezca los valores de la manera siguiente:

    1. Establezca Nombre en un nombre descriptivo, como api-center-portal.
    2. En Tipos de cuenta admitidos, seleccione Cuentas solo en este directorio organizativo (<nombre> de directorio : inquilino único).
    3. En URI de redirección, seleccione Aplicación de página única (SPA) y establezca el URI. Escriba el URI de la implementación del portal del Centro de API, en el siguiente formato: https://<service-name>.portal.<location>.azure-apicenter.ms. Reemplace <service name> y <location> por el nombre del centro de API y la ubicación donde se implementa, ejemplo: https://myapicenter.portal.eastus.azure-apicenter.ms.
    4. Seleccione Registrar.

Configuración de URI de redirección adicionales para la extensión de VS Code

Al habilitar la vista del portal del Centro de API en la extensión de Visual Studio Code para el Centro de API, configure también los siguientes URI de redirección en el registro de la aplicación:

  1. En Azure Portal, vaya al registro de la aplicación.

  2. En la página Administrar>autenticación , seleccione Agregar una plataforma y seleccione Aplicaciones móviles y de escritorio.

  3. Configure los tres URI de redireccionamiento personalizados siguientes:
    https://vscode.dev/redirect
    http://localhost
    ms-appx-web://Microsoft.AAD.BrokerPlugin/<application-client-id>

    Reemplace <application-client-id> por el identificador de aplicación (cliente) de esta aplicación. Puede encontrar este valor en la página Información general del registro de la aplicación.

Nota:

Al autohospedar el portal y quieras probarlo localmente antes de desplegarlo en Azure, establece el URI de redirección en https://localhost:5173 en el registro de la aplicación.

Configuración del entorno local

Siga estos pasos para compilar y probar el portal del Centro de API localmente.

  1. Clona el repositorio de inicio del portal del Centro de API a tu máquina local.

    git clone https://github.com/Azure/APICenter-Portal-Starter.git

  2. Cambie al directorio APICenter-Portal-Starter.

    cd APICenter-Portal-Starter

  3. Consulte la rama principal.

    git checkout main

  4. Para configurar el servicio, copie o cambie el nombre del public/config.example archivo a public/config.json.

  5. Después, edita el archivo public/config.json para que apunte al servicio. Actualice los valores del archivo de la siguiente manera:

    1. Reemplace <service name> y <location> por el nombre del centro de API y la ubicación donde se implementa.
    2. Reemplace <client ID> y <tenant ID> por el identificador de aplicación (cliente) y el identificador de directorio (inquilino) del registro de la aplicación que creó en la sección anterior.
    3. Actualice el valor de title a un nombre que desea que aparezca en la barra superior del portal.
    {
  "dataApiHostName": "<service name>.data.<location>.azure-apicenter.ms/workspaces/default",
  "title": "API portal",
  "authentication": {
      "clientId": "<client ID>",
      "tenantId": "<tenant ID>",
      "scopes": ["https://azure-apicenter.net/user_impersonation"],
      "authority": "https://login.microsoftonline.com/"
  }
}

  6. Instale los paquetes necesarios.

    npm install

  7. Inicie el servidor de desarrollo. El comando siguiente inicia el portal en modo de desarrollo que se ejecuta localmente:

    npm start

    Vaya al portal en https://localhost:5173.

Implementación en Azure

Para conocer los pasos para implementar el portal en Azure Static Web Apps, consulte el repositorio de inicio del portal del Centro de API .

Habilitación del inicio de sesión en el portal por parte de usuarios y grupos de Microsoft Entra

Para habilitar el inicio de sesión en el portal del Centro de API para acceder a las API, asigne el rol Lector de datos del Centro de API de Azure a usuarios o grupos de su organización, con ámbito al centro de API.

Importante

De forma predeterminada, usted y otros administradores del centro de API deben iniciar sesión para acceder a las API en el portal del Centro de API. Asegúrese de asignar el rol Lector de datos del Centro de API de Azure a usted mismo y a otros administradores.

Para obtener requisitos previos y pasos detallados para asignar un rol a usuarios y grupos, consulte Asignación de roles de Azure mediante Azure Portal. Siga estos pasos breves:

  1. En Azure Portal vaya al centro de API.
  2. En el menú de la izquierda, seleccione Control de acceso (IAM)>+ Agregar asignación de roles.
  3. En el panel Agregar asignación de roles , establezca los valores como se indica a continuación:
    1. En la página Rol , busque y seleccione Lector de datos del Centro de API de Azure. Seleccione Siguiente.
    2. En la página Miembros, en Asignar acceso a, seleccione Usuario, grupo o principal de servicio>Seleccionar miembros.
    3. En la página Seleccionar miembros , busque y seleccione los usuarios o grupos a los que asignar el rol. Haga clic en Seleccionar y, a continuación, en Siguiente.
    4. Revise la asignación de roles y seleccione Revisar y asignar.

Nota:

Para simplificar la configuración de acceso para los nuevos usuarios, se recomienda asignar el rol a un grupo de Microsoft Entra y configurar una regla de pertenencia a grupos dinámicos. Para obtener más información, consulte Crear o actualizar un grupo dinámico en microsoft Entra ID.

Después de configurar el acceso al portal, los usuarios configurados pueden iniciar sesión en el portal y ver las API en el centro de API.

Nota:

Se pide al primer usuario que inicie sesión en el portal que dé su consentimiento a los permisos solicitados por el registro de la aplicación del portal del Centro de API. A partir de entonces, no se pide a otros usuarios configurados que dé su consentimiento.

Solución de problemas

Error: "No está autorizado para acceder a este portal"

En determinadas condiciones, un usuario podría encontrar el siguiente mensaje de error después de iniciar sesión en el portal del Centro de API con una cuenta de usuario configurada:

You are not authorized to access this portal. Please contact your portal administrator for assistance. `

En primer lugar, confirme que el usuario tiene asignado el rol Lector de datos del Centro de API de Azure en el centro de API.

Si al usuario se le asigna el rol, puede haber un problema con el registro del proveedor de recursos Microsoft.ApiCenter en la suscripción y es posible que tenga que volver a registrar el proveedor de recursos. Para ello, ejecute el siguiente comando en la CLI de Azure:

az provider register --namespace Microsoft.ApiCenter

No se puede iniciar sesión en el portal

Si los usuarios a los que se ha asignado el rol Lector de datos del Centro de API de Azure no pueden completar el flujo de inicio de sesión después de seleccionar Iniciar sesión en el portal del Centro de API, puede haber un problema con la configuración del proveedor de identidades de Microsoft Entra ID.

En el registro de aplicaciones de Microsoft Entra, revise y, si es necesario, actualice la configuración del URI de redirección para asegurarse de que el URI coincide con el URI de la implementación del portal del Centro de API.

No se pueden seleccionar los permisos del Centro de API de Azure en el registro de aplicaciones de Microsoft Entra.

Si no puede solicitar permisos de API al Centro de API de Azure en el registro de aplicaciones de Microsoft Entra para el portal del Centro de API, compruebe que está buscando azure API Center (o identificador c3ca1a77-7a87-4dba-b8f8-eea115ae4573de aplicación).

Si la aplicación no está presente, puede haber un problema con el registro del proveedor de recursos Microsoft.ApiCenter en la suscripción. Es posible que tenga que volver a registrar el proveedor de recursos. Para ello, ejecute el siguiente comando en la CLI de Azure:

az provider register --namespace Microsoft.ApiCenter

Después de volver a registrar el proveedor de recursos, vuelva a intentar solicitar permisos de API.

Directiva de soporte técnico

Proporcione comentarios, solicite características y obtenga soporte técnico para la implementación de referencia del portal del Centro de API en el repositorio de inicio del portal del Centro de API .

Contenido relacionado

  • Last updated on