Angular 6 – ADAL Authentication

Today i want to talk to you about Microsoft ADAL (Azure Active Directory Authentication Library).
ADAL allows users to authenticate in Active Directory (AD) local or in the cloud and take token to protect the API.

How can i do to integrate it in a Angular 6 app?

1) Install the js library microsoft-adal-angular6

npm i microsoft-adal-angular6

2) Open app.component.ts
2.1) Import the microsoft adal

import { MsAdalAngular6Service } from 'microsoft-adal-angular6';

2.2) In the export class AppComponent change the constructor

export class AppComponent {
title = 'APP Title';
constructor(private adalSvc: MsAdalAngular6Service) {
console.log(this.adalSvc.userInfo);
var token = this.adalSvc.acquireToken('http://adal.resource.com').subscribe((token: string) => {
console.log(token);
});
}
}

3) Open app.module.ts
3.1) Import the microsoft adal

import { MsAdalAngular6Module, AuthenticationGuard } from 'microsoft-adal-angular6';

3.2) We must to change our routes

const appRoutes: Routes = [
{ path: '', component: AppComponent, pathMatch: 'full', canActivate: [AuthenticationGuard] }
];

3.3) In NgModule import library

@NgModule({
declarations: [
AppComponent
],
imports: [
MsAdalAngular6Module.forRoot({
instance: 'https://adal.resource.com/',
tenant: '',
clientId: '',
redirectUri: window.location.origin,
navigateToLoginRequestUrl: false,
cacheLocation: 'localStorage'
}),
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }
),
BrowserModule,
],
providers: [
AuthenticationGuard
]
});

If you want an example Angular 6 ADAL App click here.