SharePoint Embedded を使用して CRUD 操作を処理する REST API を作成する

4 分

SharePoint Embedded アプリケーションは、バックエンドストレージシステムやデータベースと対話するほとんどのアプリケーションと同様に、データとファイルの読み取り/取得、ファイルの格納または削除という 2 種類の操作を実行します。このセクションでは、Microsoft Graph REST API を使用して SharePoint 埋め込みコンテナーにファイルとドキュメントを格納および削除する方法について説明します。

SharePoint 埋め込みコンテナーは、OneDrive ドライブや SharePoint Online ドキュメントライブラリに似ています

コンテナー管理操作のために Microsoft Graph にサーバー側の呼び出しを行うために OBO トークンを取得する必要がある前のセクションとは異なり、Container にドキュメントを読み書きするときに、React SPA クライアント側アプリケーションから直接作成できます。

すべての SharePoint 埋め込みコンテナーは、既存の Microsoft Graph ドライブ として実装され、その内容は DriveItems です。つまり、SharePoint Online ドキュメントライブラリまたは OneDrive インスタンスへのアクセスに使用するのと同じ Microsoft Graph エンドポイントを使用できます。

Microsoft Graph を使用したファイルの読み取りと書き込み

Web アプリケーションからの Microsoft Graph を使用したファイルの読み取りと書き込みは、認証構成の処理に役立つ Microsoft Graph Toolkit を使用して簡略化されています。 Microsoft Graph Toolkit の 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 クライアントのインスタンスを 1 回の呼び出しで取得できます。

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 埋め込みコンテナーでのファイルの作成

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 埋め込みコンテナーでのフォルダーの作成

フォルダーの作成は似ていますが、別のペイロードを使用して Microsoft Graph の drive エンドポイントに HTTP POST を送信する点が異なります。

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 埋め込みコンテナー内のフォルダーとファイルの削除

最後に、ファイルとフォルダーを削除すると、Microsoft Graph に関する限り、ファイルとフォルダーの両方が s と見な 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 にファイルとドキュメントを格納および削除する方法について説明しました。

続行