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

Completato

Adesso è il momento di mettere in pratica tutto i concetti illustrati finora, per apportate modifiche all'app di esempio in modo di accedere agli eventi del calendario.

1. Aprire Startup.cs nell'Editor ed esplorare Microsoft Identity, Microsoft Graph e il middleware ASP.NET Core definito in ConfigureServices.

2. Individuare il codice seguente nel metodo ConfigureServices(). Questo codice abilita l'inserimento delle dipendenze per gli oggetti personalizzati denominati GraphProfileClient e GraphEmailClient. Gli oggetti hanno come ambito la richiesta HTTP, che significa che verranno creati una volta per ogni richiesta al server.

   services.AddScoped<GraphProfileClient>();
   services.AddScoped<GraphCalendarClient>();
   

3. Aprire Graph/GraphFilesClient.cs ed esplorare il codice esistente. Si notino i campi e i metodi seguenti:

   • Due campi readonly denominati _logger e _graphServiceClient sono inclusi nella classe. Gli oggetti inseriti nel costruttore verranno assegnati a tali campi.
   • La classe contiene i metodi GetEvents(), GetUserMailboxSettings() e GetUtcStartOfWeekInTimeZone().

4. Rimuovere il codice esistente nel costruttore.

5. Modificare il costruttore per inserire ILogger<GraphCalendarClient> e GraphServiceClient, e assegnare i valori dei parametri ai campi associati:

   public GraphCalendarClient(
     ILogger<GraphCalendarClient> logger,
     GraphServiceClient graphServiceClient)
   {
       _logger = logger;
       _graphServiceClient = graphServiceClient;
   }
   

6. Individuare il metodo GetEvents() e sostituire il codice esistente con il seguente. Questo codice definisce le date di inizio e fine per gli eventi del calendario che verranno recuperati.

   _logger.LogInformation($"User timezone: {userTimeZone}");
   // Configure a calendar view for the current week
   var startOfWeek = DateTime.Now;
   var endOfWeek = startOfWeek.AddDays(7);
   var viewOptions = new List<QueryOption>
   {
     new QueryOption("startDateTime", startOfWeek.ToString("o")),
     new QueryOption("endDateTime", endOfWeek.ToString("o"))
   };
   

7. Immediatamente sotto al codice precedente aggiunto in GetEvents(), aggiungere i blocchi di codice try/catch seguenti:

   try
   {
   
   }
   catch (Exception ex)
   {
       _logger.LogError($"Error calling Graph /me/calendaview: { ex.Message}");
       throw;
   }
   

8. All'interno del blocco try, aggiungere il codice seguente per utilizzare viewOptions, definire le proprietà dell'evento del calendario da restituire, definire come ordinare i risultati e avviare la chiamata a me/calendarView:

   // Use GraphServiceClient to call Me.CalendarView
   var calendarEvents = await _graphServiceClient
       .Me
       .CalendarView
       .Request(viewOptions)
       .Header("Prefer", $"outlook.timezone=\"{userTimeZone}\"")
       .Select(evt => new
       {
         evt.Subject,
         evt.Organizer,
         evt.Start,
         evt.End
       })
       .OrderBy("start/DateTime")
       .GetAsync();
   
   return calendarEvents;
   

9. Salvare GraphCalendarClient.cs prima di continuare.

10. Aprire Pages/Calendar.cshtml.cs ed esplorare il codice esistente. Si notino le funzionalità seguenti:

    • La classe CalendarModel contiene diversi campi e proprietà, ad esempio _logger, _graphCalendarClient, _graphProfileClient, MailboxSettings e Events.
    • ILogger<CalendarModel>, GraphCalendarCliente GraphProfileClient vengono inseriti nel costruttore e assegnati ai campi associati.
    • Il metodo FormatDateTimeZone() è incluso nella classe. Viene utilizzato per formattare un oggetto DateTime.

11. Individuare il metodo OnGetAsync() e sostituire il codice esistente con il codice seguente:

    MailboxSettings = await _graphCalendarClient.GetUserMailboxSettings();
    var userTimeZone = (String.IsNullOrEmpty(MailboxSettings.TimeZone))
        ? "Pacific Standard Time"
        : MailboxSettings.TimeZone;
    Events = await _graphCalendarClient.GetEvents(userTimeZone);
    

    Questo codice recupera le impostazioni della cassetta postale dell'utente, determina se è definito un fuso orario e passa il fuso orario dell'utente al GetEvents() metodo creato in precedenza nella classe GraphCalendarClient . Gli eventi recuperati vengono archiviati nella proprietà Events della classe.

