Angular 2 – Building an app to demonstrate Oauth 2.

Hi Friends,

Hope you are all well. This post is a sequel to my previous post on building an oauth 2 server using nodeJS. If you hadn’t read that yet kindly click here.

Now that we have got the back-end up. We will focus on a front-end app using Angular 2.

First of all Angular 2 released their new RC5 version recently. Let’s focus on converting our rc.4 app into a rc.5 one.

A screencast of this part of the post

The complete code of this post – here.

Scaffold out an app using the angular-cli using the below command.

1	ng new <appname>

Once the app is created open it up in an editor of your choice and then open the package.json file and modify the dependencies as shown below.

"dependencies": {

"@angular/common": "2.0.0-rc.5",

"@angular/compiler": "2.0.0-rc.5",

"@angular/core": "2.0.0-rc.5",

"@angular/forms": "0.3.0",

"@angular/http": "2.0.0-rc.5",

"@angular/platform-browser": "2.0.0-rc.5",

"@angular/platform-browser-dynamic": "2.0.0-rc.5",

"@angular/router": "3.0.0-rc.1",

"core-js": "^2.4.0",

"reflect-metadata": "0.1.3",

"rxjs": "5.0.0-beta.6",

"ts-helpers": "^1.1.1",

"zone.js": "0.6.12"

}

run npm install once again to get the dependencies installed.

The breaking change between RC.4 and RC.5 versions is that the latter supports NgModules, a concept that allows you to write different pieces of functionality in separate modules and then bootstrap them in one file to run through the app.

Create an app.module.ts file in your app directory and type the below code into it.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { HttpModule } from '@angular/http';

import {RouterModule} from '@angular/router';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({

declarations: [AppComponent],

imports: [BrowserModule, HttpModule, RouterModule, FormsModule],

providers:[],

bootstrap: [AppComponent],

})

export class AppModule { }

As you can see, we have imported the BrowserModule, HttpModule, RouterModule, FormsModule into our app. This is similar to us importing the ROUTER_DIRECTIVES, HTTP_PROVIDERS etc., in the previous rc versions.

Now open main.ts file and modify the code as shown below.

import { AppModule } from './app/app.module';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(AppModule);

We are just bootstrapping the AppModule here.

Now let’s get started with the actual app.

If you remember, in our Oauth flow we had 2 parts. The first one would be to register a client in the developer portal of the site and then second one would be to use the client id and secret in our apps.

So let’s first do the first part. Let’s quickly wire-up a few components and then a few routes to navigate through these components.

create a new file called routes.ts and add the below code in it.

import { Routes, RouterModule} from '@angular/router';

import {LoginComponent} from './login/login.component';

import {AuthManager} from './authmanager';

export const appRoutes: Routes = [

{path: '', component:LoginComponent},

{path: 'login', component:LoginComponent, canActivate: [AuthManager]}

];

export const AppRouterProvider = RouterModule.forRoot(appRoutes);

Create another file called authmanager.ts and add the below code.

import {Injectable} from '@angular/core';

import { AuthService } from './auth.service';

import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';

@Injectable()

export class AuthManager implements CanActivate {

constructor(private router: Router, private auth: AuthService) {

}

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

if(next.url[0].path == 'login'){

if(this.auth.isAuthenticated){

console.log('You are already logged in');

return false;

}

else

return true;

}

if(this.auth.isAuthenticated)

return true;

console.log('You must be logged in');

this.router.navigate(['/login']);

return false;

}

This part of the code is simply for authentication and I have already discussed a lot about authentication in my post here.

Now generate a new component called login component using the below command.

1	ng generate component login

Open up login.component.html and add the below code in it.

<button (click)="login(user)">Login</button>

Now open up login.component.ts and add the below code into it.

import { Component, OnInit } from '@angular/core';

import { Router } from '@angular/router';

import {AuthService} from '../auth.service';

@Component({

selector: 'app-login',

templateUrl: 'login.component.html',

styleUrls: ['login.component.css']

})

export class LoginComponent implements OnInit {

user = {

username: '',

password: ''

};

constructor(private router:Router, private auth: AuthService) { }

ngOnInit() {

}

let userlogin = this.auth.login(usercreds);

userlogin.then((res) => {

if (res)

this.router.navigate(['/dashboard']);

})

}

