Erstellen einer REST-API zum Verarbeiten von CRUD-Vorgä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 Dateien und Dokumente in einem SharePoint Embedded-Container mithilfe der Microsoft Graph-REST-APIs speichern und löschen.

Eingebettete SharePoint-Container ähneln OneDrive-Laufwerken und SharePoint Online-Dokumentbibliotheken.

Im Gegensatz zum vorherigen Abschnitt, in dem Sie ein OBO-Token für serverseitige Aufrufe an Microsoft Graph für Containerverwaltungsvorgänge benötigen, können Sie diese beim Lesen und Schreiben von Dokumenten in Container direkt aus Ihrer clientseitigen React SPA-Anwendung erstellen.

Alle SharePoint Embedded-Container werden als vorhandene Microsoft Graph-Laufwerke implementiert, und ihre Inhalte sind DriveItems. Dies bedeutet, dass Sie dieselben Microsoft Graph-Endpunkte verwenden können, die Sie für den Zugriff auf SharePoint Online-Dokumentbibliotheken oder OneDrive-Instanzen verwenden können.

Lesen und Schreiben von Dateien mit Microsoft Graph

Das Lesen und Schreiben von Dateien mit Microsoft Graph aus einer Webanwendung wird mithilfe des Microsoft Graph-Toolkits vereinfacht, um Ihnen bei der Verarbeitung der Authentifizierungskonfiguration zu helfen. Die React-Komponenten für das Microsoft Graph Toolkit machen dies noch einfacher!

Richten Sie zunächst einen Microsoft Graph-Client aus dem Stamm Ihrer React SPA ein, indem Sie den Authentifizierungsanbieter angeben. In diesem Fall verwenden wir den v2-Anbieter der Microsoft-Authentifizierungsbibliothek:

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

Angenommen, der Benutzer hat sich angemeldet und ein Zugriffstoken zum Aufrufen von Microsoft Graph erhalten, können Sie eine Instanz des Microsoft Graph-Clients innerhalb Ihrer React-Komponente mit einem einzigen Aufruf abrufen:

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

const graphClient = Providers.globalProvider.graph.client;

Sobald Sie über einen authentifizierten und initialisierten Microsoft Graph-Client verfügen, können Sie den Microsoft Graph-Endpunkt verwenden, um den Inhalt eines Drive - und eines Ordners https://graph.microsoft.com/{version}/drives auf diesem Laufwerk abzurufen. Dadurch wird eine Auflistung von Dateien zurückgegeben, die auch als DriveItemsbezeichnet wird:

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

Erstellen von Dateien in SharePoint Embedded-Containern

Um eine Datei in einer Drive mit Microsoft Graph zu erstellen, übermitteln Sie einen HTTP PUT mit einem binärdatenstrom der Datei.

Wenn Sie über einen Verweis auf eine Datei verfügen, die im Webbrowser mit der Dateiauswahl des nativen Betriebssystems ausgewählt wurde, erstellen Sie einen Streamleser, um den Inhalt der Datei zu lesen:

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

Wenn dann die gesamte Datei in den Arbeitsspeicher geladen wurde, wie durch das loadend -Ereignis angegeben, übermitteln Sie den Stream mithilfe des HTTP PUT-Verbs auf dem Microsoft Graph-Endpunkt drive :

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

Erstellen von Ordnern in SharePoint Embedded-Containern

Das Erstellen von Ordnern ist ähnlich, mit der Ausnahme, dass Sie eine HTTP POST-Nachricht mit einer anderen Nutzlast an den Microsoft Graph-Endpunkt drive übermitteln:

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

Löschen von Ordnern und Dateien in SharePoint Embedded-Containern

Schließlich wird beim Löschen von Dateien und Ordnern genau derselbe Aufruftyp verwendet, da eine Datei und ein Ordner für Microsoft Graph als s betrachtet DriveItemwerden.

Um einen DriveItemzu löschen, übermitteln Sie einen HTTP DELETE-Vorgang mit der gesamten URL an das Element, das als vollständiger Endpunkt gelöscht werden soll:

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

Zusammenfassung

In diesem Abschnitt haben Sie erfahren, wie Sie Dateien und Dokumente in einem SharePoint Embedded-Container mithilfe der Microsoft Graph-REST-APIs speichern und löschen.

Weiter