SPFX Web Part通过SharePoint上下文获取MS Graph Outlook任务访问令牌

刚好我之前处理过类似的SPFX读取Outlook任务的需求，给你梳理下完整的解决方案，完全符合你不想让用户二次登录、用SharePoint上下文认证的要求～

你提到的/_api/SP.OAuth.Token/Acquire确实只能获取到有限的默认Graph权限，没法满足读取Outlook任务的需求。要解决这个问题，我们需要通过SPFX的AADHttpClient来请求正确的Graph权限，同时借助租户级的权限批准机制，实现静默认证。

1. 配置SPFX项目的权限请求 #

首先在你的SPFX项目的config/package-solution.json文件里，添加对Microsoft Graph的权限请求。我们需要的是Tasks.Read委托权限（如果需要修改任务可以用Tasks.ReadWrite）：

{
  "solution": {
    // 其他配置...
    "webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "Tasks.Read"
      }
    ]
  }
}

2. 部署并申请权限批准 #

• 打包你的SPFX解决方案（gulp bundle --ship + gulp package-solution --ship），然后上传到SharePoint租户的App Catalog。
• 登录到SharePoint管理员中心，进入高级 > API访问，找到你刚才提交的Tasks.Read权限请求，点击批准（这个步骤必须由租户管理员操作）。

3. 在Web部件中用AADHttpClient调用Graph API #

现在可以在SPFX Web部件里注入AADHttpClient，利用当前用户的SharePoint上下文静默获取Graph令牌，然后调用任务接口：

import { AADHttpClient, HttpClientResponse } from '@microsoft/sp-http';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

// 假设这是你的Web部件类
export default class TaskViewerWebPart extends BaseClientSideWebPart<any> {
  public async render(): Promise<void> {
    this.domElement.innerHTML = `<div id="task-container">加载任务中...</div>`;
    
    try {
      // 获取AADHttpClient实例，指向Graph API
      const aadClient = await this.context.aadHttpClientFactory.getClient('https://graph.microsoft.com');
      
      // 调用Graph API获取当前用户的Outlook任务
      const response: HttpClientResponse = await aadClient.get(
        'https://graph.microsoft.com/v1.0/me/tasks',
        AADHttpClient.configurations.v1
      );

      if (response.ok) {
        const taskData = await response.json();
        // 渲染任务到页面
        this.renderTasks(taskData.value);
      } else {
        this.domElement.innerHTML = `<div>获取任务失败：${await response.text()}</div>`;
      }
    } catch (error) {
      this.domElement.innerHTML = `<div>请求出错：${error.message}</div>`;
    }
  }

  private renderTasks(tasks: any[]): void {
    if (tasks.length === 0) {
      this.domElement.innerHTML = `<div>没有找到分配给你的Outlook任务</div>`;
      return;
    }

    const taskList = tasks.map(task => `<li><strong>${task.title}</strong> - ${task.status}</li>`).join('');
    this.domElement.innerHTML = `<h3>你的Outlook任务</h3><ul>${taskList}</ul>`;
  }
}

4. 关键注意事项 #

• 权限批准是必须的：如果管理员没批准权限，普通用户访问Web部件时会收到权限不足的错误。
• 端点选择：如果需要读取特定任务文件夹的任务，可以用Graph API的/me/taskFolders/{folder-id}/tasks端点。
• 避免使用旧的GraphHttpClient：GraphHttpClient是SPFX的旧版API，权限受限，官方现在推荐使用AADHttpClient来处理Graph请求。

内容的提问来源于stack exchange，提问作者Hari Govind