SharePoint Embedded を使用して読み取りと表示の操作を処理する REST API を作成する

• 5 分

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

カスタム アプリの概要と、SharePoint Embedded、SharePoint Online、Microsoft Graph での動作

このモジュールの次の演習では、Web アプリを作成する手順について説明します。Web サービスでは、SharePoint Embedded Containers を管理し、これらのコンテナー上のドキュメントで CRUD 操作を実行できます。

ビルドするアプリケーションの 2 つのコンポーネントと、それぞれが何を担当するのかを見てみましょう。

ユーザー エクスペリエンスを実装する Web アプリケーション

ユーザー インターフェイスは、React を使用してシングルページ アプリケーション (SPA) を作成するために実装されます。 このアプリケーションでは、Microsoft Graph を使用してコンテンツとドキュメントをコンテナーに読み書きできます。これは、アプリ+ユーザーまたは委任されたアクセス許可を使用して実行できる操作であるためです。

Web アプリケーションでは、Fluent UI React Controls (v9) と Microsoft Graph Toolkit (v3) を使用して、さまざまなユーザー インターフェイス コンポーネントを使用して、ユーザー エクスペリエンスの作成を簡略化します。

クライアント側の React アプリケーションでは、サーバー側でのみ処理できる昇格されたアクセス許可が必要なため、すべての操作を実行できるわけではありません。

高い特権操作を処理するサーバー側 API

React アプリケーションによってすべてのコンテナー操作を直接実行できるわけではありません。 SharePoint 埋め込みコンテナーの作成、削除、一覧の取得など、これらのシナリオでは、サーバー側 API サーバーを作成します

このプロジェクトでは、Azure Functions アプリケーションを使用するか、Azure Web アプリを使用して ASP.NET Web API プロジェクトをホストできます。 このプロジェクトでは、軽量 Node.js Restify サーバーを使用します。

この API は、アプリケーションにサインインしたときに受け取ったユーザーのアクセス トークンを含む、React SPA から要求を受け取ります。 このアクセス トークンと OBO フローを使用して、ユーザーとしてコンテナー操作を実行するために使用できる Microsoft Graph 用のアクセス トークンを取得します。

Microsoft Graph を使用した SharePoint 埋め込みコンテナーの作成

サーバー側 API では、他のタスクの中でもコンテナーを作成する必要があります。 これは、On-Behalf-Of フローを使用してサーバー側 API によって実行され、Microsoft Graph 用のアクセス トークンを取得します。

この呼び出しは、現在サインインしているユーザーのアクセス トークンを含む React SPA によって最初に開始されます。

API サーバーは、まず、Microsoft 認証ライブラリ (MSAL) を使用して のインスタンス ConfidentialClientApplication を作成します。 を作成するには、アプリの ConfidentialClientApplication クライアント ID とクライアント シークレットを使用して Microsoft Entra ID で認証します。

const msalConfig: MSAL.Configuration = {
  auth: {
    clientId: process.env['API_ENTRA_APP_CLIENT_ID']!,
    authority: process.env['API_ENTRA_APP_AUTHORITY']!,
    clientSecret: process.env['API_ENTRA_APP_CLIENT_SECRET']!
  }
};

const confidentialClient = new MSAL.ConfidentialClientApplication(msalConfig);

次に、 を使用して ConfidentialClientApplication 、ユーザーのサインインから提供されたアクセス トークンを Microsoft Graph を呼び出すことができるアクセス トークンと交換することで、現在のユーザーに代わってアクセス トークンを取得します。

// get user's access token from the request submitted by the React SPA
const [bearer, token] = req.headers.authorization.split(' ');

// set that token to the assertion and the scopes to the permissions we
//    need in the access token to call Microsoft Graph
const graphTokenRequest = {
  oboAssertion: token,
  scopes: [
    Scopes.GRAPH_SITES_READ_ALL,
    Scopes.SPREPOSERVICES_FILESTORAGECONTAINER_SELECTED
  ]
};

// obtain the OBO token using the ConfidentialClientApplication object
const ccaOboResponse = await confidentialClient.acquireTokenOnBehalfOf(graphTokenRequest);
const oboGraphToken = ccaOboResponse!.accessToken;

Microsoft Graph の OBO トークンを取得したら、認証プロバイダーと Microsoft Graph クライアントのインスタンスを作成して、Microsoft Graph の REST API の呼び出しを簡略化します。

const authProvider = (callback: MSGraph.AuthProviderCallback) => {
  callback(null, graphTokenRequest);
};

const graphClient = MSGraph.Client.init({
  authProvider: authProvider,
  defaultVersion: 'beta'
});

最後に、新しいコンテナーを作成するために、HTTP POST 要求を Microsoft Graph の https://graph.microsoft.com/{version}/storage/fileStorage/containers エンドポイントに送信します。

const containerRequestData = {
  displayName: 'New container name',
  description: 'New container description',
  containerTypeId: process.env["CONTAINER_TYPE_ID"]
};

const graphResponse = await graphClient.api(`storage/fileStorage/containers`)
                                       .post(containerRequestData);

Microsoft Graph を使用した SharePoint 埋め込みコンテナーの一覧の取得

実行するもう 1 つの一般的なタスクは、すべてのコンテナーの一覧を取得することです。 この要求には、コンテナーの作成と同じ要件があります。

Microsoft Graph クライアントの認証と初期化は、コンテナーを作成する場合と同じです。 唯一の違いは、Microsoft Graph に送信する要求です。 この場合は。 同じ https://graph.microsoft.com/{version}/storage/fileStorage/containers エンドポイントに HTTP GET を発行します。

const graphResponse = await graphClient.api(`storage/fileStorage/containers?$filter=containerTypeId eq ${process.env["CONTAINER_TYPE_ID"]}`).get();

概要

このセクションでは、Microsoft Graph REST API を使用して SharePoint Embedded Containers にアクセスする方法について説明しました。