Post
Ask Question

Building a Secure .NET Core Web API for Azure AD Integration with SharePoint Online SPFx

Introduction

In today's interconnected digital world, organizations often require seamless integration between various services to deliver powerful and secure web applications. When working with SharePoint Online and SharePoint Framework (SPFx) web parts, it becomes crucial to integrate them securely with other services like a .NET Core Web API. Microsoft's Azure Active Directory (Azure AD) offers a robust identity and access management solution that ensures smooth authentication and authorization between your Web API and SharePoint Online SPFx web parts. In this blog, we will walk you through the step-by-step process of creating a secure .NET Core Web API integrated with Azure AD for seamless collaboration with SharePoint Online SPFx.

Step 1. Register the Web API Application in Azure AD

To begin, head to the Azure portal and log in using your Azure AD credentials. Once logged in, navigate to "Azure Active Directory" and click on "App registrations." Here, you can register a new application by selecting "New registration".

Choose a descriptive name for your Web API application, select the appropriate account types, and specify a redirect URI for authentication. During development, a common redirect URI is 'https://localhost:5001/signin-oidc'. After registration, make sure to take note of the "Application (client) ID" and "Directory (tenant) ID" for future use.

Step 2. Grant API Permissions to SharePoint Online

With your Web API registered in Azure AD, proceed to grant API permissions to SharePoint Online. In the Azure portal, navigate to "API permissions" under your Web API application and click on "Add permission". Select "Microsoft Graph" and choose the necessary delegated or application permissions for accessing SharePoint Online data. Save the changes by clicking "Add permissions."

Step 3. Configure the .NET Core Web API

Next, create a new .NET Core Web API project using your preferred development environment. Once the project is set up, install the required NuGet packages: "Microsoft.Identity.Web" and "Microsoft.Identity.Web.MicrosoftGraph". These packages enable seamless Azure AD authentication integration.

In the "Startup.cs" file, add the following using statements to configure Azure AD authentication:

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.Identity.Web;

In the "ConfigureServices" method of "Startup.cs", configure Azure AD authentication using the following code:

services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(options =>
    {
        Configuration.Bind("AzureAd", options);
        options.TokenValidationParameters.NameClaimType = "name";
    }, options => { Configuration.Bind("AzureAd", options); });

Create an Azure AD configuration section in your "appsettings.json" file:

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "your-tenant-name.onmicrosoft.com",
    "ClientId": "your-client-id",
    "TenantId": "your-directory-id",
    "ClientSecret": "your-client-secret"
  }
}

Replace "your-client-id", "your-directory-id", and "your-client-secret" with the values obtained during the Azure AD registration.

Step 4. Securing the Web API Controllers

With Azure AD configured for your Web API, secure your controllers using the "[Authorize]" attribute. This ensures that only authenticated users can access the endpoints:

[ApiController]
[Route("api/[controller]")]
[Authorize]
public class MyController : ControllerBase
{
    // Your controller actions here
}

Step 5. Consume the Web API in SharePoint Online SPFx

In your SharePoint Framework (SPFx) project, use the "aadHttpClient" to securely call your Web API. Grant the necessary API permissions to the SPFx web part in the Azure AD App registration.

Obtain an access token for your Web API using the "aadTokenProviderFactory" in your SPFx web part:

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

const webApiEndpoint = '<your-web-api-endpoint>';

this.context.aadHttpClientFactory
  .getClient('<your-web-api-client-id>')
  .then((client: AadHttpClient) => {
    return client.get(webApiEndpoint, AadHttpClient.configurations.v1);
  })
  .then((response: HttpClientResponse) => {
    // Handle the response from the Web API
  });

Conclusion

Integrating a .NET Core Web API with Azure AD ensures secure communication between SharePoint Online SPFx web parts and other services. By following these steps, you can create a robust solution that provides seamless authentication and authorization, allowing your applications to interact securely with SharePoint Online data and services. Leveraging Azure AD's powerful features, your web applications will be well-equipped to meet modern security and user experience expectations.


Similar Articles