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

Concluído

As aplicações Do SharePoint Embedded, como a maioria das aplicações que interagem com sistemas de armazenamento de back-end e bases de dados, realizam dois tipos de operações: ler/obter dados e ficheiros e armazenar ou eliminar ficheiros. Nesta secção, irá aprender a armazenar e eliminar ficheiros e documentos num Contentor Do SharePoint Embedded com as APIs REST do Microsoft Graph.

Os Contentores Incorporados do SharePoint são como unidades do OneDrive e bibliotecas de documentos do SharePoint Online

Ao contrário da secção anterior em que precisava de obter um token OBO para fazer chamadas do lado do servidor para o Microsoft Graph para operações de gestão de contentores, ao ler e escrever documentos no Contentor, pode fazê-los diretamente a partir da sua aplicação do lado do cliente do React SPA.

Todos os Contentores Do SharePoint Embedded são implementados como Unidades do Microsoft Graph existentes e os respetivos conteúdos são DriveItems. Isto significa que pode utilizar os mesmos pontos finais do Microsoft Graph que utiliza para aceder a bibliotecas de documentos do SharePoint Online ou a instâncias do OneDrive.

Ler e escrever ficheiros com o Microsoft Graph

A leitura e escrita de ficheiros com o Microsoft Graph a partir de uma aplicação Web é simplificada com o Microsoft Graph Toolkit para o ajudar a lidar com a configuração de autenticação. Os componentes do React para o Microsoft Graph Toolkit tornam isto ainda mais simples!

Primeiro, configure um cliente do Microsoft Graph a partir da raiz do React SPA ao especificar o fornecedor de autenticação. Neste caso, vamos utilizar o fornecedor 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
  ]
});

Partindo do princípio de que o utilizador iniciou sessão e obteve um token de acesso para chamar o Microsoft Graph, pode obter uma instância do cliente do Microsoft Graph no seu componente react com uma única chamada:

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

const graphClient = Providers.globalProvider.graph.client;

Depois de ter um cliente do Microsoft Graph autenticado e inicializado, pode utilizar o ponto final do https://graph.microsoft.com/{version}/drives Microsoft Graph para obter o conteúdo de uma Drive pasta e dentro dessa unidade. Esta ação irá devolver uma coleção de ficheiros, 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();

Criar ficheiros em Contentores Incorporados do SharePoint

Para criar um ficheiro num Drive com o Microsoft Graph, submeta um HTTP PUT com um fluxo binário do ficheiro.

Partindo do princípio de que tem uma referência a um ficheiro que foi selecionado no browser com o seletor de ficheiros do sistema operativo nativo, crie um leitor de fluxo para ler os conteúdos do ficheiro:

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

Em seguida, quando todo o ficheiro tiver sido carregado para a memória, conforme indicado pelo loadend evento, submeta o fluxo com o verbo HTTP PUT no ponto final do 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}`);
    });
});

Criar pastas em Contentores Incorporados do SharePoint

A criação de pastas é semelhante, exceto submeter um HTTP POST para o ponto final do drive Microsoft Graph com um payload 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);

Eliminar pastas e ficheiros em Contentores Incorporados do SharePoint

Por fim, a eliminação de ficheiros e pastas utiliza exatamente o mesmo tipo de chamada porque um ficheiro e uma pasta são considerados DriveItems no que diz respeito ao Microsoft Graph.

Para eliminar um , submeta uma DriveItemoperação HTTP DELETE com o URL completo para o item a eliminar como o ponto final 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 secção, aprendeu a armazenar e eliminar ficheiros e documentos num Contentor Do SharePoint Embedded com as APIs REST do Microsoft Graph.

Continuar