12. Salvare Calendar.cshtml.cs prima di continuare.

13. Aprire Pages/Calendar.cshtml. Si tratta di un file Razor Pages usato per eseguire il rendering dei dati degli eventi del calendario archiviati nella classeCalendarModel. Gestisce l'iterazione degli eventi archiviati nella proprietà CalendarModeldella classe Eventi e scrive i dettagli relativi a ogni evento di calendario nella pagina.

14. Esaminare il codice HTML e Razor, e notare che gestisce le attività seguenti:

    • Assicura che l'utente venga autenticato.
    • Controlla la proprietà Model.Events per verificare se sono presenti eventi da scorrere e visualizzare nella pagina.

15. Individuare il commento @* Add foreach here *@ nel file e sostituirlo con il codice seguente:

    @foreach(var evt in Model.Events)
    {
    

16. Individuare il commento @* Add foreach closing bracket here *@ e sostituirlo con una parentesi quadra chiusa per l'istruzione foreach aggiunta nel passaggio precedente.

17. Individuare il commento @* Add event subject here *@ e sostituirlo con il codice seguente per scrivere l'oggetto di ogni evento:

    @evt.Subject
    

18. Individuare il commento @* Add event start date/time here *@ e sostituirlo con il codice seguente per scrivere la data e l'ora di inizio dell'evento:

    @Model.FormatDateTimeTimeZone(evt.Start)
    

19. Infine, individuare il commento @* Add event end date/time here *@ e sostituirlo con il codice seguente per scrivere la data e l'ora di fine dell'evento:

    @Model.FormatDateTimeTimeZone(evt.End)
    

    La funzione FormatDateTimeTimeZone() nella classe CalendarModel gestisce la conversione dei valori di data e ora di inizio e di fine nel fuso orario definito dall'utente connesso, utilizzando l'oggetto MailboxSettings recuperato al caricamento della pagina.

20. Salvare Calendar.cshtml prima di continuare.

Ora che sono stati aggiunti tutti i frammenti di codice per visualizzare gli eventi di un utente connesso per la settimana successiva, il passaggio seguente consiste nell'eseguire l'app localmente.

Esecuzione dell'app

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

Eseguire l'applicazione e provarla.

1. Eseguire il passaggio seguente in base all'Editor di codice:

   • Visual Studio

     Premere F5 per compilare ed eseguire il progetto.

   • Visual Studio Code o un altro Editor di codice

     Aprire una finestra del terminale nella cartella Begin ed eseguire il comando seguente:

     dotnet run
     

2. Aprire un browser e visitare https://localhost:5001.

3. Accedere usando il tenant per sviluppatori di Microsoft 365 usato in precedenza durante la registrazione dell'applicazione Microsoft Entra.

4. Dopo aver acconsentito alle autorizzazioni necessarie, l'applicazione tenterà di ottenere un token di accesso usando le informazioni account convalidate. Questa operazione viene gestita dal middleware descritto in precedenza in Startup.cs.

5. Dopo aver ottenuto il token nell'applicazione, viene effettuata una richiesta GET all'endpoint di Microsoft Graph /me e il token di accesso viene passato nell'intestazione di autorizzazione. La chiamata a /me quindi recupera i dati in modo sicuro dal servizio.

6. Dopo aver ricevuto la risposta da Microsoft Graph, verrà visualizzato il messaggio di benvenuto con il nome dell'utente connesso.

   

7. Selezionare il collegamento Calendario nell'intestazione per visualizzare gli eventi del calendario dell'utente.

8. Dopo il caricamento della pagina, viene effettuata una richiesta GET all'endpoint Microsoft Graph /m*e/calendarView e il token di accesso viene passato nell'intestazione di autorizzazione. La chiamata a /me/calendarView quindi recupera i dati in modo sicuro dal servizio e li visualizza nella pagina.

   

   Nota

   Se non vengono visualizzati eventi di calendario, aggiungerne alcuni all'account dell'utente usato per accedere all'app.

9. Prima di continuare chiudere il browser e premere CTRL+C nella finestra del terminale per arrestare il server.

   Nota

   Se il progetto è stato aperto in Visual Studio, è possibile chiudere il browser o selezionare MAIUSC+F5 in Visual Studio per arrestare il server. Chiudere la finestra del terminale creata da Visual Studio se è ancora aperta.

È stato illustrato come accedere e visualizzare Microsoft 365 eventi del calendario per un utente connesso usando Microsoft Graph e ASP.NET Core.