Compartir a través de

Inicio rápido: Inicio de sesión de usuarios y llamada a una API web en una aplicación web de ejemplo Node.js

Se aplica a:Círculo blanco con un símbolo X gris. inquilinos de personal Círculo verde con un símbolo de marca de verificación blanca. inquilinos externos (más información)

En esta guía de inicio rápido, aprendes a iniciar sesión de usuarios y a llamar a una API web desde una aplicación web de Node.js en tu entidad externa. La aplicación de ejemplo llama a una API de .NET. La aplicación web de ejemplo usa la Biblioteca de autenticación de Microsoft (MSAL) para Node para controlar la autenticación.

Prerrequisitos

Configuración de ámbitos y roles de API

Al registrar la API web, debe configurar ámbitos de API para definir los permisos que una aplicación cliente puede solicitar para acceder a la API web. Además, debe configurar roles de aplicación para especificar los roles disponibles para los usuarios o aplicaciones y conceder los permisos de API necesarios a la aplicación web para permitir que llame a la API web.

Configuración de ámbitos de API

Una API debe publicar un mínimo de un ámbito, también denominado Permiso delegado, para que las aplicaciones cliente obtengan un token de acceso para un usuario correctamente. Para publicar un ámbito, siga estos pasos:

  1. En la página Registros de aplicaciones, seleccione la API que creó (como ciam-ToDoList-api) para abrir la página Información general.

  2. En Administrar, seleccione Exponer una API.

  3. En la parte superior de la página, junto a URI de id. de aplicación, seleccione el vínculo Agregar para generar un URI que sea único para esta aplicación.

  4. Acepte el URI de identificador de aplicación propuesto, como api://{clientId}, y seleccione Guardar. Cuando la aplicación web solicite un token de acceso para la API web, deberá agregar este URI como prefijo para cada ámbito que se defina para la API.

  5. En Ámbitos definidos con esta API, seleccione Agregar un ámbito.

  6. Escriba los valores siguientes que definan el acceso de lectura a la API y, a continuación, seleccione Agregar ámbito para guardar los cambios:

    Propiedad Valor
    Nombre de ámbito ToDoList.Leer
    ¿Quién puede dar el consentimiento? Solo administradores
    Nombre para mostrar del consentimiento del administrador Leer una lista de tareas pendientes de los usuarios con "TodoListApi"
    Descripción del consentimiento del administrador Permite que la aplicación lea la lista de tareas pendientes del usuario utilizando ''TodoListApi''.
    Estado Habilitado

  7. Seleccione Agregar un ámbito de nuevo y escriba los valores siguientes que definen el ámbito de acceso de lectura y escritura a la API. Seleccione Agregar ámbito para guardar los cambios:

    Propiedad Valor
    Nombre de ámbito ToDoList.ReadWrite
    ¿Quién puede dar el consentimiento? Solo administradores
    Nombre para mostrar del consentimiento del administrador Leer y escribir una lista de tareas pendientes con 'ToDoListApi'
    Descripción del consentimiento del administrador Permitir que la aplicación lea y escriba la lista de tareas pendientes de los usuarios mediante "ToDoListApi"
    Estado Habilitado

Obtenga más información sobre el principio de privilegios mínimos al publicar permisos para una API web.

Configurar roles de aplicación

