Post
Ask Question

SharePoint Framework - Call Azure AD Secured Function

Overview

Azure functions are helpful to perform processing outside of SharePoint. In the previous article, Secure Azure Function with Azure AD, we had explored an option to secure Azure Function with Azure AD.
 
In this article, we will explore how to call a secured Azure function in Azure AD from SharePoint Framework Webpart.
 
Develop SharePoint Framework Web Part
 
Open the command prompt. Create a directory for SPFx solution.
  1. md spfx-call-secure-azure-function  
Navigate to the above-created directory.
  1. cd spfx-call-secure-azure-function  
Run Yeoman SharePoint Generator to create the solution.
  1. yo @microsoft/sharepoint  
Yeoman generator will present you with the wizard by asking questions about the solution to be created.

SharePoint Framework - Call Azure AD Secured Function
 
Solution Name: Hit Enter to have a default name (spfx-call-secure-azure-function in this case) or type in any other name for your solution.
 
Selected choice: Hit Enter
 
Target for component: Here, we can select the target environment where we are planning to deploy the client webpart, i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).
 
Selected choice: SharePoint Online only (latest)
 
Place of files: We may choose to use the same folder or create a subfolder for our solution.
 
Selected choice: Same folder
 
Deployment option: Selecting Y will allow the app to be deployed instantly to all sites and will be accessible everywhere.
 
Selected choice: N (install on each site explicitly)
 
Type of client-side component to create: We can choose to create client-side webpart or an extension. Choose the webpart option.
 
Selected choice: WebPart
 
Web part name: Hit enter to select the default name or type in any other name.
 
Selected choice: SecureAzureFunctionCallerWebPart
 
Web part description: Hit enter to select the default description or type in any other value.
 
Selected choice: Call Secure Azure Function from SPFx
 
Framework to use: Select any JavaScript framework to develop the component. Available choices are No JavaScript Framework, React, and Knockout.
 
Selected choice: No JavaScript Framework
 
Yeoman generator will perform scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.
 
Once the scaffolding process is completed, lock down the version of project dependencies by running the below command.
  1. npm shrinkwrap  
In the command prompt, type the below command to open the solution in code editor of your choice.
  1. code .  
Set Permissions to SPFx WebPart
 
We will need to set permissions on SPFx webpart so that it can access the resources using an Azure function.
  1. Open config/package-solution.json file.
  2. Add webApiPermissionRequests property.
  1. {  
  2.   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",  
  3.   "solution": {  
  4.     "name": "spfx-call-secure-azure-function-client-side-solution",  
  5.     "id": "54da8bb1-cbe1-45b9-9b89-18ddd60f4b6f",  
  6.     "version": "1.0.0.0",  
  7.     "includeClientSideAssets": true,  
  8.     "isDomainIsolated": false,  
  9.     "webApiPermissionRequests": [  
  10.       {  
  11.         "resource": "Secure API for SPFx",  
  12.         "scope": "user_impersonation"  
  13.       },  
  14.       {  
  15.         "resource": "Windows Azure Active Directory",  
  16.         "scope": "User.Read"  
  17.       }  
  18.     ]  
  19.   },  
  20.   "paths": {  
  21.     "zippedPackage": "solution/spfx-call-secure-azure-function.sppkg"  
  22.   }  
  23. }  
In the above config file,
  • Specify name of Azure AD App registration as resource.
  • Specify scope as user_impersonation, since we will make a call on behalf of current user.

Code the webpart

Open SecureAzureFunctionCallerWebPartWebPart.ts under \src\webparts\secureAzureFunctionCallerWebPart\” folder.
 
Add the below imports,
  1. import { AadHttpClient, HttpClientResponse } from '@microsoft/sp-http';  
Update render() method as below.
  1. public render(): void {  
  2.     this.domElement.innerHTML = `  
  3.       <div class="${ styles.secureAzureFunctionCallerWebPart }">  
  4.         <div class="${ styles.container }">  
  5.           <div class="${ styles.row }">  
  6.             <div class="${ styles.column }">  
  7.               <span class="${ styles.title }">Welcome to SharePoint!</span>  
  8.               <p class="${ styles.subTitle }">Current user claims from Azure function</p>  
  9.             </div>  
  10.           </div>  
  11.         </div>  
  12.       </div>  
  13.       <div class="${styles.tableContainer}">  
  14.             <table class='claimsTable'>  
  15.             </table>  
  16.       </div>  
  17.       `;  
  18.   
  19.     this.context.aadHttpClientFactory  
  20.       .getClient('https://tenant.onmicrosoft.com/cf981eac-50dc-4221-8882-515a4d31328d')  
  21.         .then((client: AadHttpClient): void => {  
  22.           client  
  23.             .get('https://spfxsecurecaller.azurewebsites.net/api/UserInformation', AadHttpClient.configurations.v1)  
  24.             .then((response: HttpClientResponse): Promise<JSON> => {  
  25.               return response.json();  
  26.             })  
  27.             .then((responseJSON: JSON): void => {  
  28.               // Render JSON in table  
  29.               var claimsTable = this.domElement.getElementsByClassName("claimsTable")[0];  
  30.   
  31.               for (var key in responseJSON) {  
  32.                 var trElement = document.createElement("tr");  
  33.                 trElement.innerHTML = `<td class="${styles.tableCell}">${key}</td><td class="${styles.tableCell}">${responseJSON[key]}</td>`;  
  34.                 claimsTable.appendChild(trElement);  
  35.               }  
  36.             });  
  37.         });  
  38.   }  
Package the solution
 
Run the below command to build the solution.
  1. gulp build  
Run the below command to minify the required assets.
  1. gulp bundle  
Run the below command to create the solution package (sppkg) in sharepoint\solution folder.
  1. gulp package-solution  
Start local debugging by running the below command.
  1. gulp serve --nobrowser  
Upload the .sppkg file from the sharepoint/solution folder to the App Catalog.
 
Grant Permission Test the WebPart
  1. Open SharePoint Admin Center (https://[tenant]-admin.sharepoint.com)
  2. Click “Try it now”

    SharePoint Framework - Call Azure AD Secured Function

  3. From left navigation, click “API Management”.

    SharePoint Framework - Call Azure AD Secured Function

  4. Select the pending approvals one by one.
  5. From the top, click “Approve or reject”.
  6. Click Approve.
Manage permissions with PowerShell
 
We can also use SharePoint Online Management Shell to manage permission requests in SharePoint online.
 
Type the below command to connect to SharePoint Online. Enter the credentials when prompted.
  1. Connect-SPOService -Url “https://[tenant]-admin.sharepoint.com”  
Use the below command to view all pending permission requests.
  1. Get-SPOTenantServicePrincipalPermissionRequests  
Use the below command to approve the specific permission request.
  1. Approve-SPOTenantServicePrincipalPermissionRequest -RequestId <Guid>  

Summary

Secured Azure function with Azure AD can be called from SharePoint Framework webpart. It needs to set up the permission request in order to access the required resources.


Similar Articles