The code is pretty much self explanatory. Let’s move on and create the auth service.

Create it using the below command.

1	ng generate service auth

Now we have generated an auth service and let us use this to login.

import { Injectable } from '@angular/core';

import {Http, Headers} from '@angular/http';

import {Router} from '@angular/router';

@Injectable()

export class AuthService {

isAuthenticated: boolean = false;

userId;

constructor(private http: Http, private router: Router) { }

var headers = new Headers();

var creds = 'name=' + usercreds.username + '&password=' + usercreds.password;

headers.append('Content-Type', 'application/X-www-form-urlencoded');

return new Promise((resolve) => {

this.http.post('http://localhost:3333/authenticate', creds, {headers: headers}).subscribe((data) => {

if(data.json().success) {

this.userId = data.json().userId;

this.isAuthenticated = true;}

resolve(this.isAuthenticated);

}

)

})

}

Now this code is pretty much similar to the one which we saw previously in my post on Authentication using the new Router.

Let’s move on.

Let’s create a landing page or a dashboard for the user. Use the below command to create a new component.

1	ng generate component dashboard

Now open up dashboard.component.html and add the below code.

1 2	<h1>Dashboard</h1> <button (click)="addclient()">Add client</button>

Now open up dashboard.component.ts and add the below code.

import { Component, OnInit} from '@angular/core';

import {Router} from '@angular/router';

import {AuthService} from '../auth.service';

@Component({

selector: 'app-dashboard',

templateUrl: 'dashboard.component.html',

styleUrls: ['dashboard.component.css']

})

