Office 365 – Microsoft Graph – Part 9 – Few important points while consuming Microsoft Graph APIs in SharePoint Framework components

Hi All,

Since in last few articles we are discussing about Graph APIs and CSOM. Now in coming few articles we will discuss about using Graph APIs in SPFX component either in SPFX web part or in SPFX extension.

There is bit difference when we consume Graph APIs in CSOM application and in SPFX component. As we discussed in previous articles when we consume Graph APIs in CSOM application we need Azure Token to authenticate.

When we consume Graph APIs in SPFX component, its bit different. Following are the few points which we need to do while consuming in actual SPFX components

First point – Update solution manifest file for the permissions required to consume the Graph APIs : We need to explicitly declare the permission in manifest file of SPFX component solution. We need to update the package-solution.json file under the config folder of our solution as

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

Fig 1 : Office 365 – SharePoint Online – Consuming Graph APIs in SPFX component

As shown in above code snippet and figure 1 we need to use the ”
webApiPermissionRequests” which is array of ”
webApiPermissionRequests” items. Each ”
webApiPermissionRequests” has

1. Resource: Name of the resource for which we need to configure the permissions. It can ObjectId from the Azure AD. Here, in our case it is “Microsoft Graph“(for Microsoft Graph). Its better to use Name since ObjectId in Azure AD varies based on tenant.   2 . Scope: Scope is the Name of permission or we can also give Unique Id of the permission. Here in above code snippet or in image example is “User.ReadBasic.All” – this means SPFX component can read displayName, mail, and userPrincipalName properties of current user.

Second Point – When we deploy the solution we/admin need to approve these permissions. These permissions can be approved from Admin Center >> Advanced >> API Management. I am writing next article for the same. I’ll publish soon.

Third Point: Finalize the option to access the Microsoft Graph APIs. There are following two options

• Using the AadHTTPClient client object
• Using the MSGraphClient client object

AadHTTPClient is used when we consume the REST APIs. MSGraphClient supports syntax of Micrsoft Graph SDK. Internally it uses AadHTTPClient only. In coming articles we will discuss both the options.

I’ll stop here, in next article we will discuss the simple SPFX web part which will fetch the current user details and show.

Thanks for reading 🙂

Keep reading, share your thoughts, experiences. Feel free to contact us to discuss more. If you have any suggestion / feedback / doubt, you are most welcome.

Stay tuned on Knowledge-Junction, will come up with more such articles