Ejercicio: Mostrar los correos electrónicos de un usuario

Completado

En este ejercicio, ampliará la aplicación para permitir que los usuarios vean sus últimos 10 correos electrónicos.

Cargar mensajes de correo electrónico de Microsoft Graph

Para empezar, agregue una llamada a Microsoft Graph para cargar los últimos 10 correos electrónicos del usuario actual.

1. Abra el archivo graph.js en el editor de código.

2. Al final del archivo, agregue una nueva función asincrónica para recuperar los 10 últimos correos electrónicos. Cargue el asunto de cada correo electrónico y la fecha y hora en que se recibió.

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

Agregar un marcador de posición para mostrar correos electrónicos

A continuación, extienda la aplicación con un botón para cargar correos electrónicos y agregue un marcador de posición para mostrarlos.

1. Abra el archivo index.html en el editor de código.

2. Busque la línea <h4>Welcome <span id="userName"></span></h4> y agregue la siguiente revisión inmediatamente después de ella:

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

3. Extienda el bloque de contenido con un botón para cargar correos electrónicos y un marcador de posición para mostrarlos.

   <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>
   

Mostrar correos electrónicos en la aplicación

El último paso es solicitar correos electrónicos mediante Microsoft Graph y mostrarlos en el marcador de posición.

1. Abra el archivo ui.js en el editor de código.

2. Al final del archivo, agregue la función 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);
     });
   }
   

Ejecutar la aplicación

Ha ampliado la aplicación para mostrar los correos electrónicos de un usuario mediante Microsoft Graph. Vamos a ejecutar la aplicación localmente.

1. Ejecute el siguiente comando en el terminal para obtener una vista previa de la aplicación web:

   npm start
   

2. El explorador debe apuntar a http://localhost:8080.

3. Seleccione el botón Iniciar sesión con Microsoft para iniciar sesión con su cuenta de Microsoft 365.

4. Después de iniciar sesión con su cuenta, seleccione el botón Mostrar correo electrónico.

5. Si ejecuta la aplicación por primera vez, se le pedirá que conceda a la aplicación acceso a su correo electrónico. Para continuar, acepte la solicitud.

6. Debería ver los últimos 10 correos electrónicos en la aplicación.

Sugerencia

Si no ve ningún correo electrónico, asegúrese de que están en la bandeja de entrada de la cuenta que usa para iniciar sesión en la aplicación.

Continuar