Use Graph API In SPFX To Get User Details Using Email Id

Use Graph API in SPFX to get user details using Email id

Introduction

In this SharePoint Framework tutorial, we will discuss, how to use Microsoft Graph API in SharePoint Framework (SPFx).

Step 1

Create a new solution by running the Yeoman SharePoint Framework Generator command.

yo @microsoft/sharepoint

Provide the below answer after run the above command:

Add Test Solution 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 n to ensure that your web part is not 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.

Enter TestWebpart as the web part name, and then select Enter.

Enter some description from SharePoint Framework as the description of the web part, and then select Enter.

Choose React framework. (You can choose No Javascript Framework also if needed)

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

Step 2

Next open the testWebpart.tsx file and add the below line of code on top of the file.

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

Step 3

Add the below code in package-solution.json file to mention Graph API permission.

"webApiPermissionRequests": [
    {
        "resource": "Microsoft Graph",
        "scope": "User.ReadBasic.All"
    }
]

Step 4

Now we have to deploy the package in App catalog site so that the Graph API permission will be sent for approval to the global administrator, for that the solution needs to be packaged.

To bundle the solution run the below command.

gulp bundle --ship

To package the solution run the below command.

gulp package-solution --ship

Deploy the package in App Catalog site

Step 5

Open your SharePoint admin center home menu and click on API Access under Advance left menu option to see the currently pending requests and choose the respective request and approve the request.

Step 6

Next add the below code in testWebpart.tsx file.

constructor(props) {
    super(props)
    this.state = { displayName: '' }
    this.props.context.msGraphClientFactory
      .getClient()
      .then((client: MSGraphClient): void => {
        client
          .api('/users/{email-id}')
          .get((error, response: any, rawResponse?: any) => {
            console.log(JSON.stringify(response));
            this.setState({
              displayName: response['displayName']
            })
          })
      });
  }
  public render(): React.ReactElement<ITestWebpartProps> {
    return (
      <div>
        <h4>{this.state['displayName']}</h4>
      </div>
    );
  }

Now run the solution by giving the below command.

gulp serve

Click Here to get the source code.

Conclusion

In this blog, we have seen how to use Microsoft Graph API in SharePoint Framework (SPFx).

Leave a command if there's an issue.

Catch you all in a new blog.