Anterior

Avançar

Exercício – Mostrar os e-mails de um usuário

Concluído

Neste exercício, você estenderá o aplicativo para permitir que os usuários exibam seus últimos 10 emails.

Carregar emails de Microsoft Graph

Comece adicionando uma chamada Microsoft Graph para carregar os últimos 10 emails do usuário atual.

1. No editor de código, abra o arquivo auth.js.

2. No final do arquivo, adicione uma nova função assíncrona para recuperar os 10 últimos emails. Carregue o assunto de cada email e a data e a hora em que ele foi recebido.

   async function getEmails() {
     ensureScope('mail.read');
   
     return await graphClient
       .api('/me/messages')
       .select('subject,receivedDateTime')
       .orderby('receivedDateTime desc')
       .top(10)
       .get();
   }
   

Adicionar um espaço reservado para mostrar emails

Em seguida, estenda o aplicativo com um botão para carregar emails e adicionar um espaço reservado para exibi-los.

1. No editor de código, abra o arquivo index.html.

2. Localize a linha <h4>Welcome <span id="userName"></span></h4> e adicione a seguinte marcação imediatamente após ela:

   <button onclick="displayEmail();" id="displayEmail">Show email</button>
   <ul id="emails"></ul>
   

3. Estenda o bloco de conteúdo com um botão para carregar emails e um espaço reservado para exibi-los.

   <div id="content" style="display: none;">
     <h4>Welcome <span id="userName"></span></h4>
     <button onclick="displayEmail();" id="displayEmail">Show email</button>
     <ul id="emails"></ul>
   </div>
   

Exibir emails no aplicativo

A última etapa é solicitar emails usando Microsoft Graph e exibi-los no espaço reservado.

1. No editor de código, abra o arquivo auth.js.

2. No final do arquivo, adicione a função displayEmail:

   async function displayEmail() {
     var emails = await getEmails();
     if (!emails || emails.value.length < 1) {
       return;
     }
   
     document.getElementById('displayEmail').style = 'display: none';
   
     var emailsUl = document.getElementById('emails');
     emails.value.forEach(email => {
       var emailLi = document.createElement('li');
       emailLi.innerText = `${email.subject} (${new Date(email.receivedDateTime).toLocaleString()})`;
       emailsUl.appendChild(emailLi);
     });
   }
   

Execute seu aplicativo

Você estendeu seu aplicativo para mostrar os emails de um usuário usando o Microsoft Graph. Vamos executar o aplicativo localmente.

1. Visualize o aplicativo da Web executando o seguinte comando no terminal.

   npm start
   

2. Seu navegador deve estar apontando para http://localhost:8080.

3. Selecione o botão Entrar com a Microsoft para entrar com sua conta do Microsoft 365.

4. Depois de entrar com sua conta, selecione o botão Mostrar email.

5. Se você estiver executando o aplicativo pela primeira vez, será solicitado que você conceda ao aplicativo acesso ao seu email. Para continuar, consenta com a solicitação.

6. Você deverá ver os últimos 10 emails exibidos no aplicativo.

Dica

Se você não vir nenhum email, verifique se os emails estão na caixa de entrada da conta que você usa para entrar no aplicativo.

Continuar