API Microsoft Graph dans SharePoint

API Microsoft Graph dans SharePoint SPFX nous permet de récupérer les données d’O365. Pour vous connecter aux données de millions de personnes dans le cloud Microsoft, utilisez l’API Microsoft Graph. Créez des applications pour les entreprises et les personnes qui se connectent à une pléthore de données, de relations et de connaissances via un point de terminaison unique à l’aide de Microsoft Graph.

Étape 1 : Créez un projet SharePoint SPFX à l’aide de NoJavaScript Framework.

1. Ouvrez l’invite de commande (cmd) et accédez au répertoire dans lequel vous souhaitez créer un projet.
2. Créer un nouveau dossier: – md MSGraphAPIDemo
3. Accédez à ce dossier : – cd MSGraphAPIDemo

Étape 2 : Créer une nouvelle solution avec Yeoman commande du générateur d’utilitaires.

Vous pouvez facilement créer un projet de solution côté client SharePoint avec la chaîne d’outils et la structure de projet appropriées à l’aide du générateur SharePoint Online SPFx Yeoman.

yo @microsoft/sharepoint

Étape 3 : Une fois la commande ci-dessus exécutée avec succès, fournissez la réponse ci-dessous pour créer une nouvelle solution SharePoint.

Let's create a new SharePoint solution.

? What is your solution name? ms-graph-api-demo

? Which type of client-side component to create? WebPart

Add new Web part to solution ms-graph-api-demo.

? What is your Web part name? MSGraphAPIWebPart

? Which template would you like to use? No framework

Remarque : Pour accepter les valeurs par défaut, appuyez sur la touche Entrée.

Après avoir donné toutes les valeurs requises, l’installation de NPM s’exécutera.

Il faudra un certain temps à Npm pour obtenir toutes les dépendances nécessaires au projet.

Le diagramme ci-dessous montre jusqu’à présent ce que nous avons fait.

Après l’installation de npm, vous recevrez le message de félicitations.

Étape 4:

La commande répertoriée ci-dessous doit être utilisée pour installer les types de Graphique Microsoft. Utilisez la même solution pour exécuter cette commande.

Commande: – npm install @microsoft/microsoft-graph-types –save-dev

Pour ouvrir le projet en code VS entrez : code .

Étape 5 :

La structure du fichier dans le code VS ressemblera à ceci. Nous travaillerons principalement sur MsGraphApiWebPartWebPart.ts

Étape 6 :

Ouvrez le fichier MsGraphApiWebPartWebPart.ts

Importez les modules respectifs pour l’API MS Graph. Pour importer, ajoutez la ligne de code ci-dessous dans votre fichier

import {MSGraphClient} from '@microsoft/sp-http'
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types'

Supprimez toutes les choses de la méthode de rendu et ne conservez que la balise div.

ajouter ci-dessous la ligne de code.

public render(): void {

    this.context.msGraphClientFactory

      .getClient()

      .then((msgraphclient: MSGraphClient): void => {

        // To fetch the current user info from the Microsoft Graph api

        msgraphclient

          .api("/me")

          .get((error, user: MicrosoftGraph.User, rawResponse?: any) => {

            // To handle the response

            console.log(JSON.stringify(user));

            this.domElement.innerHTML = `

   

      <div>

        <p>Display Name:${user.displayName} </p>

       <p>Given Name:${user.givenName} </p>

       <p>Surname Name:${user.surname} </p>

       <p>Email ID:${user.mail} </p>

       <p>Mobile Phone:${user.mobilePhone} </p>

      </div>`;

          });

      });

  }

Étape 7 :

Définissez les autorisations de l’API Graph. Allez dans le dossier de configuration.

Ouvrez le fichier Package-solution.json et ajoutez la ligne de code ci-dessous :

"webApiPermissionRequests": [

      {

        "resource": "Microsoft Graph",

        "scope": "User.ReadBasic.All"

      }

    ],

Étape 8 :

Avant de déployer un composant WebPart dans le catalogue d’applications, assurez-vous que le code est sans erreur.

Ensuite, ouvrez le terminal et exécutez la commande suivante.

1. paquet de gorgée – navire
2. gulp package-solution –ship

Après avoir exécuté les deux commandes ci-dessus, un dossier SharePoint sera créé et ce dossier contient le fichier .sppkg.

Étape 9 :

Accédez au centre d’administration SharePoint -> Cliquez sur plus de fonctionnalités -> cliquez sur « Ouvrir » dans la section Applications.

Cliquez sur télécharger. Accédez à l’emplacement du projet -> dossier SharePoint -> dossier de la solution -> sélectionnez le fichier .sppkg.

Conservez les paramètres par défaut -> sélectionnez Activer l’application

Aller à la page d’accès à l’API

Cliquez sur Demandes en attente-> À l’échelle de l’organisation-> sélectionnez la demande-> Cliquez pour approuver

La boîte de dialogue ci-dessous s’ouvrira après avoir cliqué sur le bouton d’approbation. Cliquez à nouveau sur « Approuver ».

Étape 10 :

Votre composant WebPart est maintenant prêt à être utilisé. Revenez à SharePoint Online.

Sélectionnez votre site SharePoint et cliquez sur Modifier.

Cliquez ensuite sur l’icône « Ajouter un nouveau composant WebPart » (+). Sélectionnez le composant WebPart en cliquant sur son nom.

Comme vous pouvez le voir ci-dessous, nous avons réussi à récupérer les informations utilisateur à l’aide de GraphApi.

Veuillez suivre le lien ci-dessous pour explorer le MSGraphAPI

Explorateur de graphiques | Essayez les API Microsoft Graph – Microsoft Graph

Le code complet se trouve ci-dessous.

MsGraphApiWebPartWebPartfile

Package-solution_json_file