Esercitazione: connettere un'app JavaScript a Microsoft 365

Completato

In questo esercizio si creerà un'app JavaScript connessa a Microsoft 365. Si userà la raccolta JavaScript di Microsoft Authentication Library per consentire agli utenti di accedere all'app con il proprio account Microsoft 365 e mostrare il proprio nome utilizzando l'SDK JavaScript di Microsoft Graph.

Eseguire l'app

  1. Per ottenere il codice iniziale dell'app usato in questo esercizio, scegliere una delle opzioni seguenti:

    Se si usa Git, clonare il progetto usando il comando Git Clone:

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

    Se non si usa Git, passare a https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart nel Web browser. Selezionare il pulsante Code (Codice) e quindi scegliere Download ZIP (Scarica ZIP). Estrarre il file con estensione zip nel computer.

  2. Aprire la cartella nell'editor di codice.

  3. Aprire il file auth.js e trovare la costante msalConfig:

    const msalConfig = {
      auth: { .. }
    }
    
  4. Sostituire il valore della clientId proprietà con il valore dell'ID applicazione (client) copiato dall'applicazione Microsoft Entra (spa-aad-app) registrata in precedenza. È possibile ottenere questo valore dalla pagina di panoramica dell'applicazione Microsoft Entra (spa-aad-app).

  5. Nello stesso fileauth.js trovare la msalConfig.auth.authority proprietà . Sostituire il <your directory ID here> valore con il valore ID directory (tenant) dell'applicazione Microsoft Entra (spa-aad-app) registrata in precedenza. È possibile ottenere questo valore dalla pagina di panoramica dell'applicazione Microsoft Entra (spa-aad-app).

    La msalConfig costante dovrebbe essere simile al codice seguente, con gli ID univoci del tenant di Microsoft Entra e dell'applicazione registrata:

    const msalConfig = {
      auth: {
        clientId: 'b1a37248-53b5-430c-b946-ef83521af70c',
        authority: 'https://login.microsoftonline.com/b930540b-a147-45bb-8f24-bfbed091aa25',
        redirectUri: 'http://localhost:8080'
      }
    };
    
  6. Visualizzare in anteprima l'app Web eseguendo il comando seguente nel terminale:

    npm start
    
  7. Il browser predefinito dovrebbe aprirsi e puntare a http://localhost:8080.

  8. Selezionare il pulsante Accedi con Microsoft per accedere con l'account Microsoft 365.

  9. Dopo aver eseguito l'accesso con l'account e aver fornito il consenso all'app, l'app dovrebbe visualizzare il nome utente.

  10. Arrestare il server Node.js selezionando CTRL+C nella finestra del terminale.