Ejercicio: Recuperación de un token de acceso mediante MSAL

  • 10 minutos

Ahora es el momento de crear algo con todos los conceptos que ha aprendido hasta ahora.

En este ejercicio, configurará su propia aplicación. La aplicación llamará a Microsoft Graph para obtener la información de perfil de un usuario que ha iniciado sesión.

Configuración de la aplicación

Este ejercicio le permite empezar a ejecutar una aplicación que inicia la sesión de un usuario para Azure Active Directory (Azure AD) y realiza una llamada a Microsoft Graph. Tendrá acceso a un repositorio de GitHub y, a continuación, configurará la aplicación para que se ejecute localmente en la máquina.

  1. Abra una consola en el equipo y vaya a la carpeta donde desea guardar la aplicación.

  2. Para obtener el código fuente, visite repositorio de GitHub y elija una de las siguientes opciones:

    • Si usa Git, clone el proyecto mediante el comando git clone:

      git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git

    • Si no usa Git, seleccione el botón Código seguido de Descargar ZIP. Extraiga el archivo *.zip en el equipo.

  3. Abra la carpeta raíz del proyecto descargado o clonado mslearn-retrieve-m365-data-with-msgraph-quickstart en su editor favorito.

    La aplicación contiene los siguientes archivos:

    • index.html: define la interfaz de usuario que aparece a un usuario cuando accede al sitio web. Carga el script de la Biblioteca de autenticación de Microsoft (MSAL) y los scripts de aplicación personalizados, proporciona una manera de que un usuario inicie sesión y muestra el nombre del usuario después de iniciar sesión.
    • auth.js: define la configuración de MSAL para asociar la aplicación con Azure AD, inicia la sesión de un usuario en la aplicación y controla la recuperación de un token de acceso que Microsoft Graph puede usar.
    • graph.js: llama a Microsoft 365 para acceder al perfil de /me que ha iniciado sesión. Se basa en auth.js para recuperar el token de acceso que se usa para la llamada API de Microsoft Graph.
    • ui.js: controla los elementos de la interfaz de usuario definidos en index.html.

  4. Abra el archivo auth.js y busque la constante msalConfig:

    const msalConfig = {
    auth: { .. }
}

  5. Reemplace el valor de la clientId propiedad por el valor del identificador de aplicación (cliente) copiado de la aplicación de Azure AD (spa-aad-app) que registró anteriormente. Puede obtener este valor en la página de información general de la aplicación de Azure AD (spa-aad-app).

  6. En el mismo archivo auth.js , busque la msalConfig.auth.authority propiedad . Reemplace el valor <your directory ID here> con el valor Identificador de directorio (espacio empresarial) de la aplicación Azure AD denominada (spa-aad-app) que registró anteriormente. Puede obtener este valor en la página de información general de la aplicación de Azure AD (spa-aad-app).

    La constante msalConfig debe ser similar al código siguiente, con los id. únicos del inquilino de Azure AD y la aplicación registrada:

    const msalConfig = {
  auth: {
    clientId: 'b1a37248-53b5-430c-b946-ef83521af70c',
    authority: 'https://login.microsoftonline.com/b930540b-a147-45bb-8f24-bfbed091aa25',
    redirectUri: 'http://localhost:8080'
  }
};

  7. Ahora que ha agregado los identificadores de Azure AD adecuados a auth.js, dedique un momento a explorar el código del archivo. Observe que contiene las siguientes funciones:

    • signIn(): inicia la sesión del usuario.
    • getToken(): controla la obtención de un token de acceso que Microsoft Graph puede usar.

  8. Abra el archivo graph.js y observe que toma un token de acceso, llama a la API de Microsoft Graph /me y selecciona los valores ID y displayName del usuario. Observe cómo se recupera el token de acceso y se agrega al encabezado de autorización que se envía con la solicitud a /me.

  9. Por último, abra ui.js y dedique un momento a explorar la función displayUI(). Es responsable de mostrar y ocultar elementos en index.html y mostrar el nombre del usuario después de iniciar sesión.

Ejecutar la aplicación

En este procedimiento, asegúrese de que tiene Node.js instalado en la máquina.

Es el momento de ver que la aplicación se ejecuta localmente.

  1. En la consola, vaya a la carpeta del proyecto donde se encuentra el código fuente.

  2. Ejecute el siguiente script en la línea de comandos. El script iniciará la aplicación localmente y abrirá http://localhost:8080 en el navegador.

    npm start

  3. Si la aplicación está configurada correctamente, aparece un botón de inicio de sesión.

    Captura de pantalla del botón de inicio de sesión.

  4. Inicie sesión con una cuenta en el mismo espacio empresarial de desarrollador de Microsoft 365 que ha usado una unidad anterior al registrar la aplicación de Azure AD.

  5. Después de iniciar sesión correctamente, se le pedirá que dé su consentimiento.

    Captura de la página de consentimiento.

  6. Seleccione Aceptar para dar su consentimiento a fin de que la aplicación realice operaciones en nombre del usuario.

  7. Después de dar el consentimiento, la aplicación intenta obtener un token de acceso mediante la información de la cuenta validada. La biblioteca MSAL controla esto por usted.

  8. Después de que el token vuelva a la aplicación, se realiza una solicitud GET al punto de conexión /me de Microsoft Graph y el token de acceso se pasa en el encabezado de autorización. La llamada a /me recupera los datos del servicio de forma segura.

  9. Después de recibir la respuesta de Microsoft Graph, el nombre del usuario que ha iniciado sesión aparecerá en el explorador.

    Captura de pantalla del mensaje de bienvenida.

Ha compilado correctamente una aplicación que usa Microsoft Graph para recuperar datos de Microsoft 365.