This day, problems which are related to user authorization and authentication are commonly found. Especially, when building modern and socially-aware web applications. However, some web developers find that the rich API ecosystem is quite complicated in terms of security. For example, ensuring users are who they say and they have authority to access a particular resource.

To solve this kind of problem, OAuth2 is made as an authorization protocol which can enable secure access to third-party APIs (like Google Maps’ or Twitter’s) in your own applications. In the given tutorial, you will see how OAuth2 are applied in a small example that will make use of a Google+ API.

The Running Example

In the first tutorial, we will look at a tiny demo application called “Logonoff”. The only things we can do with it are log in, look at some data, and log out, and it looks like this:

 

 

 

 

Hello.js is part of application that makes use of a JavaScript library that presents a unified API for interacting with a number of OAuth providers, such as Google, Facebook, Twitter, Github, and more. Nowadays more people prefer to use hello.js as it is popular, versatile, and simple.

Setting Up an App with an OAuth Provider

First of all, you need to register to an OAuth provider before working on OAuth2. Usually, the provider is the third party whose API we are interested in using in our own application. OAuth2 has been designed issue a unique Client ID to developers for each of their applications. Client IDs allow developers to specify exactly which requests for which third-party resources are to be used in their apps.

Even though, you can find that hello.js supports a number of OAuth providers but this tutorial work best on Google+ API.  Furthermore, setting up an OAuth provider is simple, yet a little tedious. Here are the outlines of the process of Google’s OAuth service.

Configure Google Credentials For OAuth with our App

1. Navigate to the Google Developer Console and select Credentialsin the API Manager.
2. Next, click Create Credentialsand pick OAuth client ID in the drop down menu.
3. Then add a name, an origin URIand a redirect URI for your application.

• The origin is the URI from which your web app’s requests are made to the OAuth provider, in this casehttp://localhost:5000.

• The redirect URI is the location to which the OAuth provider will return its tokens, and here we have usedhttp://localhost:5000/Save and take note of the Client ID, you’ll need this later.

Enable One of Google’s API

For interacting with its services, Google exposes many APIs. Unless you enable one or two of these APIs, having OAuth set up isn’t of much use. For this application, all you have to do is enable the Google+ API. To do this, you can go under Social APIs in the Overview section of the Developer Panel.

Configuring hello.js for OAuth APIs

In this segment, we get down to actually using OAuth2 with hello.js.  We must first include hello.js in our HTML files and initialize the library with our Google Client ID.  In the case of our demo, we do this like so:

<script src=”static/hello.all.js”></script>
<script>
hello.init({
google: “Client-ID-From-Google-Dev-Console”     // not real id
});
</script>

It will pass along the Client ID we provided to the unit function, when hello.js makes its request to Google’s OAuth service. Then Google will respond at the redirect URI provided. The hello.js library decodes the responses to a Javascript object, here is what it looks.

like:
{ 
state: “”, 
access_token: “not a real access token”, 
token_type: “Bearer”, 
expires_in: 3600, 
client_id: “your client id”, 
network: “google”, 
display: “popup”, 
redirect_uri: “http://localhost:5000/”, 
scope: “basic”, 
expires: 1464148474.442 
}

We include two buttons that call the appropriate hello.js methods, to actually log in and log out of Google from within our application:

><button onclick=”hello(‘google’).login()”>google</button>
<button onclick=”hello(‘google’).logout()”>logout</button>

Moreover, a popup window will appear asking us to allow access to our Google account by this application, when we click the button labelled Google. Here is the image of the window:

 

 

 

 

 

 

 

 

Using Auth Event Handlers

As you get hello.js included and initialized, you can access the Google+ API which is enabled earlier. You bind handler functions to a number of auth events. For example, when we log in or log out of an application. In the tutorial below, we bind a function to the auth.login event that will add a profile picture to the page. When the user logs out, we also bind to the auth.logout event to remove the user info.

<script>
hello.on(‘auth.login’, function (auth) {
              // add a  greeting and access the thumbnail and name from
                    // the  authorized response
hello(auth.network).api(‘/me’).then(function (resp) {
var  lab = document.createElement(“div”);
lab.id  = “pic_and_greet”;
lab.innerHTML  = ‘<img src=”‘ + resp.thumbnail + ‘” /> Hey ‘ + resp.name;
document.body.appendChild(lab);
 });
});
 // remove the  greeting when we log out
hello.on(‘auth.logout’, function () {
var lab =  document.getElementById(“pic_and_greet”);
if (lab !=  null) document.body.removeChild( lab );
 });
</script>

The above is the /me API that exposes basic profile data. The call to .apl(‘/me’) creates a promise to which we pass a callback for processing the response  object. This includes the account name and profile thumbnail as properties.