Creación de una API REST para controlar las operaciones CRUD con SharePoint Embedded

Completado

Las aplicaciones de SharePoint Embedded, como la mayoría de las aplicaciones que interactúan con sistemas de almacenamiento de back-end y bases de datos, realizan dos tipos de operaciones: leer y recuperar datos y archivos, y almacenar o eliminar archivos. En esta sección, aprenderá a almacenar y eliminar archivos y documentos en un contenedor incrustado de SharePoint mediante las API REST de Microsoft Graph.

Los contenedores incrustados de SharePoint son como las unidades de OneDrive y las bibliotecas de documentos de SharePoint Online

A diferencia de la sección anterior en la que necesitaba obtener un token de OBO para realizar llamadas del lado servidor a Microsoft Graph para operaciones de administración de contenedores, al leer y escribir documentos en Container, puede realizarlos directamente desde la aplicación del lado cliente de React SPA.

Todos los contenedores incrustados de SharePoint se implementan como unidades de Microsoft Graph existentes y su contenido son DriveItems. Esto significa que puede usar los mismos puntos de conexión de Microsoft Graph que se usan para acceder a las bibliotecas de documentos de SharePoint Online o a las instancias de OneDrive.

Lectura y escritura de archivos con Microsoft Graph

La lectura y escritura de archivos mediante Microsoft Graph desde una aplicación web se simplifica mediante el kit de herramientas de Microsoft Graph para ayudarle a controlar la configuración de autenticación. Los componentes de React para el Kit de herramientas de Microsoft Graph hacen que esto sea aún más sencillo.

En primer lugar, configure un cliente de Microsoft Graph desde la raíz de React SPA especificando el proveedor de autenticación. En este caso, usaremos el proveedor v2 de la biblioteca de autenticación de 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
  ]
});

Suponiendo que el usuario haya iniciado sesión y obtenido un token de acceso para llamar a Microsoft Graph, puede recuperar una instancia del cliente de Microsoft Graph dentro del componente de React con una sola llamada:

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

const graphClient = Providers.globalProvider.graph.client;

Una vez que haya autenticado e inicializado un cliente de Microsoft Graph, puede usar el punto de conexión de https://graph.microsoft.com/{version}/drives Microsoft Graph para obtener el contenido de una Drive carpeta y dentro de esa unidad. Esto devolverá una colección de archivos, también conocida como 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();

Creación de archivos en contenedores incrustados de SharePoint

Para crear un archivo en Drive con Microsoft Graph, envíe un HTTP PUT con una secuencia binaria del archivo.

Suponiendo que tiene una referencia a un archivo que se ha seleccionado en el explorador web mediante el selector de archivos del sistema operativo nativo, cree un lector de secuencias para leer el contenido del archivo:

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

A continuación, cuando se haya cargado todo el archivo en la memoria, como indica el loadend evento, envíe la secuencia mediante el verbo HTTP PUT en el punto de conexión 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}`);
    });
});

Creación de carpetas en contenedores incrustados de SharePoint

La creación de carpetas es similar, excepto que envía un HTTP POST al punto de conexión de drive Microsoft Graph con una carga diferente:

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

Eliminación de carpetas y archivos en contenedores incrustados de SharePoint

Por último, la eliminación de archivos y carpetas usa el mismo tipo exacto de llamada, ya que un archivo y una carpeta se consideran DriveItems en lo que respecta a Microsoft Graph.

Para eliminar , DriveItemenvíe una operación HTTP DELETE con toda la dirección URL al elemento que se va a eliminar como punto de conexión completo:

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

Resumen

En esta sección, ha aprendido a almacenar y eliminar archivos y documentos en un contenedor de SharePoint Embedded mediante las API REST de Microsoft Graph.

Continuar