Creare un'API REST per gestire le operazioni CRUD con SharePoint Embedded

Completato

Le applicazioni SharePoint Embedded, come la maggior parte delle applicazioni che interagiscono con i database e i sistemi di archiviazione back-end, eseguono due tipi di operazioni: lettura/recupero di dati e file e archiviazione o eliminazione di file. In questa sezione si apprenderà come archiviare ed eliminare file e documenti in un contenitore incorporato di SharePoint usando le API REST di Microsoft Graph.

I contenitori incorporati di SharePoint sono come unità di OneDrive e raccolte documenti di SharePoint Online

A differenza della sezione precedente in cui era necessario ottenere un token OBO per effettuare chiamate sul lato server a Microsoft Graph per le operazioni di gestione dei contenitori, durante la lettura e la scrittura di documenti in Container, è possibile renderli direttamente dall'applicazione lato client spa React.

Tutti i contenitori incorporati di SharePoint vengono implementati come unità Microsoft Graph esistenti e il relativo contenuto è DriveItems. Ciò significa che è possibile usare gli stessi endpoint di Microsoft Graph usati per accedere alle raccolte documenti di SharePoint Online o alle istanze di OneDrive.

Lettura e scrittura di file con Microsoft Graph

La lettura e la scrittura di file usando Microsoft Graph da un'applicazione Web sono semplificate usando Microsoft Graph Toolkit per gestire la configurazione dell'autenticazione. I componenti React per Microsoft Graph Toolkit lo rendono ancora più semplice.

Prima di tutto, configurare un client Microsoft Graph dalla radice del React SPA specificando il provider di autenticazione. In questo caso, verrà usato il provider v2 di Microsoft Authentication Library:

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

Supponendo che l'utente abbia eseguito l'accesso e ottenuto un token di accesso per chiamare Microsoft Graph, è possibile recuperare un'istanza del client Microsoft Graph all'interno del componente React con una singola chiamata:

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

const graphClient = Providers.globalProvider.graph.client;

Dopo aver autenticato e inizializzato un client Microsoft Graph, è possibile usare l'endpoint di https://graph.microsoft.com/{version}/drives Microsoft Graph per ottenere il contenuto di una Drive e di una cartella all'interno dell'unità. Verrà restituita una raccolta di file, nota anche come 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();

Creazione di file in contenitori incorporati di SharePoint

Per creare un file in un Drive oggetto con Microsoft Graph, inviare un put HTTP con un flusso binario del file.

Supponendo di avere un riferimento a un file selezionato nel Web browser usando la selezione file del sistema operativo nativo, creare un lettore di flusso per leggere il contenuto del file:

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

Quindi, quando l'intero file è stato caricato in memoria, come indicato dall'evento loadend , inviare il flusso usando il verbo PUT HTTP nell'endpoint di drive Microsoft Graph:

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

Creazione di cartelle in contenitori incorporati di SharePoint

La creazione di cartelle è simile, ad eccezione dell'invio di un POST HTTP all'endpoint di drive Microsoft Graph con un payload diverso:

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

Eliminazione di cartelle e file in contenitori incorporati di SharePoint

Infine, l'eliminazione di file e cartelle usa entrambi lo stesso tipo esatto di chiamata perché un file e una cartella sono entrambi considerati DriveItems per Microsoft Graph.

Per eliminare un DriveItemoggetto , inviare un'operazione HTTP DELETE usando l'intero URL all'elemento da eliminare come endpoint completo:

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

Riepilogo

In questa sezione si è appreso come archiviare ed eliminare file e documenti in un contenitore incorporato di SharePoint usando le API REST di Microsoft Graph.