在SharePoint Framework中调用Graph

SharePoint Framework 1.4版本之后，提供了一个对象MSGraphClient，可以使用这个对象，在SharePoint Framework项目中方便地调用Graph API。这个对象在webpart和extension扩展中都可以使用。这里以webpart为例说明一下使用方法。

首先使用Yeoman创建一个SharePoint Framework的webpart项目如下（这里使用的是SharePoint Framework 1.7版本）：

创建完成之后使用Code打开项目的webpart文件”GraphTestWebPart.ts“。在使用MSGraph对象之前，先要从“microsoft/sp-http"这个包中导入这个对象：

import { MSGraphClient } from '@microsoft/sp-http';

在webpart类中声明一个私有成员变量：

private graphClient: MSGraphClient;

添加onInit方法，在webpart初始化的时候获取MSGraphClient对象：

public onInit(): Promise<void> {
    return new Promise<void>((resolve: () => void, reject: (error: any) => void): void => {
      this.context.msGraphClientFactory
        .getClient()
        .then((client: MSGraphClient): void => {
          this.graphClient = client;
          resolve();
        }, err => reject(err));
    });
  }

其中MsGraphClientFactory的getClient()方法用来获取一个用来连接当前tenant租户的MsGraphClient实例，在获取成功之后，将实例赋值给graphClient。

以使用Graph API读取邮件为例，添加一个方法getMessages()如下：

private getMessage() {
    this.graphClient
    .api("me/messages")
    .version("v1.0")
    .select("bodyPreview,receivedDateTime,from,subject,webLink")
    .top(10)
    .orderby("receivedDateTime desc")
    .get((err: any, res: any): void => {
        if (err) {
          console.log(err);
          return;
        }

        if (res && res.value && res.value.length > 0) {
          console.log(res.value);
        }
        else {
          console.log('no message found');
        }
      }
    );
  }

在render方法中调用这个方法：

然后在terminal中使用gulp serve --nobrowser启动，在online的workbench工作台里添加webpart，查看浏览器的控制台中输出的信息，我们会发现在调用Graph读取用户的邮件的时候出错了，错误如下：

AADSTS65001: The user or administrator has not consented to use the application with ID {Guid} named 'SharePoint Online Client Extensibility Web Application Principal'. Send an interactive authorization request for this user and resource.

这是因为我们还没有在SharePoint管理中心为Graph应用赋予权限。我们需要赋予Graph API读取邮件的权限，可以使用office365 cli这个工具实现，首先安装office 365 cli：

安装成功之后，执行如下命令登陆SharePoint 管理中心:

o365 spo login https://xxxx-admin.sharepoint.com

其中url参数需要指定sharepoint管理中心的url，通常是https://xxx-admin.sharepoint.com

登陆成功之后，使用如下命令为Graph API赋予读取邮件的权限：

o365 spo serviceprincipal grant add --resource 'Microsoft Graph' --scope 'Mail.Read'

执行成功之后，打开SharePoint 管理中心，使用最新的UI，在”API management“页面可以看到这个权限已经被添加进来了（需要记下ObjectId这一长串字符，稍后用来移除这个权限）。

这个时候重新启动项目，在online工作台上添加webpart之后，会发现之前的错误消失了，webpart读到了邮件的信息。

但是这样管理权限的方式，对管理员来说比较麻烦，所以SPFx提供了一个请求赋予Graph API权限的方法，在package-solutions.json文件中，通过”webApiPermissionRequests“这个配置选项，在安装的时候就可以请求相关的权限。在package-solutions.json文件中添加代码如下：

这个配置选项是一个数组，可以添加多个权限。添加完成之后，在部署之前，先刪除之前使用office 365 cli添加的权限，可以在UI中移除，也可以使用如下cli命令移除，其中的grantId参数就是添加权限时返回的ObjectId：

 spo serviceprincipal grant revoke --grantId JoAS6VUSkEmxrxWVIOkoRfvIa9...

删除之后，API management如下：

然后打包webpart，将webpart的sppkg文件添加到app catalog中，会提示管理员批准这个权限请求：

点击deploy，然后回到API management页面，会发现我们请求的权限在Pending approval里，这样管理员可以批准这个权限请求，webpart就可以使用了。

在SharePoint Framework中调用Graph

猜你喜欢