Implementation for Google OAuth

package.json

@@ -4,6 +4,7 @@
   "license": "MIT",
   "scripts": {
     "start": "ng serve",
+    "start:https": "ng serve --ssl true --host 0.0.0.0 --port 8443",
     "build": "ng build",
     "lint": "ng lint",
     "json:server": "json-server --delay 3000 --watch db.json",

src/app/app.routes.ts

@@ -7,5 +7,6 @@ export const ROUTES: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
   { path: 'home', loadChildren: './home/home.module#HomeModule', data: { state: 'home' } },
   { path: 'demo', loadChildren: './demo/demo.module#DemoModule', data: { state: 'demo' } },
+  { path: 'oauth', loadChildren: './oauth/oauth.module#OAuthModule', data: { state: 'oauth' } },
   { path: '**', component: PageNotFoundComponent }
 ];

src/app/appcommon/security/OAuth.ts

@@ -0,0 +1,51 @@
+export interface IOAuthOptions {
+  AUTH_URL: string;
+  CLIENT_ID: string;
+  SCOPE: string[];
+  OAUTH_REDIRECT_URI: string;
+}
+
+interface IOAuth {
+  oAuthLogin(url: string): Promise<any>;
+}
+
+class OAuthBrowser implements IOAuth {
+  options: IOAuthOptions;
+  constructor(options: IOAuthOptions) {
+    this.options = options;
+  }
+
+  public oAuthLogin(url: string): Promise<any> {
+    return new Promise(function(resolve, reject) {
+      console.log('OAuth URL : ' + url);
+      window.location.href = url;
+    });
+  }
+}
+
+export class OAuth {
+  private options: IOAuthOptions;
+  private APP_SCOPE_DELIMITER = ' ';
+  private _oAuthClient: IOAuth;
+  private url: string;
+
+  constructor(options: IOAuthOptions) {
+    this.options = options;
+    this._oAuthClient = new OAuthBrowser(options);
+    this.url = `${options.AUTH_URL}?response_type=token&client_id=${options.CLIENT_ID}&redirect_uri=${
+      options.OAUTH_REDIRECT_URI
+    }&scope=${options.SCOPE.join(this.APP_SCOPE_DELIMITER)}`;
+  }
+
+  authenticate(): Promise<any> {
+    return this._oAuthClient.oAuthLogin(this.url);
+  }
+
+  getClientId(): string {
+    return this.options.CLIENT_ID;
+  }
+
+  getRedirectUri(): string {
+    return this.options.OAUTH_REDIRECT_URI;
+  }
+}

src/app/appcommon/security/index.ts

@@ -0,0 +1 @@
+export * from './OAuth';

src/app/appcommon/services/app.service.ts

