Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit ea853dd

Browse files
maliksahilmaliksahil
committed
docs(cb-azure-ad-auth): Add new cookbook
1 parent 61b13c1 commit ea853dd

20 files changed

+633
-13
lines changed

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

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/// <reference path='../_protractor/e2e.d.ts' />
2+
'use strict';
3+
describe('Azure AD Auth E2E tests', function () {
4+
5+
let expectedMsg = 'Simple app demonstrates';
6+
7+
beforeEach(function () {
8+
browser.get('');
9+
});
10+
11+
it(`should display: ${expectedMsg}`, function () {
12+
expect(element(by.css('p')).getText()).toContain(expectedMsg);
13+
});
14+
15+
});

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

Whitespace-only changes.

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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Component } from '@angular/core';
2+
@Component({
3+
selector: 'app',
4+
template: `
5+
<a [routerLink]="['']">About</a> | <a [routerLink]="['login']">Login</a> | <a [routerLink]="['status']">Status</a> <br/>
6+
<router-outlet></router-outlet>`
7+
})
8+
9+
export class AppComponent { }

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

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// #docregion
2+
import { NgModule } from '@angular/core';
3+
import { HttpModule } from '@angular/http';
4+
import { BrowserModule } from '@angular/platform-browser';
5+
import { routing } from './app.routing';
6+
import { AppComponent } from './app.component';
7+
8+
import { HomeComponent } from './home/home.component';
9+
import { LoginComponent } from './login/login.component';
10+
import { StatusComponent } from './status/status.component';
11+
12+
import { AzureADServiceConstants } from './ngAuth/authenticators/AzureADServiceConstants';
13+
import { AzureADAuthService } from './ngAuth/authenticators/AzureADAuthService';
14+
import { AuthenticatedHttpService } from './ngAuth/AuthenticatedHttpService';
15+
16+
import { serviceConstants } from './authsettings.config';
17+
18+
let authenticator = new AzureADAuthService(serviceConstants);
19+
20+
@NgModule({
21+
providers: [
22+
AuthenticatedHttpService,
23+
{
24+
provide: AzureADAuthService,
25+
useValue: authenticator
26+
}],
27+
imports: [
28+
routing,
29+
BrowserModule,
30+
HttpModule
31+
],
32+
declarations: [
33+
AppComponent,
34+
HomeComponent,
35+
LoginComponent,
36+
StatusComponent
37+
],
38+
bootstrap: [AppComponent]
39+
})
40+
export class AppModule { }

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// #docregion
2+
import { ModuleWithProviders } from '@angular/core';
3+
import { Routes, RouterModule } from '@angular/router';
4+
import { LoginComponent } from './login/login.component';
5+
import {HomeComponent} from './home/home.component';
6+
import { StatusComponent } from './status/status.component';
7+
8+
export const routes: Routes = [
9+
{ path: '', component: HomeComponent },
10+
{ path: 'login', component: LoginComponent },
11+
{ path: 'status', component: StatusComponent },
12+
];
13+
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

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

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

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

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

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

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// #docregion
2+
import { Component, Inject } from '@angular/core';
3+
import { Router } from '@angular/router';
4+
5+
import {AzureADAuthService} from '../ngAuth/authenticators/AzureADAuthService';
6+
7+
@Component({
8+
template: `
9+
<button (click)="logIn()">
10+
Sign In
11+
</button>`
12+
})
13+
14+
export class LoginComponent {
15+
constructor(
16+
@Inject(AzureADAuthService) private _authService: AzureADAuthService,
17+
private _router: Router) { }
18+
19+
logIn() {
20+
this._authService.logIn("/");
21+
}
22+
}

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

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

‎public/docs/_examples/cb-azure-ad-auth/ts/app/ngAuth/AuthenticatedHttpService.ts

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// #docregion
2+
import { Injectable, Inject } from '@angular/core';
3+
import { Http, Headers, Response } from '@angular/http';
4+
import { AzureADAuthService } from './authenticators/AzureADAuthService';
5+
import { Observable, Subscriber } from 'rxjs';
6+
7+
@Injectable()
8+
export class AuthenticatedHttpService {
9+
private _authenticator: AzureADAuthService;
10+
private _http: Http;
11+
constructor( @Inject(Http) http: Http, @Inject(AzureADAuthService) authenticator: AzureADAuthService) {
12+
this._authenticator = authenticator;
13+
this._http = http;
14+
}
15+
16+
createAuthorizationHeader(headers: Headers) {
17+
headers.append('Authorization', 'Bearer ' + this._authenticator.getAccessToken());
18+
}
19+
20+
get(url: string) {
21+
let headers = new Headers();
22+
this.createAuthorizationHeader(headers);
23+
return this._http.get(url, { headers: headers });
24+
}
25+
26+
post(url: string, data: any) {
27+
let headers = new Headers();
28+
this.createAuthorizationHeader(headers);
29+
return this._http.post(url, data, {
30+
headers: headers,
31+
});
32+
}
33+
}

‎public/docs/_examples/cb-azure-ad-auth/ts/app/ngAuth/JwtHelper.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Injectable } from '@angular/core';
2+
3+
@Injectable()
4+
export class JwtHelper {
5+
private urlBase64Decode(str: string) {
6+
var output = str.replace(/-/g, '+').replace(/_/g, '/');
7+
switch (output.length % 4) {
8+
case 0: { break; }
9+
case 2: { output += '=='; break; }
10+
case 3: { output += '='; break; }
11+
default: {
12+
throw 'Illegal base64url string!';
13+
}
14+
}
15+
return decodeURIComponent((<any>window).escape(window.atob(output)));
16+
}
17+
18+
public decodeToken(token: string = "") {
19+
if (token === null || token === "") return {"upn": ""};
20+
var parts = token.split('.');
21+
if (parts.length !== 3) {
22+
throw new Error('JWT must have 3 parts');
23+
}
24+
var decoded = this.urlBase64Decode(parts[1]);
25+
if (!decoded) {
26+
throw new Error('Cannot decode the token');
27+
}
28+
return JSON.parse(decoded);
29+
}
30+
}

‎public/docs/_examples/cb-azure-ad-auth/ts/app/ngAuth/authenticators/AzureADAuthService.ts

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
// #docregion
2+
import { Injectable } from '@angular/core';
3+
import { Http, Headers } from '@angular/http';
4+
import { JwtHelper } from '../JwtHelper';
5+
6+
import { AzureADServiceConstants } from "./AzureADServiceConstants";
7+
8+
@Injectable()
9+
export class AzureADAuthService {
10+
public isUserAuthenticated(): boolean {
11+
let access_token = this.getAccessToken();
12+
return access_token != null;
13+
}
14+
15+
public getAccessToken(): string {
16+
return window.localStorage.getItem("access_token");
17+
}
18+
19+
public getUserName(): string {
20+
var jwtHelper = new JwtHelper();
21+
var parsedToken = jwtHelper.decodeToken(this.getAccessToken());
22+
23+
var expiryTime = new Date(parsedToken.exp * 1000);
24+
var now = new Date();
25+
if (now > expiryTime) this.logOut();
26+
27+
return parsedToken.upn;
28+
}
29+
30+
// #docregion login
31+
public logIn(state = "/") {
32+
window.location.href = "https://login.microsoftonline.com/" + this._serviceConstants.tenantID +
33+
"/oauth2/authorize?response_type=id_token&client_id=" + this._serviceConstants.clientID +
34+
"&redirect_uri=" + encodeURIComponent(window.location.href) +
35+
"&state=" + state + "&nonce=SomeNonce";
36+
}
37+
// #enddocregion login
38+
39+
public logOut(state = "/") {
40+
window.localStorage.removeItem("id_token");
41+
window.localStorage.removeItem("access_token");
42+
window.location.href = state;
43+
}
44+
private parseQueryString = function (url: string) {
45+
var params = {};
46+
var queryString = "";
47+
if (url.search("#") != -1) {
48+
queryString = url.substring(url.search("#") + 1);
49+
50+
} else {
51+
queryString = url.substring(url.indexOf("?") + 1);
52+
}
53+
var a = queryString.split('&');
54+
for (var i = 0; i < a.length; i++) {
55+
var b = a[i].split('=');
56+
params[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || '');
57+
}
58+
return params;
59+
}
60+
61+
private params = this.parseQueryString(location.hash);
62+
// #docregion ctor
63+
constructor(private _serviceConstants: AzureADServiceConstants) {
64+
// do we have an access token, if so add the iframe renewer
65+
if (window.localStorage.getItem("access_token")) {
66+
var iframe = document.createElement('iframe');
67+
iframe.style.display = "none";
68+
iframe.src = "/app/ngAuth/renewToken.html?tenantID=" +
69+
encodeURIComponent(this._serviceConstants.tenantID) +
70+
"&clientID=" + encodeURIComponent(this._serviceConstants.clientID) +
71+
"&resource=" + encodeURIComponent(this._serviceConstants.graphResource);
72+
window.onload = function () {
73+
document.body.appendChild(iframe);
74+
}
75+
}
76+
if (this.params["id_token"] != null) {
77+
window.localStorage.setItem("id_token", this.params["id_token"]);
78+
// redirect to get access token here..
79+
window.location.href = "https://login.microsoftonline.com/" + this._serviceConstants.tenantID +
80+
"/oauth2/authorize?response_type=token&client_id=" + this._serviceConstants.clientID +
81+
"&resource=" + this._serviceConstants.graphResource +
82+
"&redirect_uri=" + encodeURIComponent(window.location.href) +
83+
"&prompt=none&state=" + this.params["state"] + "&nonce=SomeNonce";
84+
}
85+
else if (this.params["access_token"] != null) {
86+
window.localStorage.setItem("access_token", this.params["access_token"]);
87+
// redirect to the original call URl here.
88+
window.location.href = this.params["state"];
89+
}
90+
}
91+
// #enddocregion ctor
92+
}
93+
94+
function error(err: any) {
95+
console.error(JSON.stringify(err, null, 4));
96+
}
97+
98+
// #enddocregion

