Integration Angular application with Azure Active Directory authentication – ADAL-Angular 4

Integration Angular application with Azure Active Directory authentication – ADAL-Angular 4

What will I do in this article ?

I will try to explain for you how to create integration Azure Active Directory Authentication with Angular application and .NET Core API.

What is ADAL-Angular 4?

ADAL-Angular4 is a simple angular wrapper for Microsoft ADAL.js (Active Directory Authentication Library). Library contains wrapper for connection with Microsoft authentication, interceptor and simple guard. Do not be fooled by the name, library is compatible with Angular 4/5/6/7.

How it works?

After implementation ADAL-Angular4 you can choose what components need to be protected by ADAL guard. When guard will detect browser without generated token, library will redirect to Microsoft website with authentication. On .NET Core API side application will communicate with Microsoft to confirm the correctness of token. If token is correct API will return data from controller.

Let’s start

Register Applications

At the beginning you need to register two applications one for Angular application and one for .NET Core API application. To do this log in on https://portal.azure.com, choose from menu Azure Active Directory, on next screen select App Registrations. After the press button New application registration you should see new window with basic inputs to complete.

Example of registration for Angular application
Example of registration for API application

Configure access to the Web API

Second thing to do in Azure Active Directory is configure access to the Web API. Therefore open registered Angular application and click on the Settings button, after that choose Required permissions. In Required permissions window click Add button and choose registered .NET Core API application after that select checkbox with DELEGATED PERMISSIONS.

Angular Application

Install ADAL-Angular4

Install ADAL-Angular4 library to your Angular application.

NPM website: https://www.npmjs.com/package/adal-angular4

NPM command:

Implementation

Implement configuration and init adal in app.component.ts

Now I will explain adalConfiguration parameters:

TENANT_GUID: Is Azure Active Directory ID, you can find it in Azure Active Directory page then in Properties. 

Azure Active Directory ID
Azure Active Directory ID

APPLICATIONID_GUID: Is the Angular Application ID. To get Application ID go to Azure Active Directory after that go to App registrations and find your registered Angular application. In details window you should get a column with the Application ID.

Application ID

LOGIN_REDIRECT_URL: Is Angular application URL called automatically after the user authenticate on Microsoft page. For instance: http://localhost:4200/auth-callback

LOGOUT_REDIRECT_URL: Is Angular application URL called automatically after the user logout. For instance: http://localhost:4200/logout

WEB_API_URL: Is .NET Core API Application direct URL. For
instance : http://localhost:58434

APPLICATIONID_WEB_API_GUID: Is the .NET Core API Application ID. You can find it in a similiar way as APPLICATIONID_GUID.

Implement guard in app-routing.module.ts and define auth-callback route

Implement ADAL Interceptor in app.module.ts

Create AuthCallbackComponent

auth-callback.component.html: You can put here message like „Hello again!”

.NET Core API

Install nuget

Make sure you have installed the Microsoft.AspNetCore.Authentication.AzureAD.UI nuget package. After that you should configure authentication service as AzureADBear.

Implementation

Configure authentication in Startup.cs

Add AzureActiveDirectory settings in appsettings.json

AD_DOMAIN: Is Active Directory domain, you can find it in Azure Panel in Azure Active Directory window and at last in Custom domain names.

TENANT_GUID and APPLICATIONID_GUID you can find by analogy to Angular application.

After that all…

Don’t forget to decorate your controller class with Authorize attribute 🙂

In conclusion, I hope I helped you to understand how to implement Azure Active Directory authentication. If you have any question leave me a comment under this post.

If you have an extra time you can check my another article how to implement hamburger menu in xamarin.forms