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

En este inicio rápido se usa un ejemplo Node.js aplicación web para mostrar cómo iniciar sesión los usuarios mediante el flujo de código de autorización y llamar a Microsoft Graph API. En el ejemplo se usa el nodo MSAL para controlar la autenticación.

Requisitos previos

• Suscripción a Azure. Creación de una suscripción de Azure gratis.
• Node.js
• Visual Studio Code u otro editor de código

Registrar la aplicación y los identificadores de registro

Para completar el registro, proporcione un nombre a la aplicación y especifique los tipos de cuenta admitidos. Una vez registrada, el panel Información general de la aplicación muestra los identificadores necesarios en el código fuente de la aplicación.

1. Inicie sesión en el centro de administración de Microsoft Entra.

2. Si tiene acceso a varios inquilinos, use el icono Configuración del menú superior para cambiar al inquilino en el que desea registrar la aplicación desde el menú Directorios y suscripciones.

3. Vaya a Identity>Aplicaciones>Registros de aplicaciones, seleccione Nuevo registro.

4. Escriba un nombre para la aplicación, como identity-client-web-app.

5. Para la opción Tipos de cuenta admitidos, seleccione Solo las cuentas de este directorio organizativo. Para obtener información sobre los distintos tipos de cuenta, selecciona la opción Ayudarme a elegir.

6. Seleccione Registrar.

   

7. El panel Información general de la aplicación se muestra cuando se completa el registro. Registrar el id. de directorio (inquilino) y el id. de aplicación (cliente) que se usará en el código fuente de la aplicación.

   

   Nota:

   Los tipos de cuenta admitidos pueden modificarse consultando Modificar las cuentas que admite una aplicación.

Adición de un URI de redirección de plataforma y creación de un secreto de cliente

Para especificar el tipo de aplicación en el registro de la aplicación, siga estos pasos:

1. En Administrar, seleccione Autenticación.
2. En la página Configuraciones de plataforma, seleccione Agregar una plataforma y, a continuación, seleccione la opción Web.
3. Para URI de redireccionamiento, escriba http://localhost:3000/auth/redirect.
4. En Dirección URL de cierre de sesión del canal frontal, escriba https://localhost:5001/signout-callback-oidc para cerrar sesión.
5. Selecciona Configurar para guardar los cambios.
6. En Administrar, seleccione Certificados y secretos>Secretos de los clientes>Nuevo secreto de cliente. Elija una descripción y, a continuación, seleccione Agregar.
7. Anote el valor de Secreto de cliente para usarlo posteriormente. Este valor solo se muestra una vez.

Clone o descargue la aplicación de ejemplo

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

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

  git clone https://github.com/Azure-Samples/ms-identity-node.git
  

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

Configuración del proyecto

Extraiga el proyecto, abra la carpeta ms-identity-node-main y, después, abra el archivo .env en la carpeta App. Sustituya los valores anteriores como se indica a continuación:

El archivo debe ser similar al siguiente:

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

Ejecute la aplicación e inicie sesión

Ejecute el proyecto mediante Node.js.

1. Para iniciar el servidor, ejecute los siguientes comandos desde el directorio del proyecto:

   cd App
   npm install
   npm start
   

2. Vaya a http://localhost:3000/.

3. Seleccione Iniciar sesión para comenzar el proceso de inicio de sesión.

   La primera vez que inicie sesión, se le pedirá que dé su consentimiento para permitir que la aplicación inicie sesión y acceda a su perfil. Una vez que haya iniciado sesión correctamente, se le redirigirá a la página principal de la aplicación.

Más información

Funcionamiento del ejemplo

El ejemplo hospeda un servidor web en localhost, puerto 3000. Si un explorador web accede a esta dirección, la aplicación representa la página principal. Una vez que el usuario selecciona Iniciar sesión, la aplicación redirige el explorador a la pantalla de inicio de sesión de Microsoft Entra, para lo que se usa la dirección URL generada por la biblioteca MSAL Node. Una vez que el usuario da su consentimiento, el explorador lo redirige a la página principal de la aplicación, junto con un identificador y un token de acceso.

MSAL Node

La biblioteca MSAL Node inicia la sesión de los usuarios y solicita los tokens que se usan para acceder a una API protegida por la plataforma de identidad de Microsoft. Puede descargar la versión más reciente mediante el administrador de paquetes de Node.js (npm):

npm install @azure/msal-node

Paso siguiente

Para más información, cree una aplicación web de ASP.NET Core que inicie la sesión de los usuarios con la siguiente serie de tutoriales de varias partes: