As we know, SPFx runs in the context of logged In user. In a scenario where your application needs to perform some tasks which require more permissions then currently logged In user, you can use this approach to handle those scenarios.
For example, You can configure Azure AD app with elevated Microsoft Graph API permissions and then call Microsoft Graph API from Azure Function.
Here are high-level steps
- Create a self-signed certificate
- Create an Azure AD app and add required Microsoft Graph API permissions
- Create and Configure Azure Key Vault
- Create an Azure Function
- Calling an Azure Function from SPFx
Create a Self-Signed Certificate
There is a PnP PowerShell command New-PnPAzureCertificate which can be used to Generate a new 2048bit self-signed certificate and manifest settings for use in Azure AD App.
👉 Here is a script which can generate a self-signed certificate and manifest settings.
When you run the above script, Following certificate files will be generated.
- GraphAPISPFx.pfx
- GraphAPISPFx.cer
Create and Configure Azure AD App
Create an Azure AD App
Under API Permissions, Add application permissions for Microsoft Graph API and give admin consent.
Under Expose an API, Add user_impersonation scope.
Under Certificates & secrets, Upload the certificate AccessGraphAPISPFx.cer file created in previous step.
Once you uploaded the above certificate and added a new user_impersonation scope, App manifest file will automatically be updated in the background. See below KeyCredentials and user_impersonation sections
Create and Configure Azure Key Vault
We are going to use Azure Key Vault to save our certificate so that we can retrieve this from Azure Function to get authentication provider for calling Microsoft Graph API.
- Create an Azure Key Vault
- Import your certificate in an azure key vault
- The last step is to add access policy for following Azure Function and give appropriate permissions (Get and List permission should be sufficient) to retrieve secrets. This step should perform after you have created an Azure function and enable Managed Service Identity.
Create an Azure Function
Create an Azure Function which is going to retrieve a list of users using Microsoft Graph API. Technically at this stage, you can call any Microsoft Graph API endpoints as long as you have appropriate permissions granted in Azure Ad App. But for simplicity, I am going to just retrieve all users in my organization.
Here are list tasks we are going to perform in Azure Function
Create an Azure Function
Retrieve certificate from Azure Key Vault via Managed Service Identity
We are going to use Microsoft Authentication Library (MSAL) client credential authentication provider using a certificate. There are two different ways to get an authentication provider using Microsoft Authentication Library (MSAL).
- using Microsoft.Identity.Client OR
- using Microsoft.Graph.Auth. Microsoft Graph Auth library provides a wrapper for Microsoft Authentication Library (MSAL). We are going to use this approach here.
Here is code which retrieves the certificate from an Azure key vault and then gets Authentication Provider to call Microsoft Graph API
Retrieve certificate from Azure Vault
Get client credential authentication provider based on the certificate using Microsoft.Graph.Auth
Make sure you have to enable Managed Service Identity for your azure function and added appropriate access policy in Azure Vault as described above
Calling an Azure Function from SPFx
At this point, your Azure Function should be secured by Azure AD and ready to be called from SPFx web part.
- Add the following permissions requests in your package-solution.json
- Approve above permission from SharePoint Admin Web Api Permission Management page
- Here is how you can get AADHttpClient using SPFx and call Microsoft Graph Api