How to Integrate Azure AD with Angular and .Net Core Web API Application

Recently I got a chance to setup a new project which uses angular 6 and .Net core web API. The first task was to setup the authentication and I used Azure AD authentication. Idea was to focus on the application and let Azure handles the heavy lifting task for me.

This is three step task and they are following 

1. Configure Azure AD via azure portal.
2. Configure Angular application to use Azure AD for authentication.
3. Configure .Net core Web API to allow angular application to access the API.

This is the first part where we will be configuring Azure AD via Azure portal.

Prerequisites

This post is about setting up the Azure AD with angular and web API application so to implement this you must have following

• Azure subscription 
• Basic knowledge of what is Azure B2B
• Basic knowledge of Angular 6
• Basic knowledge of .NET Web API

Configure Azure AD via Azure Portal

To configure the Azure AD first you need create an active directory, this is also known as creating a tenant. Please following the following steps 

Step:1 Login to Azure portal

Sign in to portal.azure.com 

Step:2 Create an Active Directory/Tenant

Navigate to Azure Active Directory and click on create directory. Please refer to highlighted links below.

On click on create directory a form will open, just fill up all the information and click on create. Basically you are creating you own organization and every users of this organization will be able to login to your application. 

Once you create the directory you can click on switch directory and select the one you have created. For the purpose of demonstration I have create a directory named InvestmentTracker.

Step: 3 Register the application

Once you switch the directory navigate to App registration and click on New application registration as highlighted below. 

Then fill up the form.

Sign on URL is the login page URL, you can change the it anytime after creation.

Step: 4 Setup the Reply URL

After creation, navigate to the app registration and click on view all applications and select the app you have created. Now follow the highlighted links and enter the reply URL. Reply URL is the URL where user will be redirected after successful login.

Step:5 Allow OAuth flow

Now follow the highlighted links and setup the oauth2AllowImplicitFlow to true.

This is it, you are done with step 1. Next step is to configure the angular app to use Azure AD for authentication.

Next step will be published soon.