Créer un composant WebPart SharePoint avec la Boîte à outils Microsoft Graph

  • Article
  • 5 minutes de lecture

Cette rubrique aborde l’utilisation de composants de la Boîte à outils Microsoft Graph dans un composant WebPart SharePoint côté client. La prise en main comporte les étapes suivantes :

  1. Configurez votre environnement de développement et créez un composant WebPart.
  2. Ajoutez le package SharePoint Framework pour le Kit de ressources Microsoft Graph.
  3. Ajoutez le fournisseur SharePoint.
  4. Ajoutez des composants.
  5. Configurez les autorisations.
  6. Déployez le package SharePoint Framework pour le Kit de ressources Microsoft Graph.
  7. Créez et déployez votre composant WebPart.
  8. Testez votre le composant WebPart.

Configuration de votre environnement de développement SharePoint Framework et création d’un composant WebPart

Suivez la procédure pour la Configuration de votre environnement de développement SharePoint Framework, puis la création d’un composant WebPart.

Ajouter le package SharePoint Framework pour le Kit de ressources Microsoft Graph

Pour empêcher plusieurs composants SharePoint Framework d’inscrire leur propre jeu de composants du Kit de ressources Microsoft Graph sur cette page, vous devez déployer le package SharePoint Framework pour le Kit de ressources Microsoft Graph vers votre client et référencer les composants du Kit de ressources Microsoft Graph que vous utilisez dans votre solution à partir de ce package.

Le package SharePoint Framework pour le Kit de ressources Microsoft Graph contient une bibliothèque SharePoint Framework qui inscrit une seule instance des composants du Kit de ressources Microsoft Graph dans SharePoint.

Installez le package npm SharePoint Framework du Kit de ressources Microsoft Graph à l’aide de la commande suivante :

npm install @microsoft/mgt-spfx

Ajouter le fournisseur SharePoint

Les fournisseurs de la Boîte à outils Microsoft Graph activent l’authentification et l’accès à Microsoft Graph pour les composants. Pour en savoir plus, consultez Utilisation des fournisseurs. Les composant WebPart SharePoint existent toujours dans un contexte authentifié, car l’utilisateur s’est déjà connecté pour accéder à la page qui héberge votre composant WebPart. Utilisez ce contexte pour initialiser le fournisseur SharePoint.

Premièrement, ajoutez le fournisseur à votre composant WebPart. Localisez le fichier src\webparts\<your-project>\<your-web-part>.ts dans le dossier de votre projet, puis ajoutez la ligne suivante dans la partie supérieure de votre fichier, juste en-dessous des instructions import existantes :

import { Providers, SharePointProvider } from '@microsoft/mgt-spfx';

Ensuite, vous devez initialiser le fournisseur avec le contexte authentifié dans la méthode onInit() de votre composant WebPart. Dans le même fichier, ajoutez le code suivant juste avant la ligne public render(): void { :

protected async onInit() {
  if (!Providers.globalProvider) {
    Providers.globalProvider = new SharePointProvider(this.context);
  }
}

Ajouter des composants

Vous pouvez maintenant commencer l’ajout de composants à votre composant WebPart. Ajoutez simplement les composants au HTML dans la méthode render() pour que les composants utilisent le contexte SharePoint pour accéder à Microsoft Graph. Par exemple, pour ajouter le composant Personne, votre code ressemble à :

public render(): void {
    this.domElement.innerHTML = `
      <mgt-person person-query="me" view="twolines"></mgt-person>
    `;
}

Remarque

Si vous créez un composant WebPart en utilisant React, voir les documents @microsoft/mgt-spfx pour savoir comment utiliser @microsoft/mgt-react.

Configuration des autorisations

Pour appeler Microsoft Graph à partir de votre application SharePoint Framework, vous devez demander les autorisations nécessaires dans le package de votre solution et un administrateur client Microsoft 365 doit approuver les autorisations demandées.

Pour ajouter les autorisations au package de votre solution, localisez et ouvrez le fichier config\package-solution.json, puis définissez :

"isDomainIsolated": false,

Juste en-dessous de cette ligne, ajoutez ce qui suit :

"webApiPermissionRequests":[],

Déterminez les autorisations d’API Microsoft Graph dont vous avez besoin en fonction des composants que vous utilisez. La page de documentation de chaque composant fournit une liste des autorisations exigées par le composant. Vous devez ajouter chaque autorisation requise à webApiPermissionRequests. Par exemple, si vous utilisez le composant Personne et le composant Agenda, il est possible que votre webApiPermissionRequests ressemble à :

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "User.Read"
  },
  {
    "resource": "Microsoft Graph",
    "scope": "Calendars.Read"
  }
]

