Exercício – Acessar eventos do calendário de um usuário usando o Microsoft Graph

Concluído

Vamos usar todos os conceitos discutidos até esse ponto e fazer alterações no aplicativo de exemplo para acessar os eventos de calendário.

1. Localize o arquivo index.html no editor de código. Adicione o seguinte código HTML na marca <main> logo antes de sua marca de </main> fechamento.

   <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. Localize o arquivo graph.js no editor. Adicione uma nova função para obter os eventos de calendário do usuário conectado para a próxima semana usando o ponto de extremidade Microsoft Graph API /me/calendarView. Você chamará essa função de getEvents().

   Adicione o seguinte código ao final do arquivo:

   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. Localize o arquivo ui.js e adicione uma nova função para exibir os eventos de calendário recebidos do Microsoft Graph no elemento de lista. Você chamará essa função de displayEvents().

   Adicione o seguinte código ao final do arquivo:

   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. No mesmo arquivo ui.js, atualize a função displayUI() para exibir o botão Mostrar eventos somente na autorização bem-sucedida.

   Adicione o seguinte código ao final da função displayUI():

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

Agora que você adicionou todas as outras funções e snippets de código aos eventos de um usuário conectado para a próxima semana, a próxima etapa é executar o aplicativo localmente.

Execute o aplicativo

Para executar e testar o aplicativo, você precisará adicionar alguns eventos de calendário ao seu calendário usando o Microsoft Outlook ou o Microsoft Teams. Os eventos devem ficar dentro de um período de uma semana.

Dica

Para esta etapa, verifique se você tem o Node.js instalado em seu computador.

É hora de ver seu aplicativo ser executado localmente.

1. Na janela do terminal, vá para a pasta do projeto em que o código-fonte está localizado.

2. Execute o script a seguir na linha de comando para iniciar seu aplicativo localmente abrindo http://localhost:8080 no navegador.

   npm start
   

3. Se o aplicativo estiver configurado corretamente, você verá um botão de entrada.

   

4. Inicie sessão com uma conta no mesmo inquilino de programador do Microsoft 365 utilizado na unidade 2, onde registou a aplicação Microsoft Entra.

5. Depois de entrar com êxito, você será solicitado a dar consentimento.

   

6. Selecione Aceitar para dar consentimento para que o aplicativo realize operações para o usuário.

7. Depois que você consentir, o aplicativo tentará obter um token de acesso usando as informações da conta validada. A Biblioteca de Autenticação da Microsoft lida com esta etapa para você.

8. Depois que o token estiver de volta no aplicativo, uma solicitação GET será feita para o ponto de extremidade /medo Microsoft Graph. O token de acesso é passado no Cabeçalho de Autorização. A chamada para /me recupera os dados com segurança do serviço.

9. Depois que a resposta for Microsoft Graph, você verá a mensagem de boas-vindas com o nome do usuário conectado. Selecione o botão Mostrar eventos.

   

10. Outra caixa de diálogo de consentimento é exibida. Observe o escopo de permissão Ler seu calendáriocom o qual você está consentindo.

    

11. Selecione Aceitar para dar consentimento para que o aplicativo realize operações para o usuário.

12. Depois que você consentir, o aplicativo tentará obter um token de acesso usando as informações da conta validada. A Biblioteca de Autenticação da Microsoft lida com esta etapa para você.

13. Depois que o token estiver de volta no aplicativo, uma solicitação GET será feita para o ponto de extremidade /me/calendarViewdo Microsoft Graph. O token de acesso é passado no Cabeçalho de Autorização. A chamada para /me/calendarView recupera os dados com segurança do serviço.

14. Depois que a resposta for Microsoft Graph, você verá os eventos de calendário do usuário conectado listados para a próxima semana.

    

Você demonstrou com êxito como acessar e exibir eventos Microsoft 365 calendário para um usuário conectado usando o Microsoft Graph.

Continuar