使用 Microsoft Graph 生成 JavaScript 应用

本教程介绍如何构建使用 Microsoft Graph API 代表用户访问数据的 JavaScript 控制台应用。

注意

若要了解如何使用 Microsoft Graph 通过仅限应用的身份验证访问数据，请参阅此仅限应用的身份验证教程。

在本教程中，你将：

提示

作为本教程的替代方法，可以通过快速启动工具下载完成的代码，该工具可自动执行应用注册和配置。下载的代码无需进行任何修改即可正常工作。

还可以下载或克隆 GitHub 存储库，并按照 README 中的说明注册应用程序并配置项目。

先决条件

在开始本教程之前，应在开发计算机上安装 Node.js 。

还应该有一个包含 Exchange Online 邮箱Microsoft工作或学校帐户。如果没有 Microsoft 365 租户，则可以通过 Microsoft 365 开发人员计划获得租户;有关详细信息，请参阅常见问题解答。或者，可以注册 1 个月的免费试用版或购买 Microsoft 365 计划。

注意

本教程使用 Node.js 版本 16.14.2 编写。本指南中的步骤可能适用于其他版本，但尚未测试。

在门户中注册该应用

剩余 22 分钟

在本练习中，你将在 Azure Active Directory 中注册一个新应用程序以启用用户身份验证。可以使用 Microsoft Entra 管理中心或使用 Microsoft Graph PowerShell SDK 注册应用程序。

注册应用程序进行用户身份验证

在本部分中，你将注册一个支持使用设备代码流进行用户身份验证的应用程序。

Microsoft Entra 管理中心
PowerShell

打开浏览器，导航到 Microsoft Entra 管理中心，并使用全局管理员帐户登录。
在左侧导航栏中选择“Microsoft Entra ID”，依次展开“标识”、“应用程序”和“应用注册”。
选择“新注册”。输入应用程序的名称，例如 Graph User Auth Tutorial。

根据需要设置 支持的帐户类型 。选项包括：

选项	谁可以登录？
仅限此组织目录中的帐户	仅限 Microsoft 365 组织中的用户
任何组织目录中的帐户	任何Microsoft 365 组织中的用户 (工作或学校帐户)
任何组织目录中的帐户...和个人Microsoft帐户	任何Microsoft 365 组织中的用户 (工作或学校帐户) 和个人Microsoft帐户

保留“重定向 URI”为空。
选择“注册”。在应用程序的 “概述 ”页上，复制 “应用程序 (客户端) ID ”的值并保存它，下一步将需要它。如果 为此组织目录中的“帐户”选择“仅 支持 帐户类型”，则还要复制 “目录 (租户) ID 并保存它。
选择“管理”下的“身份验证”。找到 “高级设置” 部分，将 “允许公共客户端流” 切换开关更改为 “是”，然后选择“ 保存”。

若要使用 PowerShell，需要Microsoft Graph PowerShell SDK。如果没有，请参阅安装 Microsoft Graph PowerShell SDK 了解安装说明。

重要

PowerShell 脚本需要具有应用程序管理员、云应用程序管理员或全局管理员角色的工作/学校帐户。如果你的帐户具有应用程序开发人员角色，则可以在 entra 管理中心Microsoft注册。

创建名为 RegisterAppForUserAuth.ps1 的新文件，并添加以下代码。

