Créer une API REST pour gérer les opérations de lecture et d’affichage avec SharePoint Embedded

5 minutes

Les applications SharePoint Embedded, comme la plupart des applications qui interagissent avec les systèmes de stockage principaux et les bases de données, effectuent deux types d’opérations : lecture/récupération de données et de fichiers, et stockage ou suppression de fichiers. Dans cette section, vous allez apprendre à accéder aux conteneurs SharePoint Embedded à l’aide des API REST Microsoft Graph.

Vue d’ensemble de notre application personnalisée et de son fonctionnement avec SharePoint Embedded, SharePoint Online et Microsoft Graph

Les exercices suivants de ce module vous guident tout au long des étapes de création d’une application web et d’un service web pouvant gérer des conteneurs SharePoint Embedded et effectuer des opérations CRUD avec des documents sur ces conteneurs.

Examinons les deux composants de l’application que vous allez générer et ce dont chacun est responsable.

Application web qui implémente l’expérience utilisateur

L’interface utilisateur est implémentée à l’aide de React pour créer une application monopage (SPA). Cette application peut utiliser Microsoft Graph pour lire et écrire du contenu et des documents dans les conteneurs, car il s’agit d’opérations qui peuvent être effectuées à l’aide d’autorisations app+utilisateur ou déléguées.

L’application web utilisera les contrôles React de l’interface utilisateur Fluent (v9) et le kit de ressources Microsoft Graph (v3) pour utiliser différents composants de l’interface utilisateur pour simplifier la création de l’expérience utilisateur.

Toutes les opérations ne peuvent pas être effectuées par l’application React côté client, car elles nécessitent des autorisations élevées qui ne peuvent être gérées que côté serveur.

API côté serveur qui gère des opérations à privilèges plus élevés

Toutes les opérations de conteneur ne peuvent pas être effectuées directement par l’application React. Pour ces scénarios, notamment la création, la suppression et l’obtention d’une liste des conteneurs Incorporés SharePoint, nous allons créer un serveur d’API côté serveur

Pour ce projet, vous pouvez utiliser une application Azure Functions ou une application web Azure pour héberger un projet d’API web ASP.NET. Dans notre projet, nous allons utiliser le serveur Restify Node.js léger.

Cette API reçoit des demandes de notre spa React qui incluent le jeton d’accès de l’utilisateur qu’il a reçu lorsqu’il s’est connecté à l’application. Vous allez utiliser ce jeton d’accès et le flux OBO pour obtenir un jeton d’accès destiné à Microsoft Graph que vous pouvez utiliser pour effectuer des opérations de conteneur en tant qu’utilisateur.

Création de conteneurs SharePoint Embedded avec Microsoft Graph

L’API côté serveur doit créer des conteneurs, entre autres tâches. Cette opération est effectuée par l’API côté serveur à l’aide du flux On-Behalf-Of pour obtenir un jeton d’accès destiné à Microsoft Graph.

Cet appel est d’abord lancé par notre spa React qui inclut le jeton d’accès de l’utilisateur actuellement connecté.

Le serveur d’API crée d’abord une instance d’un ConfidentialClientApplication à l’aide de la bibliothèque d’authentification Microsoft (MSAL). Pour créer le ConfidentialClientApplication , vous allez vous authentifier avec l’ID Microsoft Entra à l’aide de l’ID client et de la clé secrète client de notre application :

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

Ensuite, utilisez pour ConfidentialClientApplication obtenir un jeton d’accès au nom de l’utilisateur actuel en échangeant le jeton d’accès fourni à partir de la connexion de l’utilisateur contre un jeton d’accès qui peut appeler 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;

Maintenant que vous disposez du jeton OBO pour Microsoft Graph, créez un fournisseur d’authentification, puis une instance du client Microsoft Graph pour simplifier les appels à l’API REST de Microsoft Graph :

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

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

Enfin, envoyez une requête HTTP POST au point de terminaison de https://graph.microsoft.com/{version}/storage/fileStorage/containers Microsoft Graph pour créer un conteneur :

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

Obtention d’une liste de conteneurs SharePoint Embedded avec Microsoft Graph

L’autre tâche courante que vous allez effectuer consiste à obtenir la liste de tous les conteneurs. Cette demande a les mêmes exigences que la création d’un conteneur.

L’authentification et l’initialisation d’un client Microsoft Graph sont identiques à celles de la création d’un conteneur. La seule différence est la demande que vous envoyez à Microsoft Graph. Dans ce cas. Vous allez émettre un HTTP GET sur le même https://graph.microsoft.com/{version}/storage/fileStorage/containers point de terminaison :

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

Résumé

Dans cette section, vous avez appris à accéder aux conteneurs SharePoint Embedded à l’aide des API REST Microsoft Graph.

Continuer