using Adal.js with Angular2

vsaroopchand · vsaroopchand · commit 9ba431ce2a6e · 2017-04-03T19:37:57.000Z
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "build": "webpack --progress",
     "watch": "npm run build -- --watch",
-    "server": "webpack-dev-server --inline --progress --port 3000 --content-base src",
+    "server": "webpack-dev-server --inline --progress --port 5000 --content-base src",
     "start": "npm run server"
   },
   "contributors": [
@@ -25,15 +25,18 @@
     "@angular/platform-server": "~2.2.1",
     "@angular/router": "~3.2.1",
     "@angular/upgrade": "~2.2.1",
+    "adal-angular": "^1.0.14",
     "angular2-in-memory-web-api": "0.0.21",
     "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",
+    "expose-loader": "^0.7.3",
     "ie-shim": "^0.1.0",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.12",
     "zone.js": "~0.6.26"
   },
   "devDependencies": {
+    "@types/adal": "^1.0.26",
     "@types/node": "^6.0.48",
     "angular2-router-loader": "^0.3.4",
     "angular2-template-loader": "^0.6.0",
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -3,6 +3,10 @@ <h3>
 </h3>
 <nav>
 	<a [routerLink]="['/']">
+    Login
+  </a>
+  |
+  <a [routerLink]="['/home']">
     Home
   </a>
   |
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,3 +1,7 @@
+import { OAuthCallbackHandler } from './login-callback/oauth-callback.guard';
+import { OAuthCallbackComponent } from './login-callback/oauth-callback.component';
+import { OAuthHandshakeModule } from './login-callback/oauth-callback.module';
+import { SharedServicesModule } from './services/shared.services.module';
 import { NgModule } from '@angular/core'
 import { RouterModule } from '@angular/router';
 import { rootRouterConfig } from './app.routes';
@@ -14,6 +18,7 @@ import { RepoListComponent } from './github/repo-list/repo-list.component';
 import { RepoDetailComponent } from './github/repo-detail/repo-detail.component';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 import { ContactComponent } from './contact/contact.component';
+import { LoginComponent } from './login/login.component';
 
 @NgModule({
   declarations: [
@@ -23,17 +28,20 @@ import { ContactComponent } from './contact/contact.component';
     RepoListComponent,
     RepoDetailComponent,
     HomeComponent,
-    ContactComponent
+    ContactComponent,
+    LoginComponent    
   ],
   imports: [
     BrowserModule,
     FormsModule,
     ReactiveFormsModule,
     HttpModule,
+    OAuthHandshakeModule,
+    SharedServicesModule,
     RouterModule.forRoot(rootRouterConfig, { useHash: true })
   ],
   providers: [
-    GithubService
+    GithubService    
   ],
   bootstrap: [ AppComponent ]
 })
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -1,3 +1,4 @@
+
 import { Routes } from '@angular/router';
 
 import { AboutComponent } from './about/about.component';
@@ -6,15 +7,23 @@ import { RepoBrowserComponent } from './github/repo-browser/repo-browser.compone
 import { RepoListComponent } from './github/repo-list/repo-list.component';
 import { RepoDetailComponent } from './github/repo-detail/repo-detail.component';
 import { ContactComponent } from './contact/contact.component';
+import { LoginComponent } from './login/login.component';
+import { OAuthCallbackHandler } from './login-callback/oauth-callback.guard';
+import { OAuthCallbackComponent } from './login-callback/oauth-callback.component';
+import { AuthenticationGuard } from "./services/authenticated.guard";
 
 export const rootRouterConfig: Routes = [
-  { path: '', redirectTo: 'home', pathMatch: 'full' },
-  { path: 'home', component: HomeComponent },
+  { path: '', redirectTo: 'login', pathMatch: 'full' },
+  { path: 'home', component: HomeComponent, canActivate: [AuthenticationGuard] },
   { path: 'about', component: AboutComponent },
-  { path: 'github', component: RepoBrowserComponent,
+  { path: 'login', component: LoginComponent },
+  { path: 'id_token', component: OAuthCallbackComponent, canActivate: [OAuthCallbackHandler] },
+  {
+    path: 'github', component: RepoBrowserComponent, canActivate: [AuthenticationGuard],
     children: [
       { path: '', component: RepoListComponent },
-      { path: ':org', component: RepoListComponent,
+      {
+        path: ':org', component: RepoListComponent,
         children: [
           { path: '', component: RepoDetailComponent },
           { path: ':repo', component: RepoDetailComponent }
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -1,3 +1,4 @@
+import { AdalService } from './../services/adal.service';
 import {Component} from '@angular/core';
 
 @Component({
@@ -6,4 +7,10 @@ import {Component} from '@angular/core';
   templateUrl: './home.component.html'
 })
 export class HomeComponent {
+  constructor(private adalService: AdalService){
+    console.log('User info from JWT');
+    console.log(this.adalService.userInfo);
+    console.log('JWT Token');
+    console.log(this.adalService.accessToken);
+  }
 }
diff --git a/src/app/login-callback/oauth-callback.component.ts b/src/app/login-callback/oauth-callback.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { AdalService } from './../services/adal.service';
+
+@Component({
+    template: '<div>Please wait...</div>'
+})
+export class OAuthCallbackComponent implements OnInit {
+    constructor(private router: Router, private adalService: AdalService) {
+
+    }
+
+    ngOnInit() {
+        if (!this.adalService.userInfo) {
+            this.router.navigate(['login']);
+        } else {
+            this.router.navigate(['home']);
+        }
+    }
+}
diff --git a/src/app/login-callback/oauth-callback.guard.ts b/src/app/login-callback/oauth-callback.guard.ts
@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+import { AdalService } from './../services/adal.service';
+
+@Injectable()
+export class OAuthCallbackHandler implements CanActivate {
+    constructor(private router: Router, private adalService: AdalService) {
+
+    }
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+
+        this.adalService.handleCallback();
+
+        if (this.adalService.userInfo) {
+
+            var returnUrl = route.queryParams['returnUrl'];
+            if (!returnUrl) {
+                this.router.navigate(['home']);
+            } else {
+                this.router.navigate([returnUrl], { queryParams: route.queryParams });
+            }
+        }
+        else {
+            this.router.navigate(['login']);
+        }
+
+        return false;
+    }
+}
diff --git a/src/app/login-callback/oauth-callback.module.ts b/src/app/login-callback/oauth-callback.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { OAuthCallbackComponent } from './oauth-callback.component';
+import { OAuthCallbackHandler } from './oauth-callback.guard';
+
+@NgModule({
+    imports: [],
+    declarations: [ OAuthCallbackComponent],
+    providers: [OAuthCallbackHandler]
+})
+export class OAuthHandshakeModule { }
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
@@ -0,0 +1,8 @@
+<h3>Login</h3>
+<div *ngIf="!isLoggedIn">
+    <button (click)="login()">Login with my AAD account</button>
+</div>
+
+<div *ngIf="isLoggedIn">
+    <button (click)="logout()">Logout</button>
+</div>
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
@@ -0,0 +1,27 @@
+import { Router } from '@angular/router';
+import { AdalService } from './../services/adal.service';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    templateUrl: './login.component.html'
+})
+export class LoginComponent implements OnInit {
+
+    constructor(private router: Router, private adalService: AdalService) { }
+
+    ngOnInit() {
+        console.log(this.adalService.userInfo);
+    }
+
+    login() {
+        this.adalService.login();
+    }
+
+    logout() {
+        this.adalService.logout();
+    }
+
+    public get isLoggedIn() {
+        return this.adalService.isAuthenticated;
+    }
+}
diff --git a/src/app/login/login.module.ts b/src/app/login/login.module.ts
@@ -0,0 +1,9 @@
+
+import { LoginComponent } from './login.component';
+import { NgModule } from '@angular/core';
+
+@NgModule({
+    imports: [],
+    declarations: [LoginComponent]
+})
+export class LoginModule { }
diff --git a/src/app/services/adal.service.ts b/src/app/services/adal.service.ts
@@ -0,0 +1,37 @@
+import { ConfigService } from './config.service';
+import { Injectable } from '@angular/core';
+import 'expose-loader?AuthenticationContext!../../../node_modules/adal-angular/lib/adal.js';
+let createAuthContextFn: adal.AuthenticationContextStatic = AuthenticationContext;
+
+@Injectable()
+export class AdalService {
+
+    private context: adal.AuthenticationContext;
+    constructor(private configService: ConfigService) {
+        this.context = new createAuthContextFn(configService.getAdalConfig);
+    }
+
+    login() {
+        this.context.login();
+    }
+
+    logout() {
+        this.context.logOut();
+    }
+
+    handleCallback() {
+        this.context.handleWindowCallback();
+    }
+
+    public get userInfo() {
+        return this.context.getCachedUser();
+    }
+
+    public get accessToken() {
+        return this.context.getCachedToken(this.configService.getAdalConfig.clientId);
+    }
+
+    public get isAuthenticated() {
+        return this.userInfo && this.accessToken;
+    }
+}
diff --git a/src/app/services/authenticated.guard.ts b/src/app/services/authenticated.guard.ts
@@ -0,0 +1,24 @@
+import { Observable } from 'rxjs/Observable';
+import { Injectable } from '@angular/core';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, NavigationExtras } from '@angular/router';
+import { AdalService } from './../services/adal.service';
+
+@Injectable()
+export class AuthenticationGuard implements CanActivate {
+    constructor(private router: Router, private adalService: AdalService) {
+
+    }
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+
+        let navigationExtras: NavigationExtras = {
+            queryParams: { 'redirectUrl': route.url }
+        };
+
+        if (!this.adalService.userInfo) {
+            this.router.navigate(['login'], navigationExtras);
+        }
+
+        return true;
+    }
+}
diff --git a/src/app/services/config.service.ts b/src/app/services/config.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ConfigService {
+    constructor() {
+    }
+    public get getAdalConfig(): any {
+        return {
+            tenant: 'Your Tenant ID',
+            clientId: 'Your Client ID',
+            redirectUri: window.location.origin + '/',
+            postLogoutRedirectUri: window.location.origin + '/'
+        };
+    }
+}
diff --git a/src/app/services/shared.services.module.ts b/src/app/services/shared.services.module.ts
@@ -0,0 +1,9 @@
+import { ConfigService } from './config.service';
+import { AdalService } from './adal.service';
+import { AuthenticationGuard } from './authenticated.guard';
+import { NgModule } from '@angular/core';
+
+@NgModule({
+    providers: [AdalService, ConfigService, AuthenticationGuard]
+})
+export class SharedServicesModule { }