Una API debe publicar un mínimo de un rol de aplicación para las aplicaciones, también denominado Permiso de aplicación, para que las aplicaciones cliente obtengan un token de acceso como ellos mismos. Los permisos de aplicación son el tipo de permisos que las API deben publicar cuando quieran permitir que las aplicaciones cliente se autentiquen correctamente como ellas mismas y no necesiten registrar a los usuarios. Para publicar un permiso de aplicación, siga estos pasos:

  1. En la página Registros de aplicaciones, seleccione la aplicación que creó (como ciam-ToDoList-api) para abrir la página Información general.

  2. En Administrar, seleccione Roles de aplicación.

  3. Seleccione Crear rol de aplicación, introduzca los siguientes valores y seleccione Aplicar para guardar los cambios:

    Propiedad Valor
    Nombre para mostrar ToDoList.Read.All
    Tipos de miembros permitido Aplicaciones
    Valor ToDoList.Read.All
    Descripción Permitir que la aplicación lea la lista de tareas pendientes de cada usuario utilizando ''TodoListApi''
    ¿Quiere habilitar este rol de aplicación? Mantenerla activada

  4. Vuelva a seleccionar Crear rol de aplicación, introduzca los siguientes valores para el segundo rol de aplicación y seleccione Aplicar para guardar los cambios:

    Propiedad Valor
    Nombre para mostrar ToDoList.ReadWrite.All
    Tipos de miembros permitido Aplicaciones
    Valor ToDoList.ReadWrite.All
    Descripción Permitir que la aplicación lea y escriba cada lista de tareas pendientes de los usuarios mediante "ToDoListApi"
    ¿Quiere habilitar este rol de aplicación? Mantenerla activada

Configuración de notificaciones opcionales

Puede agregar la notificación opcional idtyp para ayudar a la API web a determinar si un token es un token de aplicación o un token de aplicación y un token de usuario. Aunque puede usar una combinación de declaraciones scp y roles para el mismo propósito, el uso de la declaración idtyp es la manera más fácil de distinguir un token de aplicación de un token de aplicación + usuario. Por ejemplo, el valor de esta reclamación es app cuando el token es un token exclusivo para aplicaciones.

Siga los pasos descritos en el artículo Configuración de notificaciones opcionales para agregar la notificación idtyp al token de acceso:

  • En Tipo de token , seleccione Acceso.
  • En la lista de notificaciones opcionales, seleccione idtyp.

Concesión de permisos de API a la aplicación web

Para conceder permisos de API a su aplicación cliente (ciam-client-app), siga estos pasos:

  1. En la página Registros de aplicaciones, seleccione la aplicación que creó (como ciam-client-app) para abrir la página Información general.

  2. En Administrar, seleccione Permisos de API.

  3. En Permisos configurados, seleccione Agregar un permiso.

  4. Seleccione la pestaña API usadas en mi organización.

  5. En la lista de API, seleccione la API como ciam-ToDoList-api.

  6. Seleccione la opción Permisos delegados.

  7. En la lista de permisos, seleccione ToDoList.Read, ToDoList.ReadWrite (use el cuadro de búsqueda si es necesario).

  8. Seleccione el botón Agregar permisos. En este momento, ha asignado los permisos correctamente. Sin embargo, dado que se trata de un inquilino del cliente, los propios usuarios consumidores no pueden dar su consentimiento a estos permisos. Para solucionar este problema, como administrador debe consentir estos permisos en nombre de todos los usuarios del inquilino:

    1. Seleccione Conceder consentimiento del administrador para <nombre del inquilino> y, luego, elija Sí.

    2. Seleccione Actualizar, luego compruebe que Concedido para <su nombre de inquilino> aparece en Estado en ambos ámbitos.

  9. En la lista Permisos configurados, seleccione los permisos ToDoList.Read y ToDoList.ReadWrite, de uno en uno y, a continuación, copie el URI completo del permiso para su uso posterior. El URI de permiso completo tiene un aspecto similar a api://{clientId}/{ToDoList.Read} o api://{clientId}/{ToDoList.ReadWrite}.

Clonar o descargar una aplicación web y API web de ejemplo

Para obtener la aplicación de ejemplo, puede clonarla desde GitHub o descargarla como un archivo .zip.

  • Para clonar la muestra, abra un símbolo del sistema y desplácese hasta donde desea crear el proyecto, e introduzca el siguiente comando:

    git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

  • Descargue el archivo .zip. Extráigalo en una ruta de archivo donde la longitud del nombre sea inferior a 260 caracteres.

Instalación de dependencias del proyecto

  1. Abra una ventana de consola y cambie al directorio que contiene la aplicación Node.js/Express de ejemplo:

    cd 2-Authorization\4-call-api-express\App

  2. Ejecute los siguientes comandos para instalar las dependencias de la aplicación web:

    npm install && npm update

Configuración de la aplicación web y la API de ejemplo

