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.

Cicciokr

"Javascript is to Java as hamburger is to ham; both are delicious, but they don't have much in common except a name" I'm javascript lovers and this is my site on witch sometimes write about my experience, when i have some free time, and remember: "Homo faber fortunae suae"

  1. Cicciokr

    @Nilendra you can create a function that you call in witch you can attach on the query string / param the token!

  2. 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.

  3. Cicciokr

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

  4. smith

    Just user want load specific page like baseurl/products
    So user type baseurl/products then signing will happen but the user redirect to the root link of the app but not the baseurl/products that user requested.

    How it can be solved?

Write a Comment

Your email address will not be published.