Easy & pretty Sign-in control for HTML/JS with OAuth2.0, Google+API & CSS

by +Cesar Anton 

@reicek

When we make a Webapp or a site, we usually need to provide some kind of registration and sign-in, but it's hard and boring for the user to register and remember usernames and passwords for many sites, and some even avoids doing so (unless they really trust/need the site) to avoid sharing his password (most people use the same password for everything or most things).

Using Google+ API and OAuth 2.0 to do the sign-in is very convenient, but for you and your client's/users, since most people will be already signed into they're Google account, all they will need to do is to authorize your App the first time they use it and it will take just 2 or 3 clicks and no typing, and once done it will always remember it, or at least until the user asks to cancel the App authorization, but the best part is that you get the User's name and even the Google+ profile picture, this looks much better than the old-fashioned text-only username that most sites still uses.

The first thing you need to be able to use the Google+ API is to have or create a Google Project, if you don't have one, please follow these steps, if you have one, you need to activate the Google+ API service in the "Services" tag of the Google APIs console.

Note: The URL for your Services in the Google APIs console looks like the following:
https://code.google.com/apis/console/b/0/#project::services

For your code, you will need to manually check 3 things:

1. A client ID for web applications.  You need to create a new one for each web app that you create. To do this, go to the Google APIs console and click on "Create another client ID...".  In this case we are going to use "Application type" -> "Web application" and for the "Your site or hostname" since we are going to use Google Drive HTML hosting, your address would be something like: "https://googledrive.com/host/", the "Javascript origins" will be automatically set to "https://googledrive.com".
2. The API key. This can be found in the "Simple API access" section at the bottom of the Google APIs console.
3. The Scopes. This is where you specify the access rights required by your WebApp, in this case since we only need access to the users Name and profile picture, we are only going to need access to the users Google+ data. When the user is asked for authorization, he or she will see a list explaining the access rights your app is requesting. You can read more about scopes in this part of the documentation.
   
   To start coding, we need to put all this information inside variables, let's start by doing so:

We can find the rest of the Javascript code required to handle the authorization process on this part of the documentation, so let's make a copy:



So far we haven't moved away from the documentation example and it's usually a good idea to keep it unchanged to make debugging easier, the real action comes when making the API request, this is where we make the adjustments necessary to properly display the user's information with our CSS, for this example let's use a great Open Source Metro Style CSS from http://metroui.org.ua/, notice the adjustments when building the HTML code:



Now we need to add a Login button, to keep things neat, the Javascript in the authorization process hides the button when the user has a valid token (and therefore it's logged in), it is important to add this button on every page that we want the user's information (even if it's not a log-in page) this also helps to enhance security and is convenient for the user to log-in from any part of the UI in certain scenarios (E.g. when the user delete's the browser's cookies, and therefore the OAuth token). It is also interesting to point out that this also means the user is logged to a Google account on that browser, this means that you can retrieve the user's files using a Google AppsScript Script Servlet (as described on this article).

Let's look at the HTML needed for the log-in button of the example.



You can see it all working together in the following Google Drive hosted page (click here to read how to host your own).

Example

Feel free to let us know about your ideas, suggestions, requests, etc at the bottom of this article.

Happy coding!