Erstellen einer REST-API zum Verarbeiten von Lese- und Anzeigevorgängen mit SharePoint Embedded

Abgeschlossen

SharePoint Embedded-Anwendungen führen wie die meisten Anwendungen, die mit Back-End-Speichersystemen und -datenbanken interagieren, zwei Arten von Vorgängen aus: Lesen/Abrufen von Daten und Dateien sowie Speichern oder Löschen von Dateien. In diesem Abschnitt erfahren Sie, wie Sie mithilfe der Microsoft Graph-REST-APIs auf SharePoint Embedded-Container zugreifen.

Übersicht über unsere benutzerdefinierte App und deren Funktionsweise mit SharePoint Embedded, SharePoint Online und Microsoft Graph

Die folgenden Übungen in diesem Modul führen Sie durch die Schritte zum Erstellen einer Web-App und eines Webdiensts, die SharePoint Embedded-Container verwalten und CRUD-Vorgänge mit Dokumenten in diesen Containern ausführen können.

Sehen wir uns die beiden Komponenten der Anwendung an, die Sie erstellen werden, und was jeweils dafür verantwortlich ist.

Webanwendung, die die Benutzeroberfläche implementiert

Die Benutzeroberfläche wird mithilfe von React implementiert, um eine Single-Page-Anwendung (SPA) zu erstellen. Diese Anwendung kann Microsoft Graph verwenden, um Inhalte und Dokumente in die Container zu lesen und zu schreiben, da dies Vorgänge sind, die mit der App und dem Benutzer oder delegierten Berechtigungen ausgeführt werden können.

Die Webanwendung verwendet die Fluent UI React Controls (v9) und das Microsoft Graph Toolkit (v3), um verschiedene Komponenten der Benutzeroberfläche zu verwenden, um die Erstellung der Benutzeroberfläche zu vereinfachen.

Nicht alle Vorgänge können von der clientseitigen React-Anwendung ausgeführt werden, da sie erhöhte Berechtigungen erfordern, die nur serverseitig verarbeitet werden können.

Serverseitige API, die Vorgänge mit höheren Berechtigungen verarbeitet

Nicht alle Containervorgänge können direkt von der React-Anwendung ausgeführt werden. Für diese Szenarien, einschließlich des Erstellens, Löschens und Abrufens einer Liste der eingebetteten SharePoint-Container, erstellen wir einen serverseitigen API-Server.

Für dieses Projekt können Sie eine Azure Functions-Anwendung oder eine Azure-Web-App verwenden, um ein ASP.NET Web-API-Projekt zu hosten. In unserem Projekt verwenden wir den einfachen Node.js Restify-Server .

Diese API empfängt Anforderungen von unserer React-SPA, die das Zugriffstoken des Benutzers enthalten, das er bei der Anmeldung bei der Anwendung erhalten hat. Sie verwenden dieses Zugriffstoken und den OBO-Fluss, um ein Für Microsoft Graph bestimmtes Zugriffstoken abzurufen, das Sie zum Ausführen von Containervorgängen als Benutzer verwenden können.

Erstellen eingebetteter SharePoint-Container mit Microsoft Graph

Die serverseitige API muss unter anderem Container erstellen. Dies erfolgt durch die serverseitige API mithilfe des On-Behalf-Of-Flusses, um ein Zugriffstoken abzurufen, das für Microsoft Graph vorgesehen ist.

Dieser Aufruf wird zuerst von unserer React-SPA initiiert, die das Zugriffstoken des aktuell angemeldeten Benutzers enthält.

Der API-Server erstellt zunächst mithilfe der Microsoft Authentication Library (MSAL) eine Instanz von .ConfidentialClientApplication Um die ConfidentialClientApplication zu erstellen, authentifizieren Sie sich mit der Microsoft Entra-ID mithilfe der Client-ID und des geheimen Clientschlüssels unserer App:

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);

Verwenden Sie dann , ConfidentialClientApplication um ein Zugriffstoken im Namen des aktuellen Benutzers abzurufen, indem Sie das angegebene Zugriffstoken aus der Benutzeranmeldung gegen ein Zugriffstoken austauschen, das Microsoft Graph aufrufen kann:

// 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;

Nachdem Sie nun über das OBO-Token für Microsoft Graph verfügen, erstellen Sie einen Authentifizierungsanbieter und dann eine Instanz des Microsoft Graph-Clients, um Aufrufe der REST-API von Microsoft Graph zu vereinfachen:

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

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

Übermitteln Sie abschließend eine HTTP POST-Anforderung an den Microsoft Graph-Endpunkt https://graph.microsoft.com/{version}/storage/fileStorage/containers , um einen neuen Container zu erstellen:

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);

Abrufen einer Liste von eingebetteten SharePoint-Containern mit Microsoft Graph

Die andere allgemeine Aufgabe, die Sie ausführen, besteht darin, eine Liste aller Container abzurufen. Diese Anforderung hat die gleichen Anforderungen wie die Erstellung eines Containers.

Die Authentifizierung und Initialisierung eines Microsoft Graph-Clients ist identisch mit der Erstellung eines Containers. Der einzige Unterschied ist die Anforderung, die Sie an Microsoft Graph senden. In diesem Fall. Sie geben einen HTTP GET-Wert an denselben https://graph.microsoft.com/{version}/storage/fileStorage/containers Endpunkt aus:

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

Zusammenfassung

In diesem Abschnitt haben Sie erfahren, wie Sie mithilfe der Microsoft Graph-REST-APIs auf SharePoint Embedded-Container zugreifen.