by +Cesar Anton
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:
For your code, you will need to manually check 3 things:
- 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 API key. This can be found in the "Simple API access" section at the bottom of the Google APIs console.
- 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:
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:
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).