How to Integrate Azure Active Directory with Angular Applications : Article 01

What is the active directory..

Azure AD
App registration
npm install microsoft-adal-angular6
tenant: 'angular application tenant id',
clientId: 'angular application client id',
redirectUri: 'URI on which you want to redirect user after login',
endpoints: {
'api application url': 'api application client id', // this is for feteching the access token
navigateToLoginRequestUrl: false,
cacheLocation: '<localStorage / sessionStorage>',
postLogoutRedirectUri: 'URI on which you want to redirect user after logout',
import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { DashboardComponent } from '../dashboard.component';import { LoginpageComponent } from '../loginpage.component';import { AuthenticationGuard } from 'microsoft-adal-angular6';const routes: Routes = [{path: 'login', component: LoginpageComponent},{ path: 'id_token',  redirectTo: '/dashboard',  pathMatch: 'full'},{ path: '',  redirectTo: '/login',  pathMatch: 'full'},{path: 'dashboard', component:  DashboardComponent,canActivate: [AuthenticationGuard]},{path: '**', component: LoginpageComponent},];@NgModule({imports: [RouterModule.forRoot(routes,{useHash:true})],exports: [RouterModule]})export class AppRoutingModule { }
import { Component,OnInit } from '@angular/core';import { MsAdalAngular6Service } from 'microsoft-adal-angular6';@Component({
selector: 'app-loginpage',
templateUrl: './loginpage.component.html',styleUrls: ['./loginpage.component.css']})export class LoginpageComponent implements OnInit {constructor(private adalService: MsAdalAngular6Service) { } ngOnInit(): void {} login(): void { this.adalService.login(); }}
Authentication Redirect URL set up
app.module.ts Configuration



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store