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.

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

yo @microsoft/sharepoint

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.

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';

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

 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
            console.log(JSON.stringify(response));  

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>
      </div>

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

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

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"  
  }]

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.

Then run gulp bundle –ship command.

Then run gulp package-solution –ship command

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.

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

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.

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.

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

You may like the following SPFx tutorials:

• SPFx Application Customizer Example – An Analog Clock with React
• How to use bootstrap in SPFx webpart
• SPFx – Bind dropdown list from SharePoint list using PnP
• SharePoint framework development training
• Call Azure Function From SharePoint Framework

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