Creación de la API REST para controlar las operaciones de lectura y visualización 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 acceder a contenedores de SharePoint Embedded mediante las API REST de Microsoft Graph.

Introducción a nuestra aplicación personalizada y cómo funciona con SharePoint Embedded, SharePoint Online y Microsoft Graph

Los ejercicios siguientes de este módulo le guiarán por los pasos para crear una aplicación web y un servicio web que pueda administrar contenedores incrustados de SharePoint y realizar operaciones CRUD con documentos en estos contenedores.

Echemos un vistazo a los dos componentes de la aplicación que va a compilar y de qué es responsable cada uno.

Aplicación web que implementa la experiencia del usuario

La interfaz de usuario se implementa mediante React para crear una aplicación de página única (SPA). Esta aplicación puede usar Microsoft Graph para leer y escribir contenido y documentos en los contenedores, ya que se trata de operaciones que se pueden realizar mediante la aplicación y los permisos delegados de usuario o aplicación.

La aplicación web usará los controles fluent UI React (v9) y Microsoft Graph Toolkit (v3) para usar distintos componentes de interfaz de usuario que simplifican la creación de la experiencia del usuario.

La aplicación React del lado cliente no puede realizar todas las operaciones porque requieren permisos elevados que solo se pueden controlar en el lado servidor.

API del lado servidor que controla operaciones con privilegios superiores

La aplicación React no puede realizar todas las operaciones de contenedor directamente. Para estos escenarios, incluidos la creación, eliminación y obtención de una lista de los contenedores incrustados de SharePoint, crearemos un servidor de API del lado servidor.

Para este proyecto, puede usar una aplicación de Azure Functions o una aplicación web de Azure para hospedar un proyecto de API web de ASP.NET. En nuestro proyecto, usaremos el servidor restify de Node.js ligero.

Esta API recibirá solicitudes de nuestra SPA de React que incluyen el token de acceso del usuario que recibió cuando inició sesión en la aplicación. Usará este token de acceso y el flujo de OBO para obtener un token de acceso destinado a Microsoft Graph que puede usar para realizar operaciones de contenedor como usuario.

Creación de contenedores incrustados de SharePoint con Microsoft Graph

La API del lado servidor tendrá que crear contenedores, entre otras tareas. Esto lo realizará la API del lado servidor mediante el flujo En nombre de para obtener un token de acceso destinado a Microsoft Graph.

Esta llamada la inicia primero nuestro SPA de React que incluirá el token de acceso del usuario que ha iniciado sesión actualmente.

El servidor de API creará primero una instancia de mediante ConfidentialClientApplication la Biblioteca de autenticación de Microsoft (MSAL). Para crear la autenticación con Microsoft Entra ID mediante el identificador de cliente y el ConfidentialClientApplication secreto de cliente de nuestra aplicación:

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

A continuación, use ConfidentialClientApplication para obtener un token de acceso en nombre del usuario actual intercambiando el token de acceso proporcionado desde el inicio de sesión del usuario por un token de acceso que pueda llamar a 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;

Ahora que tiene el token de OBO para Microsoft Graph, cree un proveedor de autenticación y, a continuación, una instancia del cliente de Microsoft Graph para simplificar las llamadas a la API REST de Microsoft Graph:

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

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

Por último, envíe una solicitud HTTP POST al punto de conexión de https://graph.microsoft.com/{version}/storage/fileStorage/containers Microsoft Graph para crear un nuevo contenedor:

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

Obtención de una lista de contenedores incrustados de SharePoint con Microsoft Graph

La otra tarea común que realizará es obtener una lista de todos los contenedores. Esta solicitud tiene los mismos requisitos que la creación de un contenedor.

La autenticación e inicialización de un cliente de Microsoft Graph es idéntica a la de la creación de un contenedor. La única diferencia es la solicitud que envía a Microsoft Graph. En este caso. emitirá un HTTP GET en el mismo https://graph.microsoft.com/{version}/storage/fileStorage/containers punto de conexión:

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

Resumen

En esta sección, ha aprendido a acceder a contenedores de SharePoint Embedded mediante las API REST de Microsoft Graph.