Saturday, 25 May 2019

Accessing SharePoint Data with SPFx User Tokens via Service Layers - Part II

Views
We are looking at getting user tokens retrieved from SPFx solutions, and leveraging the tokens on Azure service layers to access the SharePoint data on behalf of user.

So far, we have seen [link]
  • Creating SPFx solution by mapping necessary permissions to the package-solution.json file. 
  • Tuning the code, to get the access code for Microsoft Graph resources.

Here, by end of this reading, you will get to know how to use the token on Azure service to get access to SharePoint data.


Deploy & Approve Permissions:


Open the created SPFx solution and deploy the solution, before even testing the code on workbench. As the component requires permissions for accessing the data on SharePoint, the permissions requested should be approved before accessing. Once the component is deployed, the required permissions will be listed for approval under admin portal’s API management section.

In my case, the admin portal URL for approving necessary permissions will be
https://nakkeerann-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/webApiPermissionManagement

The tenant administrator could log on to the admin portal, and approve necessary permissions. The following snapshot shows the permissions awaiting admin approval.
Admin Screen for Approving Permissions for User to Access Data
Admin Screen for Approving Permissions for User to Access Data

Approve the permissions by clicking on the items listed. This allows users to access the SharePoint data. Until approval, the users will be thrown error with application consent error on the SPFx components. Now, the client side web part is ready for use.

Note: The above step is equivalent to approval of permissions on Azure AD. Previously, this was done by creating an app on Azure AD. Then providing necessary permissions and using the app ID to get access to the data.


Using the Tokens on Azure Services:


Next let us look at leveraging the tokens on Azure services. This is the middleware layer for your application to access & process the SharePoint data.

Assuming the Azure service is accessible with REST endpoints, and token is passed to azure service from SPFx. Now let us look how you could leverage the token on the Azure service to get the SharePoint list items.

As we have acquired the graph API resource token to work with SharePoint list data, we will be using/calling Microsoft Graph API from Azure services to read/write data. For example, the URL for accessing list items from the Office 365 tenants root SharePoint collection using Microsoft Graph API will be https://graph.microsoft.com/v1.0/sites/root/lists/<list-guid>/items

This has to be called from Azure services with access token passed on headers as Authorization parameter. In this case, the NodeJS application template is used on Azure services. To simply the code, the Microsoft Graph endpoints are accessed using third party npm package called ‘request’. So we could directly see how you could call and get the data.

The following snippet shows, how to get the list items using SharePoint user token.

Now you could test the flow. The advantage here is that, we never hardcoded user/client credentials to get access to SharePoint data from azure service.