Criar a API REST para processar operações de leitura e apresentação 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 aceder aos Contentores Incorporados do SharePoint com as APIs REST do Microsoft Graph.

Descrição geral da nossa aplicação personalizada e como funciona com o SharePoint Embedded, o SharePoint Online e o Microsoft Graph

Os exercícios seguintes neste módulo irão guiá-lo ao longo dos passos de criação de uma aplicação Web e o serviço Web pode gerir Contentores Incorporados do SharePoint e realizar operações CRUD com documentos nestes Contentores.

Vejamos os dois componentes da aplicação que vai criar e o que cada um é responsável.

Aplicação Web que implementa a experiência de utilizador

A interface de utilizador é implementada com o React para criar uma aplicação de página única (SPA). Esta aplicação pode utilizar o Microsoft Graph para ler e escrever conteúdos e documentos nos Contentores, uma vez que estas são operações que podem ser efetuadas com a aplicação+utilizador ou permissões delegadas.

A aplicação Web utilizará os Fluent UI React Controls (v9) e o Microsoft Graph Toolkit (v3) para utilizar diferentes componentes da interface de utilizador para simplificar a criação da experiência de utilizador.

Nem todas as operações podem ser executadas pela aplicação React do lado do cliente, uma vez que necessitam de permissões elevadas que só podem ser processadas do lado do servidor.

API do lado do servidor que processa operações privilegiadas mais elevadas

Nem todas as operações de Contentor podem ser executadas diretamente pela aplicação React. Para estes cenários, incluindo criar, eliminar e obter uma lista dos Contentores Incorporados do SharePoint, vamos criar um servidor de API do lado do servidor

Para este projeto, pode utilizar uma aplicação de Funções do Azure ou utilizar uma Aplicação Web do Azure para alojar um projeto ASP.NET API Web. No nosso projeto, vamos utilizar o servidor Restify Node.js simples.

Esta API receberá pedidos do nosso React SPA que incluem o token de acesso do utilizador que receberam quando iniciaram sessão na aplicação. Irá utilizar este token de acesso e o fluxo OBO para obter um token de acesso destinado ao Microsoft Graph que pode utilizar para efetuar operações de Contentor como utilizador.

Criar Contentores Do SharePoint Embedded com o Microsoft Graph

A API do lado do servidor terá de criar Contentores, entre outras tarefas. Isto será efetuado pela API do lado do servidor com o fluxo On-Behalf-Of para obter um token de acesso destinado ao Microsoft Graph.

Esta chamada é iniciada primeiro pelo nosso React SPA que incluirá o token de acesso do utilizador com sessão iniciada atualmente.

O servidor de API criará primeiro uma instância de uma ConfidentialClientApplication com a Biblioteca de Autenticação da Microsoft (MSAL). Para criar o, irá autenticar com o ConfidentialClientApplication Microsoft Entra ID através do ID de cliente e do segredo do cliente da nossa aplicação:

const msalConfig: MSAL.Configuration = {
  auth: {
    clientId: process.env['API_ENTRA_APP_CLIENT_ID']!,
    authority: process.env['API_ENTRA_APP_AUTHORITY']!,
    clientSecret: process.env['API_ENTRA_APP_CLIENT_SECRET']!
  }
};

const confidentialClient = new MSAL.ConfidentialClientApplication(msalConfig);

Em seguida, utilize o ConfidentialClientApplication para obter um token de acesso em nome do utilizador atual ao trocar o token de acesso fornecido a partir do início de sessão do utilizador para obter um token de acesso que possa chamar o Microsoft Graph:

// get user's access token from the request submitted by the React SPA
const [bearer, token] = req.headers.authorization.split(' ');

// set that token to the assertion and the scopes to the permissions we
//    need in the access token to call Microsoft Graph
const graphTokenRequest = {
  oboAssertion: token,
  scopes: [
    Scopes.GRAPH_SITES_READ_ALL,
    Scopes.SPREPOSERVICES_FILESTORAGECONTAINER_SELECTED
  ]
};

// obtain the OBO token using the ConfidentialClientApplication object
const ccaOboResponse = await confidentialClient.acquireTokenOnBehalfOf(graphTokenRequest);
const oboGraphToken = ccaOboResponse!.accessToken;

Agora que tem o token OBO para o Microsoft Graph, crie um fornecedor de autenticação e, em seguida, uma instância do cliente do Microsoft Graph para simplificar as chamadas à API REST do Microsoft Graph:

const authProvider = (callback: MSGraph.AuthProviderCallback) => {
  callback(null, graphTokenRequest);
};

const graphClient = MSGraph.Client.init({
  authProvider: authProvider,
  defaultVersion: 'beta'
});

Por fim, submeta um pedido HTTP POST ao ponto final do https://graph.microsoft.com/{version}/storage/fileStorage/containers Microsoft Graph para criar um novo Contentor:

const containerRequestData = {
  displayName: 'New container name',
  description: 'New container description',
  containerTypeId: process.env["CONTAINER_TYPE_ID"]
};

const graphResponse = await graphClient.api(`storage/fileStorage/containers`)
                                       .post(containerRequestData);

Obter uma lista de Contentores Incorporados do SharePoint com o Microsoft Graph

A outra tarefa comum que irá realizar é obter uma lista de todos os Contentores. Este pedido tem os mesmos requisitos que a criação de um Contentor.

A autenticação e a inicialização de um cliente do Microsoft Graph são idênticas à criação de um Contentor. A única diferença é o pedido que submete ao Microsoft Graph. Neste caso. emitirá um HTTP GET para o mesmo https://graph.microsoft.com/{version}/storage/fileStorage/containers ponto final:

const graphResponse = await graphClient.api(`storage/fileStorage/containers?$filter=containerTypeId eq ${process.env["CONTAINER_TYPE_ID"]}`).get();

Resumo

Nesta secção, aprendeu a aceder aos Contentores Incorporados do SharePoint com as APIs REST do Microsoft Graph.