Use the MSGraphClient to connect to Microsoft Graph
When building SharePoint Framework solutions, you can easily connect to the Microsoft Graph by using the MSGraphClient.
MSGraphClient overview
MSGraphClient is a new HTTP client introduced in SharePoint Framework v1.6.0 that simplifies connecting to the Microsoft Graph inside SharePoint Framework solutions. MSGraphClient wraps the existing Microsoft Graph JavaScript Client Library, offering developers the same capabilities as when using the client library in other client-side solutions.
While you could use the Microsoft Graph JavaScript Client Library in your solution directly, MSGraphClient handles authenticating against the Microsoft Graph for you, which allows you to focus on building your solution.
Use the MSGraphClient in your solution
Note
The MSGraphClient is available only in projects built using SharePoint Framework v1.6.0 and later. While the MSGraphClient is explained in this article by using a client-side web part, you can also use it in SharePoint Framework Extensions.
Note
The single sign-on for the MSGraphClient is only available in SharePoint Online today. You can leverage the client for on premises developments but your users will be requested to sign in again within the webpart.
- To use the MSGraphClient in your SharePoint Framework solution, add the following
import
clause in your main web part file:
import { MSGraphClient } from '@microsoft/sp-http';
- MSGraphClient is exposed through the MSGraphClientFactory available on the web part context. To get a reference to MSGraphClient, in your code add:
export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
public render(): void {
// ...
this.context.msGraphClientFactory
.getClient()
.then((client: MSGraphClient): void => {
// use MSGraphClient here
});
}
// ...
}
- After you have the reference to the MSGraphClient instance, start communicating with the Microsoft Graph by using its JavaScript Client Library syntax:
export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
public render(): void {
// ...
this.context.msGraphClientFactory
.getClient()
.then((client: MSGraphClient): void => {
// get information about the current user from the Microsoft Graph
client
.api('/me')
.get((error, response: any, rawResponse?: any) => {
// handle the response
});
});
}
// ...
}
Use the Microsoft Graph TypeScript types
When working with the Microsoft Graph and TypeScript, you can use the Microsoft Graph TypeScript types to help you catch errors in your code faster. The Microsoft Graph TypeScript types are provided as a separate package.
- Install the Microsoft Graph TypeScript types:
npm install @microsoft/microsoft-graph-types --save-dev
- After installing the package in your project, import it to your web part file:
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
- Enter the objects retrieved from the Microsoft Graph, for example:
export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
public render(): void {
// ...
this.context.msGraphClientFactory
.getClient()
.then((client: MSGraphClient): void => {
// get information about the current user from the Microsoft Graph
client
.api('/me')
.get((error, user: MicrosoftGraph.User, rawResponse?: any) => {
// handle the response
});
});
}
// ...
}
Available permission scopes
By default, the service principal has no explicit permissions granted to access the Microsoft Graph. However, if you request an access token for the Microsoft Graph, you get a token with the user_impersonation
permission scope that can be used for reading information about the users (that is, User.Read.All
).
Additional permission scopes can be requested by developers and granted by tenant administrators. For more information, see Connect to Azure AD-secured APIs in SharePoint Framework solutions.
See also
Feedback
Loading feedback...