Para usar el registro de la aplicación en el ejemplo de aplicación web cliente:

  1. En el editor de código, abra el archivo App\authConfig.js.

  2. Busque el marcador de posición:

    • Enter_the_Application_Id_Here y reemplácelo por el Id. de aplicación (cliente) de la aplicación de cliente que registró anteriormente. La aplicación cliente es la que registró en los requisitos previos.
    • Enter_the_Tenant_Subdomain_Here y reemplácelo por el subdominio Directorio (inquilino). Por ejemplo, si el dominio principal del cliente es contoso.onmicrosoft.com, utilice contoso. Si no tiene el nombre del inquilino, aprenda a leer los detalles del inquilino.
    • Enter_the_Client_Secret_Here y reemplácelo con el valor secreto de aplicación que copió anteriormente.
    • Enter_the_Web_Api_Application_Id_Here y reemplácelo por el identificador de aplicación (cliente) de la API web que copió anteriormente como parte de los requisitos previos.

Para usar el registro de tu aplicación en la muestra de la API web:

  1. En el editor de código, abra el archivo API\ToDoListAPI\appsettings.json.

  2. Busque el marcador de posición:

    • Enter_the_Application_Id_Here y reemplácelo por el id. de aplicación (cliente) de la API web que copió. La aplicación de API web es una que registró anteriormente como parte de los requisitos previos.
    • Enter_the_Tenant_Id_Here y reemplácelo por el identificador de directorio (inquilino) que copió anteriormente.
    • Enter_the_Tenant_Subdomain_Here y reemplácelo por el subdominio Directorio (inquilino). Por ejemplo, si el dominio principal del cliente es contoso.onmicrosoft.com, utilice contoso. Si no tiene el nombre del inquilino, aprenda a leer los detalles del inquilino.

Ejecute y pruebe la aplicación web y la API de ejemplo

  1. Abra una ventana de consola y ejecute la API web mediante los siguientes comandos:

    cd 2-Authorization\4-call-api-express\API\ToDoListAPI
dotnet run

  2. Ejecute el cliente de la aplicación web mediante los siguientes comandos:

    cd 2-Authorization\4-call-api-express\App
npm install
npm start

  3. Abra el explorador web y vaya a http://localhost:3000.

  4. Haga clic en el botón Iniciar sesión. Se le pedirá que inicie sesión.

    Captura de pantalla del inicio de sesión en una aplicación web de nodos.

  5. En la página de inicio de sesión, escriba su dirección de correo electrónico, seleccione Siguiente, escriba la contraseña y, a continuación, seleccione Iniciar sesión. Si no tiene una cuenta, seleccione el vínculo ¿No tiene una cuenta? Cree una, que inicia el flujo de registro.

  6. Si elige la opción de registro, después de rellenar el correo electrónico, el código de acceso de un solo uso, la nueva contraseña y más detalles de la cuenta, completará todo el flujo de registro. Verá una página similar a la que aparece en la siguiente captura de pantalla. Verá una página similar si elige la opción de inicio de sesión.

    Captura de pantalla del inicio de sesión en una aplicación web de nodos y llamada a una API.

Llamada a la API

  1. Para llamar a la API, seleccione el vínculo Ver la lista de tareas pendientes. Verá una página similar a la que aparece en la siguiente captura de pantalla.

    Captura de pantalla de la API de manipulación de lista de tareas pendientes.

  2. Manipule la lista de tareas pendientes mediante la creación y eliminación de elementos.

Cómo funciona

Desencadenará una llamada API cada vez que vea, agregue o quite una tarea. Cada vez que se realiza una llamada a una API, la aplicación web cliente adquiere un token de acceso con los permisos necesarios (scopes) para llamar a un endpoint de la API. Por ejemplo, para leer una tarea, la aplicación web cliente debe adquirir un token de acceso con ToDoList.Read permiso o ámbito.

El punto de conexión de API web debe comprobar si los permisos o ámbitos del token de acceso, proporcionados por la aplicación cliente, son válidos. Si el token de acceso es válido, el punto de conexión responde a la solicitud HTTP; de lo contrario, responde con un error HTTP 401 Unauthorized.

Contenido relacionado