How to get user details using Microsoft Graph API in SPFx

In this SharePoint Framework tutorial, we will discuss, how to get user profile details using Microsoft graph API in SharePoint Framework (SPFx).

Create SPFx web part to get user details using Graph API

Now, we will see step by step how to develop an SPFx client-side web part to get user details using Graph API.

I hope you have already set up the development environment for SPFx.

Step 1: Create a new project folder on your computer and go to the same directory.

SharePoint spfx graph api
spfx graph api get list items

Step 2: Create a new solution by running the Yeoman SharePoint Framework Generator command:

yo @microsoft/sharepoint
consume in graph api spfx
graph api in spfx

Step 3: Provide the below answer after running this command

When prompted:

  • Accept the default SPSFX Project as your solution name, and then select Enter.
  • Select SharePoint Online only (latest), and then select Enter.
  • Select Use the current folder as the location for the files.
  • Select y to ensure that your web part is automatically deployed tenant-wide when it’s added to the tenant App Catalog.
  • Select N on the question if the solution contains unique permissions.
  • Select WebPart as the client-side component type to be created.

Step 4: The next set of prompts asks for specific information about your web part:

  • Enter connectToMicrosoftGraphApi for the web part name, and then select Enter.
  • Enter connectToMicrosoftGraphApi from SharePoint Framework as the description of the web part, and then select Enter.
  • Accept the default No JavaScipt web framework option for the framework, and then select Enter to continue.

Step 5: Now your solution got successfully created and you can also verify once you open the solution in Visual Studio code.

Look into the below screenshot where the solution was successfully created.

sharepoint framework graph api
spfx graph api

Step 6: Next open the ConnectToMicrosoftGraphApiWebPart.ts file and add the below line of code in top of the file.

import { MSGraphClient } from '@microsoft/sp-http';
how to consume in graph api spfx
spfx get user profile properties

Step 7: Next update the render() method as below to get the profile details of Me using Graph API.

 public render(): void {
      .then((client: MSGraphClient): void => {
        // get information about the current user from the Microsoft Graph
          .get((error, response: any, rawResponse?: any) => {
            // handle the response
consume graph api in sharepoint framework
microsoft graph api javascript example

Step 8: Next add the following code to show the output of this web part.

<p class="${ styles.description }">DisplayName:${response.displayName}</p>
      <p class="${ styles.description }">Email:${response.mail}</p>
      <p class="${ styles.description }">Phone Number:${response.businessPhones[0]}</p>

Step 9: Below are the full code which will look like this

how to consume graph api in sharepoint framework
graph api sharepoint

Step 10: You can show more field based on the below screenshot.

consume graph api in spfx
microsoft graph api sharepoint

Step 11: Set the graph API permission as in below screenshot -> Open the package-solution.json -> update the below code

"webApiPermissionRequests": [{  
      "resource": "Microsoft Graph",  
      "scope": "User.ReadBasic.All"  
spfx graph api
microsoft graph api get users spfx

Step 12: Packaging and deploying your web part to SharePoint Online.

Please follow the below command as per the screenshot.

First, run gulp build command.

spfx graph api sample
This code will help us to Build the code

Then run gulp bundle –ship command.

spfx graph api example
it will help us to generate assets (js, css, etc) for deployment to CDN

Then run gulp package-solution –ship command

sharepoint spfx graph api
This code will help us to prepare a solution package

Step 13: Upload your package to the App Catalog site in SharePoint Online site.

  1. Go to your tenant’s SharePoint App Catalog.
  2. Upload or drag and drop the helloworld-webpart.sppkg to the App Catalog.
spfx graph api permissions

Step 14: Click on the Deploy button to activate this Web part at the site level.

sharepoint framework graph api

Step 15: Approving requested Graph API permissions

  1. Open your SharePoint admin center home menu and click on API management under the Advance left menu option to see the currently pending permission requests. Notice that the request for Mail.Read permission for in Graph API is pending for approval.
sharepoint framework microsoft graph

Note: Sometimes API Access option may be not visible on your home page so you have to upgrade it or activate the new features in Office 365 admin panel.

sharepoint framework microsoft graph api

Step 16: Choose ConnectToMicrosoftGraphAPI from the list and notice how the web part renders the logged-in user details.

spfx graph api example

You may like the following SPFx tutorials:

This is all about how to get user profile information using graph API in SharePoint Framework (SPFx) client side web part.

  • >