param(
  [Parameter(Mandatory=$true,
  HelpMessage="The friendly name of the app registration")]
  [String]
  $AppName,

  [Parameter(Mandatory=$false,
  HelpMessage="The sign in audience for the app")]
  [ValidateSet("AzureADMyOrg", "AzureADMultipleOrgs", `
  "AzureADandPersonalMicrosoftAccount", "PersonalMicrosoftAccount")]
  [String]
  $SignInAudience = "AzureADandPersonalMicrosoftAccount",

  [Parameter(Mandatory=$false)]
  [Switch]
  $StayConnected = $false
)

# Tenant to use in authentication.
# See https://learn.microsoft.com/azure/active-directory/develop/v2-oauth2-device-code#device-authorization-request
$authTenant = switch ($SignInAudience)
{
  "AzureADMyOrg" { "tenantId" }
  "AzureADMultipleOrgs" { "organizations" }
  "AzureADandPersonalMicrosoftAccount" { "common" }
  "PersonalMicrosoftAccount" { "consumers" }
  default { "invalid" }
}

if ($authTenant -eq "invalid")
{
  Write-Host -ForegroundColor Red "Invalid sign in audience:" $SignInAudience
  Exit
}

# Requires an admin
Connect-MgGraph -Scopes "Application.ReadWrite.All User.Read" -UseDeviceAuthentication -ErrorAction Stop

# Get context for access to tenant ID
$context = Get-MgContext -ErrorAction Stop

if ($authTenant -eq "tenantId")
{
  $authTenant = $context.TenantId
}

# Create app registration
$appRegistration = New-MgApplication -DisplayName $AppName -SignInAudience $SignInAudience `
 -IsFallbackPublicClient -ErrorAction Stop
Write-Host -ForegroundColor Cyan "App registration created with app ID" $appRegistration.AppId

# Create corresponding service principal
if ($SignInAudience -ne "PersonalMicrosoftAccount")
{
  New-MgServicePrincipal -AppId $appRegistration.AppId -ErrorAction SilentlyContinue `
   -ErrorVariable SPError | Out-Null
  if ($SPError)
  {
    Write-Host -ForegroundColor Red "A service principal for the app could not be created."
    Write-Host -ForegroundColor Red $SPError
    Exit
  }

  Write-Host -ForegroundColor Cyan "Service principal created"
}

Write-Host
Write-Host -ForegroundColor Green "SUCCESS"
Write-Host -ForegroundColor Cyan -NoNewline "Client ID: "
Write-Host -ForegroundColor Yellow $appRegistration.AppId
Write-Host -ForegroundColor Cyan -NoNewline "Auth tenant: "
Write-Host -ForegroundColor Yellow $authTenant

if ($StayConnected -eq $false)
{
  Disconnect-MgGraph | Out-Null
  Write-Host "Disconnected from Microsoft Graph"
}
else
{
  Write-Host
  Write-Host -ForegroundColor Yellow `
   "The connection to Microsoft Graph is still active. To disconnect, use Disconnect-MgGraph"
}

保存文件。
打开 PowerShell，将当前目录更改为 RegisterAppForUserAuth.ps1的位置。

运行以下命令，将 <受众值> 替换为所需的值 (请参阅下表) 。

.\RegisterAppForUserAuth.ps1 -AppName "Graph User Auth Tutorial" -SignInAudience <audience-value>

SignInAudience 值	谁可以登录？
`AzureADMyOrg`	仅限 Microsoft 365 组织中的用户
`AzureADMultipleOrgs`	任何Microsoft 365 组织中的用户 (工作或学校帐户)
`AzureADandPersonalMicrosoftAccount`	任何Microsoft 365 组织中的用户 (工作或学校帐户) 和个人Microsoft帐户
`PersonalMicrosoftAccount`	仅限个人Microsoft帐户

按照提示在浏览器中打开 https://microsoft.com/devicelogin ，输入提供的代码，然后完成身份验证过程。
复制脚本输出中的 客户端 ID 和 身份验证租户 值。在下一步中，你将需要这些值。
```
SUCCESS
Client ID: 2fb1652f-a9a0-4db9-b220-b224b8d9d38b
Auth tenant: common
```

注意

请注意，你未对应用注册配置任何 Microsoft Graph 权限。这是因为此示例使用动态同意请求用户身份验证的特定权限。

创建 JavaScript 控制台应用

剩余 19 分钟

首先创建新的 Node.js 项目。在要在其中创建项目的目录中打开命令行界面 (CLI) 。运行以下命令：

npm init

通过提供自己的值或接受默认值来回答提示。

安装依赖项

在继续操作之前，请添加稍后将使用的一些其他依赖项。

用于 JavaScript 的 Azure 标识客户端库，用于对用户进行身份验证并获取访问令牌。
Microsoft Graph JavaScript 客户端库调用 Microsoft Graph。
用于将 API 添加到 fetch Node.js 的同构提取。这是 Microsoft Graph JavaScript 客户端库的依赖项。
readline-sync ，用于提示用户输入。

在 CLI 中运行以下命令以安装依赖项。

npm install @azure/identity @microsoft/microsoft-graph-client isomorphic-fetch readline-sync

加载应用程序设置

在本部分中，你将向项目添加应用注册的详细信息。

在项目的根目录中创建一个名为 appSettings.js 的文件，并添加以下代码。

const settings = {
  clientId: 'YOUR_CLIENT_ID_HERE',
  tenantId: 'common',
  graphUserScopes: ['user.read', 'mail.read', 'mail.send'],
};

export default settings;

根据下表更新中的 settings 值。

设置值

clientId 应用注册的客户端 ID

tenantId 如果选择了仅允许组织中的用户登录的选项，请将此值更改为租户 ID。否则保留为 common。

设置	值
`clientId`	应用注册的客户端 ID
`tenantId`	如果选择了仅允许组织中的用户登录的选项，请将此值更改为租户 ID。否则保留为 `common`。

设计应用

在本部分中，你将创建一个基于控制台的简单菜单。

在项目的根目录中创建一个名为 graphHelper.js 的文件，并添加以下占位符代码。在后面的步骤中，你将添加此文件更多的代码。
```
module.exports = {};
```

在项目的根目录中创建一个名为 index.js 的文件，并添加以下代码。

import { keyInSelect } from 'readline-sync';

import settings from './appSettings.js';
import {
  initializeGraphForUserAuth,
  getUserAsync,
  getUserTokenAsync,
  getInboxAsync,
  sendMailAsync,
  makeGraphCallAsync,
} from './graphHelper.js';

async function main() {
  console.log('JavaScript Graph Tutorial');

  let choice = 0;

  // Initialize Graph
  initializeGraph(settings);

  // Greet the user by name
  await greetUserAsync();

  const choices = [
    'Display access token',
    'List my inbox',
    'Send mail',
    'Make a Graph call',
  ];

  while (choice != -1) {
    choice = keyInSelect(choices, 'Select an option', { cancel: 'Exit' });

    switch (choice) {
      case -1:
        // Exit
        console.log('Goodbye...');
        break;
      case 0:
        // Display access token
        await displayAccessTokenAsync();
        break;
      case 1:
        // List emails from user's inbox
        await listInboxAsync();
        break;
      case 2:
        // Send an email message
        await sendMailToSelfAsync();
        break;
      case 3:
        // Run any Graph code
        await doGraphCallAsync();
        break;
      default:
        console.log('Invalid choice! Please try again.');
    }
  }
}

main();

在文件末尾添加以下占位符方法。你将在后面的步骤中实现它们。

function initializeGraph(settings) {
  // TODO
}

async function greetUserAsync() {
  // TODO
}

async function displayAccessTokenAsync() {
  // TODO
}

async function listInboxAsync() {
  // TODO
}

async function sendMailToSelfAsync() {
  // TODO
}

async function doGraphCallAsync() {
  // TODO
}

这将实现基本菜单，并从命令行读取用户的选择。

添加用户身份验证

剩余 15 分钟

在本部分中，将扩展上一练习中的应用程序，以支持使用 Azure AD 进行身份验证。这是获取调用 Microsoft Graph 所需的 OAuth 访问令牌所必需的。在此步骤中，你将将适用于 JavaScript 的 Azure 标识客户端库集成到应用程序中，并为 Microsoft Graph JavaScript 客户端库配置身份验证。

Azure 标识库提供了许多 TokenCredential 实现 OAuth2 令牌流的类。 Microsoft Graph 客户端库使用这些类对 Microsoft Graph 的调用进行身份验证。

配置 Graph 客户端以用于用户身份验证

在本部分中， DeviceCodeCredential 你将使用类通过设备代码流请求访问令牌。

打开 graphHelper.js ，将其内容替换为以下内容。

import 'isomorphic-fetch';
import { DeviceCodeCredential } from '@azure/identity';
import { Client } from '@microsoft/microsoft-graph-client';
// prettier-ignore
import { TokenCredentialAuthenticationProvider } from
  '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials/index.js';

let _settings = undefined;
let _deviceCodeCredential = undefined;
let _userClient = undefined;

export function initializeGraphForUserAuth(settings, deviceCodePrompt) {
  // Ensure settings isn't null
  if (!settings) {
    throw new Error('Settings cannot be undefined');
  }

  _settings = settings;

  _deviceCodeCredential = new DeviceCodeCredential({
    clientId: settings.clientId,
    tenantId: settings.tenantId,
    userPromptCallback: deviceCodePrompt,
  });

  const authProvider = new TokenCredentialAuthenticationProvider(
    _deviceCodeCredential,
    {
      scopes: settings.graphUserScopes,
    },
  );

  _userClient = Client.initWithMiddleware({
    authProvider: authProvider,
  });
}

将 index.js 中的空initializeGraph函数替换为以下内容。

function initializeGraph(settings) {
  initializeGraphForUserAuth(settings, (info) => {
    // Display the device code message to
    // the user. This tells them
    // where to go to sign in and provides the
    // code to use.
    console.log(info.message);
  });
}

此代码声明两个 DeviceCodeCredential 私有属性：对象和 Client 对象。函数 initializeGraphForUserAuth 创建的新实例 DeviceCodeCredential，然后使用该实例创建的新 Client实例。每次通过 _userClient进行 API 调用以Microsoft Graph 时，都会使用提供的凭据来获取访问令牌。

测试 DeviceCodeCredential

接下来，添加代码以从 DeviceCodeCredential获取访问令牌。

将以下函数添加到 graphHelper.js。

export async function getUserTokenAsync() {
  // Ensure credential isn't undefined
  if (!_deviceCodeCredential) {
    throw new Error('Graph has not been initialized for user auth');
  }

  // Ensure scopes isn't undefined
  if (!_settings?.graphUserScopes) {
    throw new Error('Setting "scopes" cannot be undefined');
  }

  // Request token with given scopes
  const response = await _deviceCodeCredential.getToken(
    _settings?.graphUserScopes,
  );
  return response.token;
}

将 index.js 中的空displayAccessTokenAsync函数替换为以下内容。

async function displayAccessTokenAsync() {
  try {
    const userToken = await getUserTokenAsync();
    console.log(`User token: ${userToken}`);
  } catch (err) {
    console.log(`Error getting user access token: ${err}`);
  }
}

在项目的根目录中的 CLI 中运行以下命令。
```
node index.js
```

当系统提示输入选项时，请输入 1 。应用程序显示 URL 和设备代码。

JavaScript Graph Tutorial

[1] Display access token
[2] List my inbox
[3] Send mail
[4] Make a Graph call
[0] Exit

Select an option [1...4 / 0]: 1
To sign in, use a web browser to open the page https://microsoft.com/devicelogin and
enter the code RK987NX32 to authenticate.

打开浏览器并浏览到显示的 URL。输入提供的代码并登录。

重要

请注意浏览到 https://microsoft.com/devicelogin时登录到浏览器的任何现有Microsoft 365 个帐户。使用浏览器功能（如配置文件、来宾模式或专用模式）确保作为要用于测试的帐户进行身份验证。
完成后，返回到应用程序以查看访问令牌。

提示

仅出于验证和调试目的，只能) 使用 Microsoft 的联机令牌分析程序在中https://jwt.ms解码工作或学校帐户的用户访问令牌 (。如果在调用 Microsoft Graph 时遇到令牌错误，这很有用。例如，验证令牌中的声明是否 scp 包含预期的 Microsoft Graph 权限范围。

获取用户

剩余 12 分钟

在本部分中，你将将 Microsoft Graph 合并到应用程序中。你将使用 Microsoft Graph JavaScript 客户端库调用 Microsoft Graph。

打开 graphHelper.js 并添加以下函数。

export async function getUserAsync() {
  // Ensure client isn't undefined
  if (!_userClient) {
    throw new Error('Graph has not been initialized for user auth');
  }

  // Only request specific properties with .select()
  return _userClient
    .api('/me')
    .select(['displayName', 'mail', 'userPrincipalName'])
    .get();
}

将 index.js 中的空greetUserAsync函数替换为以下内容。

async function greetUserAsync() {
  try {
    const user = await getUserAsync();
    console.log(`Hello, ${user?.displayName}!`);
    // For Work/school accounts, email is in mail property
    // Personal accounts, email is in userPrincipalName
    console.log(`Email: ${user?.mail ?? user?.userPrincipalName ?? ''}`);
  } catch (err) {
    console.log(`Error getting user: ${err}`);
  }
}

如果立即运行应用，则登录后应用将按名称欢迎你。

Hello, Megan Bowen!
Email: MeganB@contoso.com

代码说明

请考虑函数中的 getUserAsync 代码。这只是几行，但有一些关键细节需要注意。

访问“me”

函数将传递给/me_userClient.api请求生成器，该生成器生成对 Get 用户 API 的请求。可通过两种方式访问此 API：

GET /me
GET /users/{user-id}

在这种情况下，代码将调用 GET /me API 终结点。这是获取经过身份验证的用户而不了解其用户 ID 的快捷方式。

注意

GET /me由于 API 终结点获取经过身份验证的用户，因此它仅适用于使用用户身份验证的应用。仅限应用的身份验证应用无法访问此终结点。

请求特定属性

函数对请求使用 select 方法指定它所需的属性集。这会将 $select 查询参数添加到 API 调用。

强类型返回类型

函数从 API 的 JSON 响应返回 User 反序列化的对象。由于代码使用 select，因此只有请求的属性在返回 User 的对象中具有值。所有其他属性将具有默认值。

列出收件箱

剩余 10 分钟

在本部分中，你将添加在用户的电子邮件收件箱中列出邮件的功能。

打开 graphHelper.js 并添加以下函数。

export async function getInboxAsync() {
  // Ensure client isn't undefined
  if (!_userClient) {
    throw new Error('Graph has not been initialized for user auth');
  }

  return _userClient
    .api('/me/mailFolders/inbox/messages')
    .select(['from', 'isRead', 'receivedDateTime', 'subject'])
    .top(25)
    .orderby('receivedDateTime DESC')
    .get();
}

将 index.js 中的空ListInboxAsync函数替换为以下内容。

async function listInboxAsync() {
  try {
    const messagePage = await getInboxAsync();
    const messages = messagePage.value;

    // Output each message's details
    for (const message of messages) {
      console.log(`Message: ${message.subject ?? 'NO SUBJECT'}`);
      console.log(`  From: ${message.from?.emailAddress?.name ?? 'UNKNOWN'}`);
      console.log(`  Status: ${message.isRead ? 'Read' : 'Unread'}`);
      console.log(`  Received: ${message.receivedDateTime}`);
    }

    // If @odata.nextLink is not undefined, there are more messages
    // available on the server
    const moreAvailable = messagePage['@odata.nextLink'] != undefined;
    console.log(`\nMore messages available? ${moreAvailable}`);
  } catch (err) {
    console.log(`Error getting user's inbox: ${err}`);
  }
}

运行应用，登录，然后选择选项 2 列出收件箱。

[1] Display access token
[2] List my inbox
[3] Send mail
[4] Make a Graph call
[0] Exit

Select an option [1...4 / 0]: 2
Message: Updates from Ask HR and other communities
  From: Contoso Demo on Yammer
  Status: Read
  Received: 12/30/2021 4:54:54 AM -05:00
Message: Employee Initiative Thoughts
  From: Patti Fernandez
  Status: Read
  Received: 12/28/2021 5:01:10 PM -05:00
Message: Voice Mail (11 seconds)
  From: Alex Wilber
  Status: Unread
  Received: 12/28/2021 5:00:46 PM -05:00
Message: Our Spring Blog Update
  From: Alex Wilber
  Status: Unread
  Received: 12/28/2021 4:49:46 PM -05:00
Message: Atlanta Flight Reservation
  From: Alex Wilber
  Status: Unread
  Received: 12/28/2021 4:35:42 PM -05:00
Message: Atlanta Trip Itinerary - down time
  From: Alex Wilber
  Status: Unread
  Received: 12/28/2021 4:22:04 PM -05:00

...

More messages available? true

代码说明

请考虑函数中的 getInboxAsync 代码。

访问已知邮件文件夹

函数传递给/me/mailFolders/inbox/messages_userClient.api请求生成器，该生成器生成对列表消息 API 的请求。由于它包含 /mailFolders/inbox API 终结点的部分，因此 API 将仅返回请求的邮件文件夹中的邮件。在这种情况下，由于收件箱是用户邮箱中默认的已知文件夹，因此可通过其已知名称访问该文件夹。非默认文件夹的访问方式相同，方法是将已知名称替换为邮件文件夹的 ID 属性。有关可用已知文件夹名称的详细信息，请参阅 mailFolder 资源类型。

访问集合

与上一 getUserAsync 部分中返回单个对象的函数不同，此方法返回消息集合。 Microsoft Graph 中返回集合的大多数 API 不会在单个响应中返回所有可用结果。相反，它们使用分页返回部分结果，同时为客户端提供请求下一个“页面”的方法。

默认页面大小

使用分页的 API 实现默认页面大小。对于消息，默认值为 10。客户端可以使用 $top 查询参数请求更多 (或更少的 ) 。在中 getInboxAsync，这是使用方法完成的 .top(25) 。

注意

传递给的值 .top() 是上限，而不是显式数字。 API 返回一些 消息，最多返回 指定值。

获取后续页面

如果服务器上有更多可用的结果，则集合响应将包含一个 @odata.nextLink 具有 API URL 的属性，用于访问下一页。 JavaScript 客户端库在对象上 PageCollection 公开此属性。如果未定义此属性，则有更多结果可用。

@odata.nextLink的值可以传递给以获取_userClient.api下一页结果。或者，可以使用 PageIterator 客户端库中的对象来循环访问所有可用页面。

集合排序

函数对请求使用 orderby 方法请求按消息接收时间排序的结果， (receivedDateTime 属性) 。它包含 DESC 关键字，以便首先列出最近收到的消息。这会将 $orderby 查询参数添加到 API 调用。

发送邮件

剩余 7 分钟

在本部分中，你将添加以经过身份验证的用户身份发送电子邮件的功能。

打开 graphHelper.js 并添加以下函数。

export async function sendMailAsync(subject, body, recipient) {
  // Ensure client isn't undefined
  if (!_userClient) {
    throw new Error('Graph has not been initialized for user auth');
  }

  // Create a new message
  const message = {
    subject: subject,
    body: {
      content: body,
      contentType: 'text',
    },
    toRecipients: [
      {
        emailAddress: {
          address: recipient,
        },
      },
    ],
  };

  // Send the message
  return _userClient.api('me/sendMail').post({
    message: message,
  });
}

将 index.js 中的空sendMailAsync函数替换为以下内容。

async function sendMailToSelfAsync() {
  try {
    // Send mail to the signed-in user
    // Get the user for their email address
    const user = await getUserAsync();
    const userEmail = user?.mail ?? user?.userPrincipalName;

    if (!userEmail) {
      console.log("Couldn't get your email address, canceling...");
      return;
    }

    await sendMailAsync('Testing Microsoft Graph', 'Hello world!', userEmail);
    console.log('Mail sent.');
  } catch (err) {
    console.log(`Error sending mail: ${err}`);
  }
}

运行应用，登录并选择选项 3 以向自己发送电子邮件。
```
[1] Display access token
[2] List my inbox
[3] Send mail
[4] Make a Graph call
[0] Exit

Select an option [1...4 / 0]: 3
Mail sent.
```
注意

如果使用 Microsoft 365 开发人员计划中的开发人员租户进行测试，则发送的电子邮件可能未送达，并且可能会收到未送达报告。如果发生这种情况，请通过 Microsoft 365 管理中心联系支持人员。
若要验证是否已收到邮件，请选择选项 2 列出收件箱。

代码说明

请考虑函数中的 sendMailAsync 代码。

发送邮件

函数将传递给/me/sendMail_userClient.api请求生成器，该生成器生成对发送邮件 API 的请求。请求生成器采用表示 Message 要发送的消息的对象。

创建对象

与以前调用 Microsoft Graph（仅读取数据）不同，此调用会创建数据。若要使用客户端库执行此操作，请创建表示数据 (的类的实例，在这种情况下， Message) ，设置所需的属性，然后在 API 调用中发送它。由于调用正在发送数据，因此使用 post 方法而不是 get。

可选：添加自己的代码

剩余 5 分钟

在本部分中，将向应用程序添加自己的 Microsoft Graph 功能。这可能是Microsoft Graph 文档或 Graph 资源管理器中的代码片段，也可以是你创建的代码片段。此部分是可选的。

更新应用

打开 graphHelper.js 并添加以下函数。

// This function serves as a playground for testing Graph snippets
// or other code
export async function makeGraphCallAsync() {
  // INSERT YOUR CODE HERE
}

将 index.js 中的空makeGraphCallAsync函数替换为以下内容。

async function doGraphCallAsync() {
  try {
    await makeGraphCallAsync();
  } catch (err) {
    console.log(`Error making Graph call: ${err}`);
  }
}

选择 API

在 Microsoft Graph 中查找想要尝试的 API。例如，创建事件 API。可以使用 API 文档中的示例之一，也可以在 Graph 资源管理器中自定义 API 请求并使用生成的代码片段。

配置权限

查看所选 API 的参考文档 的“权限” 部分，了解支持哪些身份验证方法。例如，某些 API 不支持仅限应用或个人Microsoft帐户。

若要调用具有用户身份验证 (API（如果 API 支持用户 (委托) 身份验证) ），请在 appSettings.js中添加所需的权限范围。
若要使用仅应用身份验证调用 API，请参阅仅限应用的身份验证教程。

添加代码

将代码复制到 makeGraphCallAsyncgraphHelper.js中的函数中。如果要从文档或 Graph 资源管理器复制代码片段，请务必将重命名 client 为 _userClient。

恭喜！

100% 完成！

你已完成 JavaScript Microsoft Graph 教程。现在，你已有一个可调用 Microsoft Graph 的工作应用，可以试验和添加新功能。

了解如何通过 Microsoft Graph JavaScript SDK 使用仅限应用的身份验证。
访问 Microsoft Graph 概述，查看可以使用 Microsoft Graph 访问的所有数据。

Microsoft Graph 工具包

如果要使用 UI 生成 JavaScript 应用， Microsoft Graph 工具包提供了一系列可简化开发的组件。

通过

先决条件

在门户中注册该应用

注册应用程序进行用户身份验证

创建 JavaScript 控制台应用

安装依赖项

加载应用程序设置

设计应用

添加用户身份验证

配置 Graph 客户端以用于用户身份验证

测试 DeviceCodeCredential

获取用户

代码说明

访问“me”

请求特定属性

强类型返回类型

列出收件箱

代码说明

访问已知邮件文件夹

访问集合

默认页面大小

获取后续页面

集合排序

发送邮件

代码说明

发送邮件

创建对象

可选：添加自己的代码

更新应用

选择 API

配置权限

添加代码

恭喜！

Microsoft Graph 工具包

TypeScript/JavaScript 示例