Utilisation

Pour démontrer le fonctionnement de l’API Graph REST de Microsoft, nous allons utiliser un exemple simple de récupération des listes d’un site SharePoint de l’explorateur jusqu’à être en mesure de le récupérer sur une application Sharepoint.

​

Recherche de son API dans l’explorateur

Dans un premier temps, il faut aller sur l’outil de Graph Explorer l’API (https://developer.microsoft.com/en-us/graph/graph-explorer) et rechercher l’API qui correspond au besoin. Ensuite, il faut récupérer le token d’authentification pour pouvoir accéder à l’API. Pour cela, il faut se connecter à l’API avec un compte Microsoft 365 et gérer les autorisation nécessaire à l’usage de l’API.

​

Utiliser une API Graph dans son application SPFX

Maintenant que nous avons trouvé l’API Graph qui nous intéresse, nous allons voir comment l’utiliser dans une application SharePoint Framework (SPFx).

​

Gérer les autorisations de l’application SPFX

Pour utiliser l’API Graph dans une application SPFx, il faut ajouter les autorisations nécessaires dans le fichier package-solution.json de l’application dans l’objet “solution”.

{
    "solution": {
        "name": "",
        "id": "",
        //etc...
        "webApiPermissionRequests": [
            {
                "resource": "Microsoft Graph",
                "scope": "Sites.Read.All"
            },
            {
                "resource": "Microsoft Graph",
                "scope": "Sites.ReadWrite.All"
            },
            {
                "resource": "Microsoft Graph",
                "scope": "Sites.Manage.All"
            }
        ]
    }
}
    

​

Déployer la nouvelle version de l’application

Après avoir ajouté les autorisations nécessaires, il faut déployer la nouvelle version de l’application sur le site SharePoint. Pour cela, il faut exécuter les commandes suivante dans le terminal de l’application :

gulp bundle --ship
gulp package-solution --ship

Il faut ensuite télécharger le fichier .sppkg généré dans le dossier sharepoint/solution et le déployer sur le site SharePoint.

​

Valider les permissions de l’application dans le centre d’administration de SharePoint

Après avoir déployé la nouvelle version de l’application, il faut vérifier que les autorisations nécessaires ont bien été ajoutées dans le centre d’administration de SharePoint et les approuver.

Si des permissions neccessaires ne sont pas approuvées dans “Demandes en attente”, il faut les approuver pour que l’application puisse accéder à l’API Graph.

​

Utiliser l’API Graph dans le code de l’application

Dans le Webpart de l’application, il faut dans la méthode render donner accès à la propriété context pour pouvoir récupérer les informations du site SharePoint, et celui-ci permettra également l’accès à l’API Graph.

public render(): void {
    const element: React.ReactElement<IPolygonZProps> = React.createElement(
      PolygonZ,
      {
        description: this.properties.description,
        isDarkTheme: this._isDarkTheme,
        environmentMessage: this._environmentMessage,
        hasTeamsContext: !!this.context.sdks.microsoftTeams,
        userDisplayName: this.context.pageContext.user.displayName,
        context: this.context
      }
    );
}

Ensuite dans le composant React, il faut utiliser l’API Graph pour récupérer les listes du site SharePoint.

    // Récupérer le contexte
    const { context } = this.props;

    // Récupérer les listes du site
    context.msGraphClientFactory
        .getClient('3')
        .then((client: MSGraphClientV3): void => {
            // get information about the current user from the Microsoft Graph
            client
            .api(`sites/${context.pageContext.site.id}/lists`)
                .get((error: any, response: any) => {
                    if (error) {
                        console.error(error);
                    }
                    console.log(response);
            });
        }
    );

Quand vous exécutez l’application, vous devriez voir les listes du site SharePoint s’afficher dans la console du navigateur.