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.

9
Leave a Reply

avatar
8 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
CicciokrHugo CarpentierCicciokrNilendraPatrick Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Andres Hurtado
Guest
Andres Hurtado

AngularJS 6 ?

PS
Guest
PS

Does this work?

Patrick
Guest
Patrick

AngularJS 6 is not a thing. AngularJS is Angular v1. Everything past v1 is known as Angular.

Nilendra
Guest
Nilendra

it does not automatically attach bearer token in api call like adal-angular.. any tips?

Hugo Carpentier
Guest
Hugo Carpentier

Hello, I tried the code in github, and (after some problems of libraries solved) it goes directly to an error page of Microsoft :
AADSTS90013: Invalid input received from the user.

Cicciokr
Guest
Cicciokr

@Hugo Carpentier when you go on your application, appear the page of ADAL Microsoft with the Login form?