在你的解决方案中使用 Microsoft Graph

项目
03/21/2023

Microsoft Graph API 提供有统一的可编程性模型，你可将其用于为组织和消费者生成应用，与数百万用户的数据进行交互。你也可以从 SharePoint Framework 框架解决方案轻松访问 Microsoft Graph。

开始前，请先完成下列文章中的过程，以确保了解创建自定义客户端 Web 部件的基本流程：

还可以通过在 Microsoft 365 平台社区 (PnP) YouTube 频道上观看此视频来执行这些步骤：

创建 SharePoint Framework 以便Microsoft Graph的使用

在你最喜爱的位置创建新的项目目录：
```
md graph-apis
```
转到项目目录：
```
cd graph-apis
```
通过从创建的新目录中运行 Yeoman SharePoint 生成器创建新项目：
```
yo @microsoft/sharepoint
```
Yeoman SharePoint 生成器将提示你一系列问题。接受所有问题的默认选项，但以下问题除外：
- 是否要允许租户管理员选择能够立即将解决方案部署到所有网站的选项而无需运行任何网站中的部署或添加应用程序功能?：是
- 要创建哪种类型的客户端组件?：Web 部件
- Web部件名称是什么?:我的第一个GraphWeb部件
- 要使用哪个框架？：无框架
此时，Yeoman 安装必需的依赖项，并为解决方案文件搭建基架。创建解决方案可能需要几分钟时间。 Yeoman 为项目搭建基架，以同时将 MyFirstGraphWebPart Web 部件包括在内。
接下来，键入以下命令，在 Visual Studio Code 中打开 Web 部件项目：
```
code .
```

包含 Microsoft Graph 类型，以简化 TypeScript 开发

在控制台中，输入以下内容来安装 Microsoft Graph 类型声明，以改进开发体验
```
npm install @microsoft/microsoft-graph-types
```

使用所需的 Microsoft Graph 权限请求更新解决方案清单

通过使用 SharePoint框架，无需创建显著的 Azure Active Directory 应用程序来管理解决方案的许可。相反，你可以在解决方案包中请求所需的许可，并且 Microsoft 365 租户管理员可以针对所有解决方案或针对此特定解决方案（单独解决方案）授予常规许可。

注意

租户管理员还可以使用 PowerShell cmdlet 管理 API 权限，因此无需在解决方案包中包含权限。

在这种情况下，我们将基于解决方案的许可包含在包中。

打开 ./config/package-solution.json 文件。

通过使用 webApiPermissionRequests 元素，将“解决方案”部分更新为包括许可授予请求，如以下代码部分所示。在这种情况下，我们将访问用户的电子邮件，因此已请求 Mail.Read 范围的许可。

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    //...

    "webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "Mail.Read"
      }
    ]

    //...
  }
}

更新代码以调用Microsoft Graph

在这种情况下，我们将修改代码，以便使用 Microsoft Graph 来获取当前用户最近五封电子邮件的访问权限。

打开 "/src/webparts/helloWorld/MyFirstGraphWebPartWebPart.ts"。

在文件顶部的现有 import 语句后面添加以下 import 语句：

import { MSGraphClientV3 } from '@microsoft/sp-http';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

更新 render()的方法如下所示。请注意我们是如何将 MSGraphClientV3 对象用于 Microsoft Graph API 的调用。此对象将抽象化访问令牌处理，因此作为开发人员，你可以将精力集中在业务逻辑上。

public render(): void {
  this.context.msGraphClientFactory
  .getClient('3')
  .then((client: MSGraphClientV3): void => {
    // get information about the current user from the Microsoft Graph
    client
    .api('/me/messages')
    .top(5)
    .orderby("receivedDateTime desc")
    .get((error, messages: any, rawResponse?: any) => {

      this.domElement.innerHTML = `
      <div class="${styles.myFirstGraphWebPart}">
        <div>
            <h3>Welcome to SharePoint Framework!</h3>
            <p>
                The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It's the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling.
            </p>
        </div>
        <div id="spListContainer" />
      </div>`;

      // List the latest emails based on what we got from the Graph
      this._renderEmailList(messages.value);
    });
  });
}

还包括以下 helper 函数，以便在现有 render() 方法后立即呈现电子邮件内容。请注意我们是如何使用 MicrosoftGraph.Message 类型的，以便在访问 API 响应数据时向我们提供更好的开发体验。

private _renderEmailList(messages: MicrosoftGraph.Message[]): void {
  let html: string = '';
  for (let index = 0; index < messages.length; index++) {
    html += `<p class="${styles.welcome}">Email ${index + 1} - ${escape(messages[index].subject)}</p>`;
  }

  // Add the emails to the placeholder
  const listContainer: Element = this.domElement.querySelector('#spListContainer');
  listContainer.innerHTML = html;
}

将 Web 部件打包并部署到SharePoint

执行下列命令来构建捆绑解决方案。这会将动态标签用作资产的主机 URL，从而执行项目的发布版本。
```
gulp bundle --ship
```
执行下列任务来打包解决方案。这会在 sharepoint/solution 文件夹中创建更新后的 graph-apis.sppkg 包。
```
gulp package-solution --ship
```

接下来，需要将已生成的包部署到租户应用程序目录。

注意

如果没有应用程序目录，SharePoint Online 管理员可以按照本指南中的说明创建一个应用程序目录：使用应用程序目录使自定义商业应用程序可供 SharePoint Online 环境使用。

转到租户的 SharePoint 应用程序目录。
将graph-apis.sppkg上传或将其拖放到应用程序目录。

这会部署客户端解决方案包。由于这是完全信任的客户端解决方案，因此 SharePoint 显示对话框，并提示信任要部署的客户端解决方案。

请注意，提示中的“域”列表显示的是“SharePoint Online”。这是因为内容是通过 Office 365 CDN 或应用程序目录（具体视租户设置而定）提供的。

确保选择“使此解决方案对组织中的所有站点可用”选项，以便可以在租户中轻松使用 Web 部件。

请注意，在本例中，针对 Microsoft Graph 要转到“已批准待定权限的 API 管理页面”和所需权限列表的请求为 Mail.Read。
选择“部署”。

注意，通过查看应用程序目录中的“应用包错误消息”列，可以看到包中是否存在任何异常或问题。

现在，Web 部件已部署并且可在 SharePoint Online 网站中自动提供，但务必要注意一点，在请求的权限得到批准前，Web 部件无法正常工作。

批准请求的 Microsoft Graph 权限

移至位于 https://{{tenant}}-admin.sharepoint.com 的 SharePoint 租户管理 UI。
转到左侧菜单选项中的 “高级 > API 管理 ”，查看当前挂起的权限请求。请注意以便查看“已阅.邮件”。为MicrosoftGraph的权限的请求正在等待审批。
选择挂起的权限行，然后从工具栏中选择“批准”或“拒绝”
在左侧面板中查看请求的权限，然后选择“批准”

重要

用来授予请求权限的帐户需要是租户管理员。 SharePoint服务管理员权限不够资格，因为该操作实际上是由 Azure Active Directory 执行的。

Web 部件所需的权限请求现已获批准，我们可以测试功能。

在 SharePoint 中使用 Web 部件

转到要测试 Web 部件的站点。我们已使用租户范围的部署选项部署 Web 部件，因此它可以在任何站点上使用。
在网站中创建新的新式页面或编辑现有页面。
在 Web 部件选取器中使用搜索Graph 查找 Web 部件：
从列表中选择“MyFirstGraphWebPart”，并注意 Web 部件如何使用 Microsoft Graph API 中的信息来呈现当前用户最近五封电子邮件

通过