‎public/docs/_examples/cb-azure-ad-auth/ts/app/ngAuth/authenticators/AzureADServiceConstants.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Injectable } from '@angular/core';
2+
3+
@Injectable()
4+
export class AzureADServiceConstants {
5+
constructor(
6+
public clientID:string,
7+
public tenantID:string,
8+
public redirectURL:string,
9+
public backendUrl:string,
10+
public graphResource = "https://graph.windows.net",
11+
public isCordova = false,
12+
public isElectron = false) {}
13+
}

‎public/docs/_examples/cb-azure-ad-auth/ts/app/ngAuth/renewToken.html

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<html>
2+
3+
<head>
4+
<title>Renew Token</title>
5+
<script>
6+
// jwt_decode from https://raw.githubusercontent.com/auth0/jwt-decode/master/build/jwt-decode.min.js
7+
!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);throw new Error("Cannot find module '"+g+"'")}var j=c[g]={exports:{}};b[g][0].call(j.exports,function(a){var c=b[g][1][a];return e(c?c:a)},j,j.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){function d(a){this.message=a}function e(a){var b=String(a).replace(/=+$/,"");if(b.length%4==1)throw new d("'atob' failed: The string to be decoded is not correctly encoded.");for(var c,e,g=0,h=0,i="";e=b.charAt(h++);~e&&(c=g%4?64*c+e:e,g++%4)?i+=String.fromCharCode(255&c>>(-2*g&6)):0)e=f.indexOf(e);return i}var f="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";d.prototype=new Error,d.prototype.name="InvalidCharacterError",b.exports="undefined"!=typeof window&&window.atob||e},{}],2:[function(a,b,c){function d(a){return decodeURIComponent(e(a).replace(/(.)/g,function(a,b){var c=b.charCodeAt(0).toString(16).toUpperCase();return c.length<2&&(c="0"+c),"%"+c}))}var e=a("./atob");b.exports=function(a){var b=a.replace(/-/g,"+").replace(/_/g,"/");switch(b.length%4){case 0:break;case 2:b+="==";break;case 3:b+="=";break;default:throw"Illegal base64url string!"}try{return d(b)}catch(c){return e(b)}}},{"./atob":1}],3:[function(a,b,c){"use strict";var d=a("./base64_url_decode");b.exports=function(a){if(!a)throw new Error("Invalid token specified");return JSON.parse(d(a.split(".")[1]))}},{"./base64_url_decode":2}],4:[function(a,b,c){var d="undefined"!=typeof self?self:"undefined"!=typeof window?window:{},e=a("./lib/index");"function"==typeof d.window.define&&d.window.define.amd?d.window.define("jwt_decode",function(){return e}):d.window&&(d.window.jwt_decode=e)},{"./lib/index":3}]},{},[4]);
8+
</script>
9+
10+
<script>
11+
'use strict';
12+
var parsedToken = jwt_decode(window.localStorage.getItem("access_token"));
13+
var timeoutMiliSeconds = (parsedToken.exp*1000 - 300000) - (new Date().getTime());
14+
// parse QueryString
15+
var params = {};
16+
var queryString = "" ;
17+
if (window.location.href.search("#") != -1) {
18+
queryString = window.location.href.substring(window.location.href.search("#") + 1);
19+
20+
} else {
21+
queryString = window.location.search.substring(1);
22+
}
23+
var a = queryString.split('&');
24+
for (var i = 0; i < a.length; i++) {
25+
var b = a[i].split('=');
26+
params[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || '');
27+
}
28+
29+
if (params["id_token"] != null) {
30+
window.localStorage.setItem("id_token", this.params["id_token"]);
31+
// redirect to get access token here..
32+
window.location.href = "https://login.microsoftonline.com/" + params["tenantID"] +
33+
"/oauth2/authorize?response_type=token&client_id=" + params["clientID"] +
34+
"&resource=" + params["resource"] +
35+
"&redirect_uri=" + encodeURIComponent(window.location.href) +
36+
"&prompt=none&state=" + params["state"] + "&nonce=SomeNonce";
37+
}
38+
else if (params["access_token"] != null) {
39+
window.localStorage.setItem("access_token", this.params["access_token"]);
40+
window.location.href = params["state"];
41+
} else {
42+
window.setTimeout(function() {
43+
var idToken = window.localStorage.getItem("id_token");
44+
var urlWithoutQueryString = window.location.href.substring(0, window.location.href.length - window.location.search.length)
45+
window.location.href = "https://login.microsoftonline.com/" + params["tenantID"] +
46+
"/oauth2/authorize?response_type=token&client_id=" + params["clientID"] +
47+
"&resource=" + params["resource"] +
48+
"&redirect_uri=" + encodeURIComponent(window.location.href) +
49+
"&prompt=none&state=" + encodeURIComponent(window.location.href) + "&nonce=SomeNonce";
50+
}, timeoutMiliSeconds);
51+
}
52+
</script>
53+
</head>
54+
55+
<body>
56+
</body>
57+
58+
</html>

0 commit comments

Comments
 (0)