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

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

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]

Power BI Reports with Map Visualizations For Office 365 SharePoint List Data

Let us look how to integrate and show the Office 365 SharePoint data on to Power BI reports. In this specific use case, we will look how to SharePoint data as map views.

Consider a very basic scenario of showing organization location-wise user count on Power BI dashboards. So in this case, the organization data is available as SharePoint list, and consider only two parameters, that is location and user count.

The below snapshot shows the data loaded onto Power BI. Let us see step by step approach below.

PowerBI Report showing the SharePoint List Data as Locations on Map Visualization

Restrict Permissions on Editing SharePoint SPFx Property Pane Configurations

Let us look, how the SPFx web part property configurations changes can be controlled by user permissions.

Let us assume a scenario, where administrators can only change the SPFx web part property values.

The following steps helps achieving the requirement.

• The permissions of logged in user details could be identified using the context/page context.
• While rendering the property pane configurations, the current user permissions could be checked.
• So the properties could be enabled based on the permissions, i.e., properties will be editable, if user has admin access to the site.

This could be achieved, using the WebpartContext property and SPPermission class.

The object is initialized, using the current user permission details, and then site permission is checked for user.
    let permission = new SPPermission(this.context.pageContext.web.permissions.value);
    let isAdmin = permission.hasPermission(SPPermission.manageWeb);

Using MS Graph API and Adaptive Cards for Search/Render User Details with SPFx solutions

In this article, we will learn how to develop SPFx webparts for Office 365 SharePoint site and Microsoft Team, that leverages Microsoft Graph to search users and adaptive cards for rendering the user data effectively.

The sample used here uses the adaptive card, which has a very minimal UI. The sample used, shows how effectively UI could be changed by users. But complex custom UI could be built using the adaptive cards.

Adaptive Cards:

Let us use the adaptive card on our SPFx component for displaying user details. The following provides you the basic understanding.

• Introduced recently, a new way for developers to render content in a consistent way, which is a open framework. 
• It is providing options for developers, to design the UI for the specific component, using schema or visually.
• https://adaptivecards.io/designer
• Primarily targeted for BOT frameworks, Teams, Cortona, and windows notifications.

The following snapshot showing the UI built for our sample. This snapshot has 2 container sets for displaying 2 user details. In the schema mentioned later in the article, the single container is used, which could iterated using for loops for building containers for the required user set.

Adaptive Card Visual Interface for building component with UI