Упражнение. Показ сообщений электронной почты пользователя

Завершено

В этом упражнении вы расширите приложение, чтобы пользователи могли просматривать свои последние 10 писем.

Загрузка писем из Microsoft Graph

Начните с добавления вызова к Microsoft Graph, чтобы загрузить последние 10 писем текущего пользователя.

1. В редакторе кода откройте файл graph.js.

2. В конце файла добавьте новую асинхронную функцию, чтобы получить последние 10 писем. Загрузите тему каждого письма, а также дату и время, когда оно было получено.

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

Добавление заполнителя для отображения писем

Далее расширьте приложение, добавив кнопку для загрузки писем и заполнитель для их отображения.

1. В редакторе кода откройте файл index.html.

2. Найдите строку <h4>Welcome <span id="userName"></span></h4> и добавьте следующие исправления сразу после нее:

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

3. Расширьте блок содержимого, добавив кнопку для загрузки писем и заполнитель для их отображения.

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

Отображение писем в приложении

Последний шаг — это запросить письма с помощью Microsoft Graph и отобразить их вместо заполнителя.

1. В редакторе кода откройте файл ui.js.

2. В конце файла добавьте функцию 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);
     });
   }
   

Запуск приложения

Вы расширили приложение для отображения писем пользователя с помощью Microsoft Graph. Запустим приложение локально.

1. Предварительно просмотрите веб-приложение, выполнив следующую команду в терминале.

   npm start
   

2. Браузер должен указывать на http://localhost:8080.

3. Нажмите кнопку Войти с помощью учетной записи Майкрософт, чтобы войти с помощью учетной записи Microsoft 365.

4. Выполнив вход с помощью учетной записи, нажмите кнопку Показать почту.

5. Если вы запускаете приложение в первый раз, вам будет предложено предоставить приложению доступ к вашей почте. Чтобы продолжить, дайте согласие.

6. После этого последние 10 писем должны отобразиться в приложении.

Совет

Если вы не видите писем, убедитесь в их наличии в папке "Входящие" учетной записи, с помощью которой вы вошли в приложение.