You do not have permission to view this directory or page. 401

Question

You do not have permission to view this directory or page. 401 create azure function app and secured with azure AD, trying to call it from spfx webpart but gettingerror

Answer 1

There's an authentication or authorization issue when your SPFx (SharePoint Framework) web part tries to call an Azure Function secured with Azure Active Directory (Azure AD). Let's go through the process step-by-step to set up and secure your Azure Function App with Azure AD and ensure that your SPFx web part can access it correctly.

Step 1: Secure Azure Function App with Azure AD

To secure your Azure Function App with Azure AD, you need to set up Authentication/Authorization properly:

Configure Azure AD App Registration:

Go to the Azure portal.

Navigate to Azure Active Directory → App registrations → New registration.

Register your application. Note down the Application (client) ID and Directory (tenant) ID.

Configure Authentication for Azure Function:

Navigate to your Function App in the Azure portal.

Go to Authentication under the Settings menu.

Add an identity provider.

Choose "Microsoft" and set up with the App registration you created.

Ensure the 'ID tokens' option is selected.

Grant Permissions:

In App registrations, find your app.

Under API permissions, add necessary permissions your Function App might need.

Expose an API (if necessary):

In App registrations, under the Expose an API section, set the Application ID URI.

Add a scope if your Function App needs to be accessed by other apps.

Step 2: Update Function App Code

Ensure your Azure Function is expecting the correct type of authentication token. This typically involves validating the JWT token that Azure AD provides:

[FunctionName("Function1")]

public static async Task<IActionResult> Run(

[HttpTrigger(AuthorizationLevel.Function, "get", "post", Route = null)] HttpRequest req,

ILogger log)

{

log.LogInformation("C# HTTP trigger function processed a request.");

string name = req.Query["name"];

return name != null

    ? (ActionResult)new OkObjectResult($"Hello, {name}")

    : new BadRequestObjectResult("Please pass a name on the query string or in the request body");

}

Step 3: Configure SPFx Web Part to Use Azure AD Authentication

For your SPFx web part to successfully authenticate and call the Azure Function:

Register SPFx Solution with Azure AD:

Similar to the Azure Function, register your SPFx solution in Azure AD if not already registered.

Configure API Permissions in SharePoint Online:

Go to the SharePoint admin center.

Under Advanced, go to API access.

Add permission requests for the Azure AD app that your Azure Function uses.

Modify SPFx Web Part to Acquire Token and Call Azure Function:

Here’s a basic example using AadHttpClient:

import { AadHttpClient, HttpClientResponse } from '@microsoft/sp-http';

private callAzureFunction(): Promise<any> {

return this.context.aadHttpClientFactory

.getClient('<Azure-AD-App-Client-ID>')

.then((client: AadHttpClient): Promise<HttpClientResponse> => {

  return client.get('<Azure-Function-URL>', AadHttpClient.configurations.v1);

})

.then((response: HttpClientResponse): Promise<any> => {

  return response.json();

})

.then((response: any): void => {

  console.log(response);

})

.catch((error: any) => {

  console.error(error);

});

}

Debugging and Troubleshooting:

Ensure Tokens are Being Sent: Verify that the SPFx web part is correctly acquiring and sending the token in the HTTP request header.

Check App Permissions: Confirm that all permissions and scopes are approved in Azure AD and SharePoint.

Inspect API Response: Use tools like Postman or Fiddler to simulate the SPFx calls and see more detailed error messages if any.

By carefully setting up both the Azure Function and SPFx web part with the correct Azure AD configurations, your integration should work without encountering 401 errors.