Here a step by step easy tutorial to securely call an Azure Function from SharePoint Framework application.
Register an Azure AD app
You can choose to skip this registration and ask to the Azure Function to register an Aad App for you. You can do it only if you want to create the AAD App (and deploy the SPFx app) in the same tenant of Azure Function tenant. Otherwise…
On portal.azure.com go to App registrations and register a new App.
In the tab Authentication, find Implicit grant and enable Access tokens.
In the tab Expose an API click on Add a scope to create a new “user_impersonation” scope. You will request permission to access this scope in your SPFx application.
Create an Azure Function with Azure AD Authorization
Create an Azure Function, find the platform feature of networking Authentication / Authorization and enable it.
Select Azure Active Directory as Authentication Providers.
With Express mode you can create a New AAD App or Select an Existing AD App on your tenant.
You can also choose to manually set the parameters of your already created AAD App (this allow you to configure an AAD App on a different tenant)
You can find parameters on Overview of your AAD App: set the Application ID URI as Allowed Audience and set https://login.microsoftonline.com/{tenantId}as Issuer Url
If AAD App tenant isn’t the same of Azure Function tenant, you have to set the CORs. Find the platform feature of the API and add as Allowed Origins your tenant URI.
Configure your SPFx app to request permission
Open the package-solution.jsonfile and add the property “webApiPermissionRequests” under solution:
"solution": {
"name": "app-name",
"id": " 12345678-1234-1234-1234-123456789012",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"isDomainIsolated": false,
"webApiPermissionRequests": [
{
"resource": "MyAADApp",
"scope": "user_impersonation"
}]
}
Instantiate an aadHttpClient and use it to call Azure Function
Instantiate an aadHttpClient, you have to pass the Application ID URI of your AAD App to your method getClient()
import { AadHttpClient } from '@microsoft/sp-http';
import { AadHttpClient } from '@microsoft/sp-http';
const aadHttpClient = await this.context.aadHttpClientFactory.getClient(appIDURI);
then you can write code to call your Azure Function:
import { IHttpClientOptions, HttpClientResponse, AadHttpClient } from '@microsoft/sp-http';
import { IHttpClientOptions, HttpClientResponse, AadHttpClient } from '@microsoft/sp-http';
const requestHeader: Headers = new Headers();
requestHeader.append('Accept', 'application/json');
const requestOptions: IHttpClientOptions = {
headers: requestHeader
};
const httpResponse: HttpClientResponse = await this.props.aadHttpClient.get(
myAzureFunctionUri,
AadHttpClient.configurations.v1,
requestOptions);
const response = await httpResponse.json();
Approve API request permission
To give your SPFx app the permission to access to your AAD App, you can deploy the .sppkg to your App Catalog, at this time you are notify that your app needs a permission for your scope (user_impersonation).
Go to SharePoint Admin Center, under API Management, you can find a Pending Approval to your API for user_impersonation permission.
Approve it and you finally have a securely call to your Azure Function!
If you go on Azure to App Registration you can find an app called SharePoint Online Client Extensibility Web Application Principal, this is the app created by Microsoft to manage permissions of SPFx apps. Into API permissions, under Other permissions granted, you can find the permission that you accept through the API Management of your SharePoint Admin Portal!
