What are we going to do?

This is the second article in the series on how to integrate a web application that is built using Angular and ASP.NET core web APIs, with Azure Active Directory. You can see all the parts below:
This is Part 2: Set up Asp.net core web APIs to use Azure AD Authentication. Here I will explain what code is required to integrate Azure AD with your Asp.Net Core Web API project.
Prerequisites
  • Must have followed what we covered in Part 1: Set up the Azure Active Directory and should have the client and tenant Id created in the previous article.
  • Basic knowledge of Asp.Net Core Web APIs.
  • Must have an asp-net core web API project setup.
All right, now we are good to go. Let's get started.
Let's make some code change sin the Asp.net Core Web APIs project.
Add the following in your appsettings.json file, and replace the Domain, TenentId, ClientId with the value you copied from Azure AD.
  1. "AzureAd": {
  2. "Instance": "https://login.microsoftonline.com/",
  3. "Domain": "replace with the domain name", // for instance DemoOrganization2.onmicrosoft.com
  4. "TenantId": "put azure ad tenant id",
  5. "ClientId": "put your api application's tenant id"
  6. }
You can easily find these values on the overview screen of the api application we registered in part 1
Setup ASP.NET Core Web APIs To Use Azure AD Authentication
Next let's create two class files in the root folder of the application and name it AzureAdOptions, AzureAdServiceCollectionExtensions and then paste the following code respectively.
  1. public class AzureAdOptions
  2. {
  3. public string ClientId { get; set; }
  4. public string ClientSecret { get; set; }
  5. public string Instance { get; set; }
  6. public string Domain { get; set; }
  7. public string TenantId { get; set; }
  8. }
  1. public static class AzureAdServiceCollectionExtensions
  2. {
  3. public static AuthenticationBuilder AddAzureAdBearer(this AuthenticationBuilder builder)
  4. => builder.AddAzureAdBearer(_ => { });
  6. public static AuthenticationBuilder AddAzureAdBearer(this AuthenticationBuilder builder, Action<AzureAdOptions> configureOptions)
  7. {
  8. builder.Services.Configure(configureOptions);
  9. builder.Services.AddSingleton<IConfigureOptions<JwtBearerOptions>, ConfigureAzureOptions>();
  10. builder.AddJwtBearer();
  11. return builder;
  12. }
  14. private class ConfigureAzureOptions : IConfigureNamedOptions<JwtBearerOptions>
  15. {
  16. private readonly AzureAdOptions _azureOptions;
  18. public ConfigureAzureOptions(IOptions<AzureAdOptions> azureOptions)
  19. {
  20. _azureOptions = azureOptions.Value;
  21. }
  23. public void Configure(string name, JwtBearerOptions options)
  24. {
  25. options.Audience = _azureOptions.ClientId;
  26. options.Authority = $"{_azureOptions.Instance}{_azureOptions.TenantId}";
  27. }
  29. public void Configure(JwtBearerOptions options)
  30. {
  31. Configure(Options.DefaultName, options);
  32. }
  33. }
  34. }
The last step is to use this code in startup.cs class. Paste the following code in ConfigureServices method.
  1. services.AddAuthentication(sharedOptions =>
  2. {
  3. sharedOptions.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
  4. }).AddAzureAdBearer(options => Configuration.Bind("AzureAd", options));
Make sure you import the class namespace before using this method.
That is it, we are done with API integration. Now it's time to make some code changes in our client application which is built on Angular 8. Let's do that next.
Thanks for reading this article. Please feel free to share feedback or any question you have. You can find the code my public git hub repo.