export class DashboardComponent implements OnInit {

constructor(private router: Router, private auth: AuthService) { }

ngOnInit() {

}

addclient() {

this.router.navigate(['/addclient']);

}

The next thing we will do is create an interface that allows us to add a client.

This will again be a simple crud system. First create a separate component called addclient using the below command.

1	ng generate component addclient

Now let’s just use this to create a system that allows us to add a client.

Open up addclient.component.html and add the below code.

<button (click)="addclient(name)">Add a client</button>

</div>

<h1>Your client is added</h1>

<h3>Your appId is {{appid}} and your secret is {{appsecret}}</h3>

</div>

Open up addclient.component.ts and add the below code.

import { Component, OnInit, NgZone } from '@angular/core';

import {AuthService} from '../auth.service';

import { Router } from '@angular/router';

@Component({

selector: 'app-addclient',

templateUrl: 'addclient.component.html',

styleUrls: ['addclient.component.css']

})

export class AddclientComponent implements OnInit {

name;

appid='';

appsecret = '';

showids: boolean = false;

constructor(private auth:AuthService, private zone: NgZone, private router: Router) { }

ngOnInit() {

}

addclient(appname){

let newClient = this.auth.addclient(appname);

newClient.then((res) => {

this.appid = res.json().data.id;

this.appsecret = res.json().data.secret;

this.zone.run(()=> {

this.showids = true;

})

}

Open up auth.service.ts and add the below code.

addclient(newclient) {

let appid = this.randomstring(10);

let appsecret = this.randomstring(10);

var headers = new Headers();

var client = 'name=' + newclient + '&id=' + appid + '&secret=' + appsecret + '&userId=' + this.userId;

headers.append('Content-Type', 'application/X-www-form-urlencoded');

return new Promise((resolve) => {

this.http.post('http://localhost:3333/clients', client, {headers: headers}).subscribe((data) => {

if(data.json().success) {

resolve(data);

}

})

}

randomstring (len) {

var buf = []

, chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'

, charlen = chars.length;

for (var i = 0; i < len; ++i) {

buf.push(chars[this.getRandomInt(0, charlen - 1)]);

}

return buf.join('');

};

getRandomInt(min, max) {

return Math.floor(Math.random() * (max - min + 1)) + min;

}

As I mentioned before this is just code to add a client to our clients collection in the db. Note that we are sending the userId here along with the request. So if you are not logged in then you won’t be able to fill in this field.

Okay. Now this concludes the first part of our application. i.e the one wherein you add a client to the developer portal. This provision allows the user to do that.

Suppose the user has added a client successfully. He would have received the app id and secret id.

Now you could host this part of the app like a developer portal or something wherein you can tell the users that they could register their apps.

Part – 2:

From a user’s perspective.

A screencast of this part.

Now let us assume that a user has registered his app with the client and has an appid and a secret which he would like to use in his app.

For the sake of simplicity I will use the same project that I used above.

In the dashboard page, I am going to simply create a button called authorize user.

open up dashboard.component.html and add the below code.

<h1>Dashboard</h1>

<button (click)="authorizeclient()">Authorize me</button>

Note that i have just commented out the Add client button.

This is becoz we are writing the app from the user perspective now. So the user has added a client and has the appid & secret now.

Open up dashboard.component.ts and add the below method as well.

authorizeclient() {

this.auth.authorizeuser();

}

Now open up auth.service.ts and modify it as shown below. The final auth.service.ts would look like this.

import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http';
import {Router} from '@angular/router';

@Injectable()
export class AuthService {
   isAuthenticated: boolean = false;
   userId;
   windowHandle;
   ourcode;
   accesstoken;
  constructor(private http: Http, private router: Router) { }

login(usercreds){
  var headers = new Headers();
        var creds = 'name=' + usercreds.username + '&password=' + usercreds.password;
        
        headers.append('Content-Type', 'application/X-www-form-urlencoded');
        return new Promise((resolve) => {
        this.http.post('http://localhost:3333/authenticate', creds, {headers: headers}).subscribe((data) => {
            if(data.json().success) {
                this.userId = data.json().userId;      
                this.isAuthenticated = true;}
                resolve(this.isAuthenticated);
            }
        )
        
        })
}

authorizeuser() {
  this.windowHandle = window.open('http://localhost:3333/oauth2/authorize?client_id=XRnnexpe7N&response_type=code&redirect_uri=http://localhost:4200/dashboard');
  var href;
  
  setTimeout(() => {
    href = this.windowHandle.location.href;
    
    this.windowHandle.close();
    var extractedcode = href.split('=');
    this.ourcode = extractedcode[1];
    if(this.ourcode)
    this.getAccessToken();
    else
    console.log('Access denied. Try again');
  },5000);
}

addbook(newbook) {
  var headers = new Headers();
  
  headers.append('Authorization', 'Bearer '+ this.accesstoken);
  headers.append('Content-Type', 'application/X-www-form-urlencoded');
  
  var book = 'name=' + newbook.name + '&type=' + newbook.type + '&quantity=' + newbook.quantity;
  return new Promise((resolve) => {
        this.http.post('http://localhost:3333/addbook', book, {headers: headers}).subscribe((data) => {
            
                console.log(data);    
                
                resolve(data);
            
        })
        
        })
  
}

getAccessToken() {
  let client_id = 'XRnnexpe7N';
  let client_secret= 'tUskPBzu64';
  var basicheader = btoa(client_id + ':' + client_secret);
  
  var headers = new Headers();
  
  headers.append('Authorization', 'Basic '+ basicheader);
  headers.append('Content-Type', 'application/X-www-form-urlencoded');
  
  var tokendata = 'code=' + this.ourcode + '&grant_type=authorization_code&redirect_uri=http://localhost:4200/books';
  
  this.http.post('http://localhost:3333/oauth2/token', tokendata, {headers: headers}).subscribe((data) => {
    
    
    this.accesstoken = data.json().access_token;
    console.log(this.accesstoken);
    this.router.navigate(['/books']);
  })
}

}

import { Injectable } from '@angular/core';

import {Http, Headers} from '@angular/http';

import {Router} from '@angular/router';

@Injectable()

export class AuthService {

isAuthenticated: boolean = false;

userId;

windowHandle;

ourcode;

accesstoken;

constructor(private http: Http, private router: Router) { }

var headers = new Headers();

var creds = 'name=' + usercreds.username + '&password=' + usercreds.password;

headers.append('Content-Type', 'application/X-www-form-urlencoded');

return new Promise((resolve) => {

this.http.post('http://localhost:3333/authenticate', creds, {headers: headers}).subscribe((data) => {

if(data.json().success) {

this.userId = data.json().userId;

this.isAuthenticated = true;}

resolve(this.isAuthenticated);

}

)

})

}

authorizeuser() {

this.windowHandle = window.open('http://localhost:3333/oauth2/authorize?client_id=XRnnexpe7N&response_type=code&redirect_uri=http://localhost:4200/dashboard');

var href;

setTimeout(() => {

href = this.windowHandle.location.href;

this.windowHandle.close();

var extractedcode = href.split('=');

this.ourcode = extractedcode[1];

if(this.ourcode)

this.getAccessToken();

else

console.log('Access denied. Try again');

},5000);

}

addbook(newbook) {

var headers = new Headers();

headers.append('Authorization', 'Bearer '+ this.accesstoken);

headers.append('Content-Type', 'application/X-www-form-urlencoded');

var book = 'name=' + newbook.name + '&type=' + newbook.type + '&quantity=' + newbook.quantity;

return new Promise((resolve) => {

this.http.post('http://localhost:3333/addbook', book, {headers: headers}).subscribe((data) => {

console.log(data);

resolve(data);

})

}

getAccessToken() {

let client_id = 'XRnnexpe7N';

let client_secret= 'tUskPBzu64';

var basicheader = btoa(client_id + ':' + client_secret);

var headers = new Headers();

headers.append('Authorization', 'Basic '+ basicheader);

headers.append('Content-Type', 'application/X-www-form-urlencoded');

var tokendata = 'code=' + this.ourcode + '&grant_type=authorization_code&redirect_uri=http://localhost:4200/books';

this.http.post('http://localhost:3333/oauth2/token', tokendata, {headers: headers}).subscribe((data) => {

this.accesstoken = data.json().access_token;

console.log(this.accesstoken);

this.router.navigate(['/books']);

})

}

Okay, that was a bit long.

We have three new methods namely authorizeuser(), getAccessToken() and addbook().

The authorizeuser() method just opens the authorization url in a new window. If the user grants permission then it returns a code and closes.

This code is then sent in a request to be exchanged for an access token which is done by the getAccessToken() method.

Now once you have the token you can use it for making authorized requests.

Let’s just try creating an interface for adding a book.

Create a new book component using the below command.

1	ng generate component book

Open up book.component.html and add the below code.

<p>

books

</p>

Open up book.componet.ts and add the below code.

import { Component, OnInit } from '@angular/core';

import {AuthService} from '../auth.service';

@Component({

selector: 'app-books',

templateUrl: 'books.component.html',

styleUrls: ['books.component.css']

})

export class BooksComponent implements OnInit {

book = {

name: '',

type: '',

quantity: ''

};

constructor(private auth: AuthService) { }

ngOnInit() {

}

addbook(newbook) {

let bookresult = this.auth.addbook(newbook);

bookresult.then(() => {

console.log('Book added');

})

}

As you can see, this is yet another CRUD system for adding a book, but please note that we send the accessToken along with the request in the addbook() method in the auth.service.

Don’t forget to add routes to all this components. The final routes.ts file would look as shown below.

import {Routes, RouterModule} from '@angular/router';

import {LoginComponent} from './login/login.component';

import {DashboardComponent} from './dashboard/dashboard.component';

import {AddclientComponent} from './addclient/addclient.component';

import {BooksComponent} from './books/books.component';

export const appRoutes: Routes = [

{path: '', component:LoginComponent},

{path: 'login', component:LoginComponent},

{path: 'dashboard', component:DashboardComponent},

{path: 'addclient', component:AddclientComponent},

{path: 'books', component:BooksComponent},

]

export const AppRouter = RouterModule.forRoot(appRoutes);

That’s it guys.

Now if you everything goes fine you would have a fully functional Oauth 2 backend server.

How this is implemented in real-time ?

The backend nodejs server is hosted separately. The developer portal is hosted in a domain like developer.<yourcompanyname>.com

Then the users can build their own apps following the instructions as above.

If you find it confusing; kindly watch the video once. I believe I have explained it a bit clearly there.

Hope this helped you guys. Kindly share this with your friends and help them too.

Thanks for reading. Peace..

Follow me

Liked it? Take a second to support admin on Patreon!

T-Pub :)

The Techies' pub

Angular 2 – Building an app to demonstrate Oauth 2.