Déployer le package SharePoint Framework pour le Kit de ressources Microsoft Graph

Avant de déployer votre package SharePoint Framework vers votre client, vous devez déployer le package SharePoint Framework pour le Kit de ressources Microsoft Graph vers votre client. Vous pouvez télécharger le package correspondant à la version du Kit de ressources Microsoft Graph utilisée dans votre projet à partir de la section Versions sur GitHub.

Importante

Étant donné que vous ne pouvez installer qu’une seule version de la bibliothèque SharePoint Framework pour le Kit de ressources Microsoft Graph dans un client, déterminez si votre organisation ou client dispose déjà d’une version de la bibliothèque SharePoint Framework déployée et utilisez la même version avant d’utiliser le Kit de ressources Microsoft Graph dans votre solution.

Après le téléchargement du package .sppkg SharePoint Framework pour le Kit de ressources Microsoft Graph, chargez-le vers votre catalogue d’applications SharePoint Online. Accédez à la Page fonctionnalités supplémentaires de votre Centre d’administrateur SharePoint. Sélectionnez Ouvrir sous Applications, puis cliquez sur Catalogue d’applications et Distribuer des applications pour SharePoint. Chargez votre fichier .sppkg, puis cliquez sur Déployer.

Créer et déployer votre composant WebPart

Vous allez maintenant créer votre application et la déployer dans SharePoint. Créez votre application en exécutant les commandes suivantes :

gulp build
gulp bundle
gulp package-solution

Un nouveau fichier .sppkg existe dans le dossier sharepoint/solution. Vous devez charger ce fichier dans votre Catalogue d’applications SharePoint Online. Accédez à la Page fonctionnalités supplémentaires de votre Centre d’administrateur SharePoint. Sélectionnez Ouvrir sous Applications, puis cliquez sur Catalogue d’applications et Distribuer des applications pour SharePoint. Chargez votre fichier .sppkg, puis cliquez sur Déployer.

Vous devez ensuite approuver les autorisations en tant qu’administrateur.

Accédez à votre Centre d’administration SharePoint. Dans la navigation de gauche, sélectionnez Avancé, puis Accès d’API. Vous devez voir les demandes en attente pour chacune des autorisations que vous avez ajoutées dans votre fichier config\package-solution.json. Sélectionnez et approuvez chaque autorisation.

Tester votre composant WebPart

Vous êtes désormais prêt à ajouter votre composant WebPart à une page SharePoint et à le tester. Vous devez utiliser le workbench hébergé pour tester les composants WebPart qui utilisent la Boîte à outils Microsoft Graph, car les composants ont besoin du contexte authentifié pour appeler Microsoft Graph. Vous trouverez votre workbench hébergé à l’adresse https://< YOUR_TENANT.sharepoint.com/_layouts/15/workbench.aspx>.

Ouvrez le config\serve.json fichier dans votre projet et remplacez la valeur de initialPage par l’URL de votre workbench hébergé :

"initialPage": "https://<YOUR_TENANT>.sharepoint.com/_layouts/15/workbench.aspx",

Enregistrez le fichier, puis exécutez la commande suivante dans la console pour générer et afficher un aperçu de votre composant WebPart :

gulp serve

Votre workbench hébergé s’ouvrira automatiquement dans votre navigateur. Ajoutez votre composant WebPart à la page. Vous devez voir votre composant WebPart avec les composants de la Boîte à outils Microsoft Graph en action ! Tant que la commande gulp serve s’exécute dans votre console, vous pouvez continuer à modifier votre code, puis simplement actualiser votre navigateur pour afficher les modifications.

Étapes suivantes