Criar API REST para lidar com operações CRUD com o SharePoint Embedded

Os aplicativos incorporados do SharePoint, como a maioria dos aplicativos que interagem com sistemas de armazenamento back-end e bancos de dados, executam dois tipos de operações: leitura/recuperação de dados e arquivos e armazenamento ou exclusão de arquivos. Nesta seção, você aprenderá a armazenar e excluir arquivos e documentos em um Contêiner do SharePoint Embedded usando as APIs REST do Microsoft Graph.

Os Contêineres Incorporados do SharePoint são como o OneDrive Drives e as bibliotecas de documentos do SharePoint Online

Ao contrário da seção anterior, em que você precisava obter um token OBO para fazer chamadas do lado do servidor para o Microsoft Graph para operações de gerenciamento de contêiner, ao ler e gravar documentos no contêiner, você pode fazê-los diretamente do seu aplicativo do lado do cliente do React SPA.

Todos os Contêineres Incorporados do SharePoint são implementados como Unidades do Microsoft Graph existentes e seu conteúdo são DriveItems. Isso significa que você pode usar os mesmos pontos de extremidade do Microsoft Graph que usa para acessar bibliotecas de documentos do SharePoint Online ou instâncias do OneDrive.

Ler e gravar arquivos com o Microsoft Graph

A leitura e a gravação de arquivos usando o Microsoft Graph de um aplicativo Web são simplificadas usando o Microsoft Graph Toolkit para ajudá-lo a lidar com a configuração de autenticação. Os componentes do React para o Microsoft Graph Toolkit tornam isso ainda mais simples!

Primeiro, configure um cliente do Microsoft Graph da raiz do seu SPA do React especificando o provedor de autenticação. Nesse caso, usaremos o provedor v2 da Biblioteca de Autenticação da 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
  ]
});

Supondo que o usuário tenha entrado e obtido um token de acesso para chamar o Microsoft Graph, você pode recuperar uma instância do cliente do Microsoft Graph em seu componente React com uma única chamada:

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

const graphClient = Providers.globalProvider.graph.client;

Depois de ter um cliente Microsoft Graph autenticado e inicializado, você pode usar o ponto de extremidade do https://graph.microsoft.com/{version}/drives Microsoft Graph para obter o conteúdo de uma Drive pasta e a dentro dessa unidade. Isso retornará uma coleção de arquivos, também conhecida 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();

Criando arquivos em Contêineres do SharePoint Embedded

Para criar um arquivo em um Drive com o Microsoft Graph, você envia um HTTP PUT com um fluxo binário do arquivo.

Supondo que você tenha uma referência a um arquivo que foi selecionado no navegador da Web usando o seletor de arquivos do sistema operacional nativo, crie um leitor de fluxo para ler o conteúdo do arquivo:

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

Em seguida, quando todo o arquivo tiver sido carregado na memória, conforme indicado pelo loadend evento, envie o fluxo usando o verbo HTTP PUT no ponto de drive extremidade do 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}`);
    });
});

Criando pastas em Contêineres do SharePoint Embedded

A criação de pastas é semelhante, exceto que você envia um HTTP POST para o ponto de extremidade do drive Microsoft Graph com uma 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);

Excluindo pastas e arquivos em Contêineres do SharePoint Embedded

Por fim, a exclusão de arquivos e pastas usa exatamente o mesmo tipo de chamada porque um arquivo e uma pasta são considerados DriveItems no que diz respeito ao Microsoft Graph.

Para excluir um DriveItem, envie uma operação HTTP DELETE usando toda a URL para o item a ser excluído como o ponto de extremidade completo:

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

Resumo

Nesta seção, você aprendeu como armazenar e excluir arquivos e documentos em um Contêiner Incorporado do SharePoint usando as APIs REST do Microsoft Graph.