@@ -44,7 +44,7 @@ export class AppState {
      * Use our state getter for the clone.
      */
     const state = this.state;
-    return state.hasOwnProperty(prop) ? state[prop] : state;
+    return state.hasOwnProperty(prop) ? state[prop] : null;
   }
 
   public set(prop: string, value: any) {

src/app/components/header/header.component.ts

@@ -1,5 +1,7 @@
 import { MenuItem } from 'primeng/primeng';
 import { Component, OnInit } from '@angular/core';
+import { OAuth } from '../../appcommon/security';
+import { environment } from '../../../environments/environment';
 
 @Component({
   selector: 'app-header',
@@ -21,6 +23,19 @@ export class HeaderComponent implements OnInit {
             items: [{ label: 'Project' }, { label: 'Other' }]
           },
           { label: 'Open', routerLink: ['pagename'] },
+          {
+            label: 'Google OAuth',
+            command: event => {
+              event.originalEvent.preventDefault();
+              const oAuth = new OAuth({
+                AUTH_URL: environment.AUTH_URL,
+                CLIENT_ID: environment.OAUTH_CLIENT_ID,
+                SCOPE: ['profile'],
+                OAUTH_REDIRECT_URI: window.location.origin + '/oauth/'
+              });
+              oAuth.authenticate();
+            }
+          },
           { label: 'Quit', routerLink: ['pagename'] }
         ]
       },

src/app/oauth/components/oauth.component.html

@@ -0,0 +1,12 @@
+<div class="oauth-home">
+    <div>
+        Your Google Access Token :
+        <span class="information">{{accessToken}}</span>
+    </div>
+    <br/>
+    <br/>
+    <div>
+        User Details :
+        <pre class="information">{{userInfo | json}}</pre>
+    </div>
+</div>

src/app/oauth/components/oauth.component.scss

@@ -0,0 +1,10 @@
+.oauth-home {
+  padding: 20px;
+
+  .information {
+    background-color: #cdcdcd;
+    border: solid 1px #a0a0a0;
+    border-radius: 5px;
+    padding: 10px;
+  }
+}

src/app/oauth/components/oauth.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AppState } from '../../appcommon/services/app.service';
+import { UserInfoService } from '../services/userinfo.service';
+
+@Component({
+  selector: 'app-oauth',
+  templateUrl: './oauth.component.html',
+  styleUrls: ['./oauth.component.scss']
+})
+export class OAuthComponent implements OnInit {
+  userInfo: any;
+  accessToken: string;
+
+  constructor(
+    private appState: AppState,
+    private activeRoute: ActivatedRoute,
+    private router: Router,
+    private service: UserInfoService
+  ) {
+    this.activeRoute.params.subscribe(params => {
+      const url = window.location.href;
+      if (url.split('#').length > 1) {
+        const responseParameters = url.split('#')[1].split('&');
+        const parsedResponse = {};
+        for (let i = 0; i < responseParameters.length; i++) {
+          parsedResponse[responseParameters[i].split('=')[0]] = responseParameters[i].split('=')[1];
+        }
+        if (parsedResponse['access_token'] !== undefined && parsedResponse['access_token'] !== null) {
+          this.appState.set('accessToken', parsedResponse['access_token']);
+          this.router.navigate(['oauth']);
+        }
+      }
+    });
+  }
+
+  ngOnInit() {
+    this.accessToken = this.appState.get('accessToken');
+    if (this.accessToken) {
+      this.service.getUserInfo(this.accessToken).subscribe(data => {
+        this.userInfo = data;
+      });
+    } else {
+      this.router.navigate(['home']);
+    }
+  }
+}

src/app/oauth/oauth.module.ts

@@ -0,0 +1,15 @@
+import { AppcommonModule } from './../appcommon/appcommon.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Routes, RouterModule } from '@angular/router';
+import { OAuthComponent } from './components/oauth.component';
+import { UserInfoService } from './services/userinfo.service';
+
+const routes: Routes = [{ path: '', component: OAuthComponent }];
+
+@NgModule({
+  imports: [CommonModule, AppcommonModule, RouterModule.forChild(routes)],
+  providers: [UserInfoService],
+  declarations: [OAuthComponent]
+})
+export class OAuthModule {}

src/app/oauth/services/userinfo.service.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs/Observable';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable()
+export class UserInfoService {
+  constructor(private http: HttpClient) {}
+
+  public getUserInfo(accessToken): Observable<any> {
+    return this.http.post(`https://www.googleapis.com/oauth2/v3/userinfo?access_token=${accessToken}`, '');
+  }
+}

src/environments/environment.prod.ts

@@ -1,4 +1,6 @@
 export const environment = {
   production: true,
-  LOG_LEVEL: 'warn'
+  LOG_LEVEL: 'warn',
+  AUTH_URL: 'https://accounts.google.com/o/oauth2/v2/auth',
+  OAUTH_CLIENT_ID: '603712460284-9c20vfg98ra1cecdhu2r84d4ij6erpcr.apps.googleusercontent.com'
 };

src/environments/environment.ts

@@ -5,5 +5,7 @@
 
 export const environment = {
   production: false,
-  LOG_LEVEL: 'debug'
+  LOG_LEVEL: 'debug',
+  AUTH_URL: 'https://accounts.google.com/o/oauth2/v2/auth',
+  OAUTH_CLIENT_ID: '603712460284-9c20vfg98ra1cecdhu2r84d4ij6erpcr.apps.googleusercontent.com'
 };