Tuesday 21 May 2019

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

Let us have a detailed look at using the SharePoint SPFx user tokens, outside the SharePoint environments.

Why is it necessary to use the user tokens? To get to access the SharePoint data from third party services with user context. The scenario is explained below.

Usecase/Scenario: 

SPFx component accessing the SharePoint data via service layers with same user context : Weird scenario? Yes, it is very much needed in some cases like chat bot implementations or in other business processes. Say, You are working on the SharePoint component, and you need to pull data from SharePoint, but via other service like Azure services (See, we are not accessing SharePoint data directly from SharePoint component). In this case, your Azure service needs to authenticate with the SharePoint tenant, on behalf of you. That could be done by passing the oAuth tokens from SPFx to Azure service.

The flow will be as follows.
  • Create SPFx solution and map the necessary permissions on the package file.
  • Develop SPFx code, that communicates with AAD token provider and acquires the user token.
  • Pass the token to service layers like Azure Services. [This is not explained in this post. Based on the requirements, the service layer call could change. For example, if it is endpoint accessible using the endpoint, the normal REST call could be sufficient to get it working]
  • Azure service accesses the SharePoint data using the token available.
  • Azure service responds back to SPFx component with relevant data. [This is not explained in this post]


The detailed implementation is as follows.


Create a SPFx solution & Map necessary permissions:


This solution targets to retrieve the SharePoint list items. This could be done by leveraging Microsoft Graph resources. So the necessary permissions needs to be mapped on to the SPFx solution for enabling admin approvals.

Once the solution is created, navigate to package.json file. Add webApiPermissionsRequest property under solution property. Under this property, provide the necessary permission to be requested for, from Azure AD. As we are working with accessing list items, we are listing Site.ReadWrite.All scope.

As you could see in the snippet, Microsoft Graph resources are used along with necessary scopes to get access to the data. The following snippet shows the necessary permissions.


Acquiring User Access Tokens:


Next, here you could see accessing the access tokens. In the code, get the token using the token provider. To access the Azure AD oAuth token of current logged-in user, sp-http package is used, which leverages aadTokenProviderFactory class to get the necessary token for logged in user. The below snippet shows the way to get the token.


Once token is received, the same could be passed on to azure service.

Note: To test if the token is working fine, you could use the token received on the post man tool to write/read data on SharePoint lists.

In the next post, we could see how to use the token on service layers (Azure services) to access the SharePoint data. [link]