Esercitazione: accedere agli eventi del calendario di un utente tramite Microsoft Graph

Completato

Verranno ora usati tutti i concetti illustrati fino a questo punto e verranno apportate modifiche all'app di esempio per accedere agli eventi del calendario.

1. Nell'editor di codice individuare il file index.html. Aggiungere il codice HTML seguente nel tag <main>, subito prima del tag </main> di chiusura.

   <button id="btnShowEvents" style="display: none;" onclick="displayEvents();">Show events</button>
   <div id="eventWrapper" style="display: none;">
     <p>Your events retrieved from Microsoft Graph for the upcoming week:</p>
     <ul id="events"></ul>
   </div>
   

2. Nell'editor individuare il file graph.js. Aggiungere una nuova funzione per ottenere gli eventi del calendario dell'utente connesso per la settimana successiva usando l'endpoint dell'API Microsoft Graph /me/calendarView. Questa funzione verrà chiamata getEvents().

   Aggiungere il codice seguente alla fine del file:

   async function getEvents() {
     ensureScope('Calendars.read');
     const dateNow = new Date();
     const dateNextWeek = new Date();
     dateNextWeek.setDate(dateNextWeek.getDate() + 7);
     const query = `startDateTime=${dateNow.toISOString()}&endDateTime=${dateNextWeek.toISOString()}`;
   
     return await graphClient
     .api('/me/calendarView').query(query)
     .select('subject,start,end')
     .orderby(`start/DateTime`)
     .get();
   }
   

3. Individuare il file ui.js e aggiungere una nuova funzione per visualizzare gli eventi del calendario ricevuti da Microsoft Graph nell'elemento elenco. Questa funzione verrà chiamata displayEvents().

   Aggiungere il codice seguente alla fine del file:

   async function displayEvents() {
     var events = await getEvents();
     if (!events || events.value.length < 1) {
       var content = document.getElementById('content');
       var noItemsMessage = document.createElement('p');
       noItemsMessage.innerHTML = `No events for the coming week!`;
       content.appendChild(noItemsMessage)
   
     } else {
       var wrapperShowEvents = document.getElementById('eventWrapper');
       wrapperShowEvents.style = "display: block";
       const eventsElement = document.getElementById('events');
       eventsElement.innerHTML = '';
       events.value.forEach(event => {
         var eventList = document.createElement('li');
         eventList.innerText = `${event.subject} - From  ${new Date(event.start.dateTime).toLocaleString()} to ${new Date(event.end.dateTime).toLocaleString()} `;
         eventsElement.appendChild(eventList);
       });
     }
     var btnShowEvents = document.getElementById('btnShowEvents');
     btnShowEvents.style = "display: none";
   }
   

4. Nello stesso file ui.js, aggiornare la funzione displayUI() per visualizzare il pulsante Mostra eventisolo se l'autorizzazione ha esito positivo.

   Aggiungere il codice seguente alla fine della funzione displayUI() :

   var btnShowEvents = document.getElementById('btnShowEvents');
   btnShowEvents.style = "display: block";
   

Ora che sono state aggiunte tutte le altre funzioni e frammenti di codice agli eventi di un utente connesso per la prossima settimana, il passaggio successivo consiste nell'eseguire l'app localmente.

Esecuzione dell'app

Per eseguire e testare l'applicazione, è necessario aggiungere alcuni eventi di calendario al calendario usando Microsoft Outlook o Microsoft Teams. Gli eventi devono rientrare in un periodo di una settimana.

Consiglio

Per questo passaggio, assicurarsi che Node.js sia installato nel computer.

È il momento di vedere l'applicazione eseguita localmente.

1. Nella finestra del terminale, passare alla cartella del progetto in cui si trova il codice sorgente.

2. Eseguire lo script seguente nella riga di comando per avviare l'app localmente aprendo http://localhost:8080 nel browser.

   npm start
   

3. Se l'app è configurata correttamente, viene visualizzato un pulsante di accesso.

   

4. Accedere usando un account nello stesso tenant per sviluppatori di Microsoft 365 usato nell'unità 2, in cui è stata registrata l'applicazione Microsoft Entra.

5. Dopo aver eseguito l'accesso, viene richiesto di fornire il consenso.

   

6. Selezionare Accetta per consentire all'applicazione di eseguire operazioni per l'utente.

7. Dopo il consenso, l'applicazione tenta di ottenere un token di accesso usando le informazioni dell'account convalidate. Microsoft Authentication Library gestisce questo passaggio automaticamente.

8. Quando il token torna nell'applicazione, viene effettuata una richiesta GET all'endpoint Microsoft Graph /me. Il token di accesso viene passato nell'Intestazione di autorizzazione. La chiamata a /me quindi recupera i dati in modo sicuro dal servizio.

9. Dopo la ricezione della risposta da Microsoft Graph, verrà visualizzato il messaggio di benvenuto con il nome dell'utente connesso. Selezionare il pulsante Mostra eventi.

   

10. Viene visualizzata un'altra finestra di dialogo. Si noti l'ambito di autorizzazione Read your calendar a cui si sta fornendo il consenso.

    

11. Selezionare Accetta per consentire all'applicazione di eseguire operazioni per l'utente.

12. Dopo il consenso, l'applicazione tenta di ottenere un token di accesso usando le informazioni dell'account convalidate. Microsoft Authentication Library gestisce questo passaggio automaticamente.

13. Quando il token torna nell'applicazione, viene effettuata una richiesta GET all'endpoint Microsoft Graph /me/calendarView. Il token di accesso viene passato nell'Intestazione di autorizzazione. La chiamata a /me/calendarView quindi recupera i dati in modo sicuro dal servizio.

14. Dopo la ricezione della risposta da Microsoft Graph, verranno visualizzati gli eventi di calendario dell'utente connesso.

    

È stato illustrato come accedere e visualizzare gli eventi di calendario di Microsoft 365 per un utente connesso usando Microsoft Graph.