Angular 2+ ADAL Wrapper library
npm install ngx-adal-8[![NPM version][npm-image]][npm-url]
[![License][license-image]][license-url]
bash
"assets": [
"src/favicon.ico",
"src/assets",
"src/frameRedirect.html"
],
`
Create frameRedirect.html under src folder and inside frameRedirect.html
`html
Frame Redirect
`
In index.html put
`html
`
In app.module.ts
`bash
import { NgxAdalModule } from 'ngx-adal-8';
`
Imports section
`typescript
NgxAdalModule.forRoot({
tenant: YOUR_TENANT_ID (7),
clientId: YOUR_CLIENT_ID (6),
redirectUri: frameRedirect.html,
postLogoutRedirectUri: frameRedirect.html,
cacheLocation: 'localStorage',
}),
`
3 App scenerios
App that either you are logged in or will send you to login upon visit
Without using guards
in your app.component.ts
`typescript
import { NgxAdalService } from 'ngx-adal-8';
`
`typescript
constructor(private authService:NgxAdalService){
if (!this.authService.isAuthenticated) {
this.authService.login();
}
}
`
Using guards
In app-routing.module.ts
`typescript
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'secured',
component: SecuredComponent,
pathMatch: 'full',
canActivate: [NgxAdalGuard]
},
{ path: 'unsecured', component: UnsecuredComponent, pathMatch: 'full' },
{ path: '**', redirectTo: 'unsecured' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
`
App that have public facing and some parts require login.
In some component perhaps navbar.component.ts login/logout buttons
`typescript
constructor(private authService:NgxAdalService){
}
login(){
this.authService.login();
}
logout(){
this.authService.logout();
}
``