创建 REST API 以使用 SharePoint Embedded 处理 CRUD 操作

4 分钟

SharePoint Embedded 应用程序（与大多数与后端存储系统和数据库交互的应用程序）执行两种类型的操作：读取/检索数据和文件，以及存储或删除文件。在本部分中，你将了解如何使用 Microsoft Graph REST API 在 SharePoint Embedded 容器中存储和删除文件和文档。

SharePoint 嵌入式容器类似于 OneDrive 驱动器和 SharePoint Online 文档库

与上一部分需要获取 OBO 令牌以对 Microsoft Graph 进行容器管理操作的服务器端调用不同，在向容器读取和写入文档时，可以直接从 React SPA 客户端应用程序进行调用。

所有 SharePoint 嵌入式容器都作为现有 Microsoft Graph 驱动器 实现，其内容为 DriveItems。这意味着可以使用用于访问 SharePoint Online 文档库或 OneDrive 实例的相同 Microsoft Graph 终结点。

使用 Microsoft Graph 读取和写入文件

Microsoft Graph 工具包简化了使用 Microsoft Graph 从 Web 应用程序读取和写入文件，以帮助你处理身份验证配置。 Microsoft Graph 工具包的 React 组件使此操作更简单！

首先，通过指定身份验证提供程序，从 React SPA 的根目录设置 Microsoft Graph 客户端。在这种情况下，我们将使用 Microsoft 身份验证库的 v2 提供程序：

import { Providers } from "@microsoft/mgt-element";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

// setup MS Graph scopes in global provider
Providers.globalProvider = new Msal2Provider({
  clientId: Constants.CLIENT_ENTRA_APP_CLIENT_ID,
  scopes: [
    ...Scopes.GRAPH_OPENID_CONNECT_BASIC,
    Scopes.GRAPH_USER_READ_ALL,
    Scopes.GRAPH_FILES_READ_WRITE_ALL,
    Scopes.GRAPH_SITES_READ_ALL,
    Scopes.SPEMBEDDED_FILESTORAGECONTAINER_SELECTED
  ]
});

假设用户已登录并获取访问令牌来调用 Microsoft Graph，然后可以通过一次调用在 React 组件中检索 Microsoft Graph 客户端的实例：

import { Providers } from "@microsoft/mgt-element";

const graphClient = Providers.globalProvider.graph.client;

拥有经过身份验证并初始化的 Microsoft Graph 客户端后，可以使用 Microsoft Graph 的 https://graph.microsoft.com/{version}/drives 终结点获取该驱动器中和文件夹的内容 Drive 。这将返回文件集合，也称为 DriveItems：

const driveId = props.container.id;
const driveItemId = folderId || 'root'; // get folder, or default to the 'root' folder

// get container contents for specified folder
const graphResponse = await graphClient.api(`/drives/${driveId}/items/${driveItemId}/children`).get();

在 SharePoint Embedded 容器中创建文件

若要使用 Microsoft Graph 在 Drive 中创建文件，请使用文件的二进制流提交 HTTP PUT。

假设你引用了使用本机操作系统的文件选取器在 Web 浏览器中选择的文件，请创建一个流读取器来读取文件的内容：

const file = // file reference obtained from the OS' file picker
const fileReader = new FileReader();
fileReader.readAsArrayBuffer(file);

然后，当整个文件已加载到内存（如事件所示）时 loadend ，请在 Microsoft Graph 的 drive 终结点上使用 HTTP PUT 谓词提交流：

fileReader.addEventListener('loadend', async (event: any) => {
  const graphClient = Providers.globalProvider.graph.client;
  const endpoint = `/drives/${props.container.id}/items/${folderId || 'root'}:/${file.name}:/content`;
  graphClient.api(endpoint).putStream(fileReader.result)
    .then(async (response) => {
      await loadItems(folderId || 'root');
    })
    .catch((error) => {
      console.error(`Failed to upload file ${file.name}: ${error.message}`);
    });
});

在 SharePoint Embedded 容器中创建文件夹

创建文件夹的过程类似，只不过使用其他有效负载将 HTTP POST 提交到 Microsoft Graph 的 drive 终结点：

const graphClient = Providers.globalProvider.graph.client;
const endpoint = `/drives/${props.container.id}/items/${currentFolderId}/children`;
const data = {
  "name": folderName,
  "folder": {},
  "@microsoft.graph.conflictBehavior": "rename"
};
await graphClient.api(endpoint).post(data);

删除 SharePoint Embedded 容器中的文件夹和文件

最后，删除文件和文件夹都使用完全相同的调用类型，因为就 Microsoft Graph 而言，文件和文件夹都被视为 DriveItem。

若要删除 DriveItem，请使用整个 URL 将 HTTP DELETE 操作提交到要作为完整终结点删除的项目：

const graphClient = Providers.globalProvider.graph.client;
const endpoint = `/drives/${props.container.id}/items/${selectedRows.entries().next().value[0]}`;
await graphClient.api(endpoint).delete();

摘要

本部分介绍了如何使用 Microsoft Graph REST API 在 SharePoint Embedded Container 中存储和删除文件和文档。

继续