Partager via

Utiliser MSGraphClientV3 pour se connecter à Microsoft Graph

  • Article

Lorsque vous créez des solutions SharePoint Framework, vous pouvez facilement vous connecter à Microsoft Graph à l’aide de MSGraphClientV3.

Présentation de MSGraphClient

MSGraphClientV3 est un nouveau client HTTP introduit dans SharePoint Framework v1.15.0 qui simplifie la connexion à Microsoft Graph dans SharePoint Framework solutions. MSGraphClientV3 encapsule la bibliothèque cliente JavaScript Microsoft Graph v3, offrant aux développeurs les mêmes fonctionnalités que lors de l’utilisation de la bibliothèque cliente dans d’autres solutions côté client.

MSGraphClientV3 remplace MSGraphClient qui a été introduit dans SharePoint Framework v1.6.0. MSGraphClient a encapsulé la bibliothèque cliente JavaScript Microsoft Graph v1.

Bien que vous puissiez utiliser la bibliothèque cliente JavaScript Microsoft Graph directement dans votre solution, MSGraphClientV3 gère l’authentification auprès de Microsoft Graph pour vous, ce qui vous permet de vous concentrer sur la création de votre solution.

Utiliser MSGraphClient dans votre solution

Remarque

MSGraphClientV3 est disponible uniquement dans les projets créés à l’aide de SharePoint Framework v1.15.0 et versions ultérieures. Bien que MSGraphClientV3 soit expliqué dans cet article à l’aide d’un composant WebPart côté client, vous pouvez également l’utiliser dans SharePoint Framework Extensions.

Remarque

L’authentification unique pour MSGraphClientV3 est disponible uniquement dans SharePoint Online aujourd’hui. Vous pouvez tirer parti du client pour des développements locaux, mais vos utilisateurs devront se reconnecter à l’intérieur du composant WebPart.

  1. Pour utiliser MSGraphClientV3 dans votre solution SharePoint Framework, ajoutez la clause suivante import dans votre fichier de composant WebPart principal :

    import { MSGraphClientV3 } from '@microsoft/sp-http';

  2. MSGraphClientV3 est exposé via msGraphClientFactory disponible dans le contexte du composant WebPart. Pour obtenir une référence à MSGraphClient, dans votre code ajoutez :

    export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  public render(): void {
    // ...

    this.context.msGraphClientFactory
      .getClient('3')
      .then((client: MSGraphClientV3): void => {
        // use MSGraphClient here
      });
  }

  // ...
}

  3. Une fois que vous avez la référence à l’instance MSGraphClientV3 , commencez à communiquer avec Microsoft Graph à l’aide de sa syntaxe de bibliothèque cliente JavaScript :

    export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  public render(): void {
    // ...

    this.context.msGraphClientFactory
      .getClient('3')
      .then((client: MSGraphClientV3): void => {
        // get information about the current user from the Microsoft Graph
        client
          .api('/me')
          .get((error, response: any, rawResponse?: any) => {
            // handle the response
        });
      });
  }

  // ...
}

Utiliser les types TypeScript Microsoft Graph

Quand vous utilisez Microsoft Graph et TypeScript, vous pouvez employer les types TypeScript Microsoft Graph pour vous aider à détecter les erreurs de code plus rapidement. Les types TypeScript Microsoft Graph sont fournis séparément dans un autre package.

  1. Installez les types TypeScript Microsoft Graph :

    npm install @microsoft/microsoft-graph-types --save-dev

  2. Après avoir installé le package dans votre projet, importez-le dans votre fichier de composant WebPart :

    import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

  3. Entrez les objets extraits de Microsoft Graph, par exemple :

    export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  public render(): void {
    // ...

    this.context.msGraphClientFactory
      .getClient('3')
      .then((client: MSGraphClientV3): void => {
        // get information about the current user from the Microsoft Graph
        client
          .api('/me')
          .get((error: any, user: MicrosoftGraph.User, rawResponse?: any) => {
            // handle the response
        });
      });
  }

  // ...
}

Étendues d’autorisation disponibles

Par défaut, le principal de service ne dispose d’aucune autorisation explicite permettant d’accéder à Microsoft Graph. Cependant, si vous demandez un jeton d’accès pour Microsoft Graph, vous obtenez un jeton avec l’étendue d’autorisation user_impersonation, qui peut servir à lire des informations sur les utilisateurs (par exemple, User.Read.All).

Les développeurs peuvent demander d’autres étendues d’autorisation, qui sont octroyées par les administrateurs client. Pour en savoir plus, consultez l’article Se connecter aux API sécurisées avec Azure AD dans les solutions SharePoint Framework.

Problèmes connus

Rôles Azure AD avec authentification déléguée

MSGraphClient utilise actuellement le flux d’authentification implicite lors de demandes d’autorisation déléguée à partir de Microsoft Graph. Comme mentionné dans les jetons d’accès de la plateforme d’identités pour les développeurs Microsoft, il est possible que la demande wids ne soit pas présente lors de l’utilisation du flux d’authentification implicite en raison de problèmes de longueur. La demande wids contient la liste des rôles Azure AD à l’échelle du client qui ont été attribués à l’utilisateur délégué.

Par conséquent, les requêtes vers les points de terminaison Microsoft Graph qui reposent sur les rôles Azure AD vers les autorisations déléguées peuvent également échouer, car la demande wids n’est pas présente. Au moment de la rédaction de cet article, sont inclus les points de terminaison suivants :

Voir aussi