练习：显示用户的电子邮件

4 分钟

在本练习中，你将扩展自己的应用，以允许用户查看其最近的 10 封电子邮件。

加载来自 Microsoft Graph 的电子邮件

首先，添加对 Microsoft Graph 的调用，以加载当前用户的最近 10 封电子邮件。

在代码编辑器中打开 graph.js 文件。

在文件末尾，添加一个新的异步函数以检索最近 10 封电子邮件。加载每封电子邮件的主题及其接收日期和时间。

async function getEmails() {
  ensureScope('mail.read');

  return await graphClient
    .api('/me/messages')
    .select('subject,receivedDateTime')
    .orderby('receivedDateTime desc')
    .top(10)
    .get();
}

添加占位符以显示电子邮件

接下来，添加一个用于加载电子邮件的按钮和用于显示这些邮件的占位符，以扩展该应用。

在代码编辑器中打开 index.html 文件。

找到行 <h4>Welcome <span id="userName"></span></h4> 并紧接着添加以下标记：

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

添加一个用于加载电子邮件的按钮和用于显示这些邮件的占位符，以扩展内容块。

<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 请求电子邮件，并在占位符中显示它们。

在代码编辑器中打开 ui.js 文件。

在文件末尾添加 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 显示用户的电子邮件。让我们在本地运行该应用。

在终端中执行以下命令来预览该 Web 应用。
```
npm start
```
浏览器应指向 http://localhost:8080。
选择“Microsoft 登录”按钮，以使用 Microsoft 365 帐户登录。
使用该帐户登录后，选择“显示电子邮件”按钮。
如果你是第一次运行该应用，系统将提示你授予该应用对你的电子邮件的访问权限。若要继续，请同意该请求。
该应用中应该会显示最近的 10 封电子邮件。

提示

如果未显示任何电子邮件，请确保电子邮件位于用于登录该应用的帐户的收件箱中。

继续

练习：显示用户的电子邮件

加载来自 Microsoft Graph 的电子邮件

添加占位符以显示电子邮件

在应用中显示电子邮件

运行你的应用

反馈