docs(cb-azure-ad-auth): Add new cookbook

Author: maliksahil

public/docs/_examples/cb-azure-ad-auth/e2e-spec.ts

@@ -0,0 +1,15 @@
+/// <reference path='../_protractor/e2e.d.ts' />
+'use strict';
+describe('Azure AD Auth E2E tests', function () {
+
+  let expectedMsg = 'Simple app demonstrates';
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it(`should display: ${expectedMsg}`, function () {
+    expect(element(by.css('p')).getText()).toContain(expectedMsg);
+  });
+
+});

public/docs/_examples/cb-azure-ad-auth/ts/.gitignore

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+@Component({
+    selector: 'app',
+    template: `
+    <a [routerLink]="['']">About</a> | <a [routerLink]="['login']">Login</a> | <a [routerLink]="['status']">Status</a> <br/>  
+    <router-outlet></router-outlet>`
+})
+
+export class AppComponent { }

public/docs/_examples/cb-azure-ad-auth/ts/app/app.component.ts

@@ -0,0 +1,40 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { HttpModule } from '@angular/http';
+import { BrowserModule } from '@angular/platform-browser';
+import { routing } from './app.routing';
+import { AppComponent } from './app.component';
+
+import { HomeComponent } from './home/home.component';
+import { LoginComponent } from './login/login.component';
+import { StatusComponent } from './status/status.component';
+
+import { AzureADServiceConstants } from './ngAuth/authenticators/AzureADServiceConstants';
+import { AzureADAuthService } from './ngAuth/authenticators/AzureADAuthService';
+import { AuthenticatedHttpService } from './ngAuth/AuthenticatedHttpService';
+
+import { serviceConstants } from './authsettings.config';
+
+let authenticator = new AzureADAuthService(serviceConstants);
+
+@NgModule({
+    providers: [
+        AuthenticatedHttpService,
+        {
+            provide: AzureADAuthService,
+            useValue: authenticator
+        }],
+    imports: [
+        routing,
+        BrowserModule,
+        HttpModule
+    ],
+    declarations: [
+        AppComponent,
+        HomeComponent,
+        LoginComponent,
+        StatusComponent
+    ],
+    bootstrap: [AppComponent]
+})
+export class AppModule { }

public/docs/_examples/cb-azure-ad-auth/ts/app/app.module.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { ModuleWithProviders }  from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { LoginComponent } from './login/login.component';
+import {HomeComponent} from './home/home.component';
+import { StatusComponent } from './status/status.component';
+
+export const routes: Routes = [
+  { path: '', component: HomeComponent },
+  { path: 'login', component: LoginComponent },
+  { path: 'status', component: StatusComponent },
+];
+export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

public/docs/_examples/cb-azure-ad-auth/ts/app/app.routing.ts

@@ -0,0 +1,8 @@
+import {AzureADServiceConstants} from './ngAuth/authenticators/AzureADServiceConstants';
+
+export const serviceConstants: AzureADServiceConstants = new AzureADServiceConstants(
+    "e176a5f1-596e-44c9-91cb-46de9bb96ee1",
+    "angularad.onmicrosoft.com",
+    "http://localhost:3000/status",
+    "https://graph.windows.net"
+);

public/docs/_examples/cb-azure-ad-auth/ts/app/authSettings.config.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
+
+@Component({
+    template:`
+        Simple app demonstrates logging into AzureAD and running a command against the Azure AD graph. <br/> 
+        Click the login tab to login, and status tab to view your login status.
+        `
+    })
+export class HomeComponent { }

public/docs/_examples/cb-azure-ad-auth/ts/app/home/home.component.ts

@@ -0,0 +1,22 @@
+// #docregion
+import { Component, Inject } from '@angular/core';
+import { Router } from '@angular/router';
+
+import {AzureADAuthService} from '../ngAuth/authenticators/AzureADAuthService';
+
+@Component({
+    template: `
+        <button (click)="logIn()">
+            Sign In
+        </button>`
+})
+
+export class LoginComponent {
+    constructor(
+        @Inject(AzureADAuthService) private _authService: AzureADAuthService,
+        private _router: Router) { }
+
+    logIn() {
+        this._authService.logIn("/");
+    }
+}

public/docs/_examples/cb-azure-ad-auth/ts/app/login/login.component.ts

@@ -0,0 +1,3 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {AppModule} from './app.module';
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/cb-azure-ad-auth/ts/app/main.ts

@@ -0,0 +1,33 @@
+// #docregion
+import { Injectable, Inject } from '@angular/core';
+import { Http, Headers, Response } from '@angular/http';
+import { AzureADAuthService } from './authenticators/AzureADAuthService';
+import { Observable, Subscriber } from 'rxjs';
+
+@Injectable()
+export class AuthenticatedHttpService {
+  private _authenticator: AzureADAuthService;
+  private _http: Http;
+  constructor( @Inject(Http) http: Http, @Inject(AzureADAuthService) authenticator: AzureADAuthService) {
+    this._authenticator = authenticator;
+    this._http = http;
+  }
+
+  createAuthorizationHeader(headers: Headers) {
+    headers.append('Authorization', 'Bearer ' + this._authenticator.getAccessToken());
+  }
+
+  get(url: string) {
+    let headers = new Headers();
+    this.createAuthorizationHeader(headers);
+    return this._http.get(url, { headers: headers });
+  }
+
+  post(url: string, data: any) {
+    let headers = new Headers();
+    this.createAuthorizationHeader(headers);
+    return this._http.post(url, data, {
+      headers: headers,
+    });
+  }
+}