Access Microsoft Graph API using SFPX with Secured Azure Function

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

  1. Create an Azure AD App

  2. Under API Permissions, Add application permissions for Microsoft Graph API and give admin consent.

  3. Under Expose an API, Add user_impersonation scope.

  4. Under Certificates & secrets, Upload the certificate AccessGraphAPISPFx.cer file created in previous step.

  5. 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.

  1. Create an Azure Key Vault
  2. Import your certificate in an azure key vault
  3. 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

  1. Create an Azure Function

  2. Retrieve certificate from Azure Key Vault via Managed Service Identity

  3. 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.
  4. Here is code which retrieves the certificate from an Azure key vault and then gets Authentication Provider to call Microsoft Graph API

  5. Retrieve certificate from Azure Vault

  6. Get client credential authentication provider based on the certificate using Microsoft.Graph.Auth

  7. 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.

  1. Add the following permissions requests in your package-solution.json
  2. Approve above permission from SharePoint Admin Web Api Permission Management page
  3. Here is how you can get AADHttpClient using SPFx and call Microsoft Graph Api
Author: Ejaz Hussain
Link: https://office365clinic.com/2020/04/10/spfx-secured-azurefunction-integration/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.