Integrate Or Authenticate ASP.NET Core Web APIs And Angular Application With Azure Active Directory

What are we going to do?

 

This article explains how to integrate a web application that is built using Angular and ASP.NET core web APIs, with Azure Active Directory. This is going to be a long post so I have divided this into three parts:

• Part 1: Set up the Azure Active Directory.
• Part 2: Set up Asp.net core web APIs to use Azure AD Authentication
• Part 3: Set up an Angular application to use Azure AD Authentication.

This is Part 1: Set Up Azure Active Directory.

 

Prerequisites 

 

To follow along you need to know or have the following: 

• Basic Understanding of Azure Active Directory
• Azure Subscription
• Basic knowledge of angular 2+
• Basic knowledge of Asp.Net Core Web APIs

All right, now we are good to go for the first step. Let's get started.

 

Set up Azure Active Directory

 

To set up the active directory open a browser and navigate to here. After logging in, follow the below steps

• Navigate to Azure active directory, you can find it in your favorites as shown below. If not available then go to all services and search for active directory.

 

• Create a new directory by clicking on the Create Directory as shown below 

•  Create an active directory by filling in the basic details, please make a note of domain name.

•  After the successful creation of the directory, let's switch the directory to the newly-created directory as shown below.

 

At this point in time, we have a new directory and now all we need to do is to register our applications in the directory and give some permissions. Let's do that next.

 

Register Client Application 

 

To register applications click on App registrations and fill in the details as shown below. As I don't want people from other organizations to access this application, I have chosen the first option. Once basic details are filled in please click on Register. 

 

 

Now go to the overview of this application and follow the steps as shown below. Here the number explains the sequence in which you should click the links.

 

 

and fill in the required details. 

 

• Redirect URI
  AD will redirect the user to the mentioned URI once authentication is successful. These URI can be changed later as well - for now just give localhost URI. 
  
  
• Implicit grant
  I only need ID tokens after authentication as my application is SPA and doesn't have any backend. Access tokens are required to access your backend. In our case, we will be building another application for our API and need to get access tokens differently, which I will show you in the next part.

That is it - just click on configure and we are done with client application registration. Next will be API application registration. 

 

Register API application

 

API application registration will be almost similar to the client application registration. 

 

 

After registration let's expose this API as shown below so that our client application can access it. 

 

 

Fill in the details as mentioned below. Here we will only be creating admin consent since API consumption is necessary for the client application and only admin consent will be required not each user who is signing in. If we were to use some third party API like a graph then we need to have user consent as well. 

 

After adding the scope, authorize the client application by clicking on adding a client application as shown below. Here client Id is the DemoClientApplication's client ID which we created earlier. You can copy it from the client application overview screen.

 

 

After performing all the steps, expose an API blade should look like below screenshot. 

 

 

That is it for setting up Azure. Now the next step is to go to our application and make some code changes so that it can use Azure AD Authentication. Now let's move the next part Part 2: Set up Asp.net core web APIs to use Azure AD Authentication.

 

Thanks for reading this article, and please feel free to share the feedback and any questions you have.