Créer une API REST pour gérer les opérations CRUD avec SharePoint Embedded

Effectué

Les applications SharePoint Embedded, comme la plupart des applications qui interagissent avec les systèmes de stockage principaux et les bases de données, effectuent deux types d’opérations : lecture/récupération de données et de fichiers, et stockage ou suppression de fichiers. Dans cette section, vous allez apprendre à stocker et supprimer des fichiers et des documents dans un conteneur SharePoint Embedded à l’aide des API REST Microsoft Graph.

Les conteneurs SharePoint Embedded sont similaires aux lecteurs OneDrive et aux bibliothèques de documents SharePoint Online

Contrairement à la section précédente où vous deviez obtenir un jeton OBO pour effectuer des appels côté serveur à Microsoft Graph pour les opérations de gestion de conteneur, lors de la lecture et de l’écriture de documents dans Container, vous pouvez les créer directement à partir de votre application côté client React SPA.

Tous les conteneurs SharePoint Embedded sont implémentés en tant que lecteurs Microsoft Graph existants et leur contenu est DriveItems. Cela signifie que vous pouvez utiliser les mêmes points de terminaison Microsoft Graph que ceux que vous utilisez pour accéder aux bibliothèques de documents SharePoint Online ou aux instances OneDrive.

Lecture et écriture de fichiers avec Microsoft Graph

La lecture et l’écriture de fichiers à l’aide de Microsoft Graph à partir d’une application web sont simplifiées à l’aide du Kit de ressources Microsoft Graph pour vous aider à gérer la configuration de l’authentification. Les composants React pour le Kit de ressources Microsoft Graph simplifient encore cette opération.

Tout d’abord, configurez un client Microsoft Graph à partir de la racine de votre spa React en spécifiant le fournisseur d’authentification. Dans ce cas, nous allons utiliser le fournisseur v2 de la bibliothèque d’authentification Microsoft :

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

En supposant que l’utilisateur s’est connecté et a obtenu un jeton d’accès pour appeler Microsoft Graph, vous pouvez ensuite récupérer une instance du client Microsoft Graph au sein de votre composant React avec un seul appel :

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

const graphClient = Providers.globalProvider.graph.client;

Une fois que vous avez un client Microsoft Graph authentifié et initialisé, vous pouvez utiliser le point de terminaison de https://graph.microsoft.com/{version}/drives Microsoft Graph pour obtenir le contenu d’un et d’un Drive dossier dans ce lecteur. Cette opération retourne une collection de fichiers, également appelée 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();

Création de fichiers dans des conteneurs SharePoint Embedded

Pour créer un fichier dans un Drive avec Microsoft Graph, vous envoyez un PUT HTTP avec un flux binaire du fichier.

En supposant que vous disposez d’une référence à un fichier sélectionné dans le navigateur web à l’aide du sélecteur de fichiers du système d’exploitation natif, créez un lecteur de flux pour lire le contenu du fichier :

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

Ensuite, lorsque le fichier entier a été chargé en mémoire, comme indiqué par l’événement loadend , envoyez le flux à l’aide du verbe HTTP PUT sur le point de terminaison de 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}`);
    });
});

Création de dossiers dans des conteneurs SharePoint Embedded

La création de dossiers est similaire, sauf que vous envoyez une requête HTTP POST au point de terminaison de drive Microsoft Graph avec une charge utile différente :

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

Suppression de dossiers et de fichiers dans des conteneurs SharePoint Embedded

Enfin, la suppression de fichiers et de dossiers utilise exactement le même type d’appel, car un fichier et un dossier sont tous deux considérés comme DriveItems en ce qui concerne Microsoft Graph.

Pour supprimer un DriveItem, envoyez une opération HTTP DELETE en utilisant l’URL entière de l’élément à supprimer comme point de terminaison complet :

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

Résumé

Dans cette section, vous avez appris à stocker et supprimer des fichiers et des documents dans un conteneur SharePoint Embedded à l’aide des API REST Microsoft Graph.

Continuer