Ejercicio: Conexión de una aplicación de JavaScript a Microsoft 365

Completado

En este ejercicio, creará una aplicación de JavaScript conectada a Microsoft 365. Usará la biblioteca de JavaScript de la biblioteca de autenticación de Microsoft para permitir que los usuarios inicien sesión en la aplicación con su cuenta de Microsoft 365. Su nombre se mostrará mediante el SDK de JavaScript de Microsoft Graph.

Ejecución de la aplicación

  1. Para obtener el código de aplicación inicial usado en este ejercicio, 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, vaya a https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart en el explorador web. Seleccione el botón Código seguido de Descargar ZIP. Extraiga el archivo ZIP en la máquina.

  2. Abra la carpeta en el editor de código.

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

    const msalConfig = {
        auth: { .. }
    }
    
  4. Reemplace el valor de la clientId propiedad por el valor de id. de aplicación (cliente) copiado de la aplicación Microsoft Entra (spa-aad-app) que registró anteriormente. Puede obtener este valor en la página de información general de la aplicación Microsoft Entra (spa-aad-app).

  5. En el mismo archivo auth.js , busque la msalConfig.auth.authority propiedad . Reemplace el <your directory ID here> valor por el valor de Id. de directorio (inquilino) de la aplicación Microsoft Entra (spa-aad-app) que registró anteriormente. Puede obtener este valor en la página de información general de la aplicación Microsoft Entra (spa-aad-app).

    La msalConfig constante debe ser similar al código siguiente, con los identificadores únicos del inquilino de Microsoft Entra 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'
      }
    };
    
  6. Ejecute el siguiente comando en el terminal para obtener una vista previa de la aplicación web:

    npm start
    
  7. El explorador predeterminado debería abrirse y apuntar a http://localhost:8080.

  8. Seleccione el botón Iniciar sesión con Microsoft para iniciar sesión con su cuenta de Microsoft 365.

  9. Después de iniciar sesión con su cuenta y dar su consentimiento a la aplicación, debería ver que la aplicación muestra su nombre de usuario.

  10. Para detener el servidor Node.js, seleccione CTRL+C en la ventana de terminal.