AngularJS: Google+ Sign In Integration

Google+ Platform now enables easy, efficient and powerful multi-platform integration of it’s services with almost everything you can imagine.

If you have a need to use Google authentication, over-the-air installs, profile & social graph access, develop your own “hangout” app, or use simple plug-ins like +1 button, Badge, Share and Follow button, provided API’s are going to come in very handy for you.

This article is going to be all about Google authentication for websites, or simply said: “How to integrate Google+ Sign In button into your website and use it for sign in”. Although, Google Documentation is very good and reading trough it will give you not only a clue, but good insights about the functionality of API with some nice examples, it does’t cover some specific details when it comes to AngularJS integration.

We will only cover the basics here, so this article is designed mostly to save your time, but if you wish to learn more, see Google’s PhotoHunt or check out it’s source code from GitHub.

The basics

Sign In Button

The Google Sign In Button which you have probably seen many times on different websites has the role of offering the user the ability to authenticate with Google services. For developer, it is of huge importance because it represents a starting point for communication with Google services.

For our needs we are going to place a in our HTML document with proper id and render it later “manually”.

AngularJS gives us a nice feature with ng-hide, which is a flag that hides given component when Boolean variable bound to it is true.

There is more to know about this magical button, and that is that you must add this script in order to render the sign in button:

This script asynchronously loads plusone.js which is the Google+ JavaScript API (Google recommendation). Should be enough said for now, more detail will follow when we go trough the example part.

Sign In Dialog

After you have rendered the Google Sign In Button and user has clicked on it, the sign in dialog appears. In this dialog user can choose an existing Google account for sign in or create a new one. This dialog is by design just a smaller version of standard Google sign in form.

Next step that will be offered to user will be the permissions page, user must accept these permissions in order to authenticate. For more information about permissions, visit data scopes documentation.

User session state

User will be prompted for authentication first time he tries to sign in, after that he will be signed in automatically unless the user session manually terminated. Google track’s the users signed in state in a persistent cookie store in users domain.

Get your ClientID

In order to use Google+ API and authentication, you must first enable Google+ API and register a new OAuth 2.0  credential. You can achieve this by going to Google Developer Console , and follow these two steps:

1. Create a new project – Under Projects create a new project, name it as you wish.
2. Enable Google+ API – Under APIs & auth and after that APIs find Google+ API  and enable it.
3. Register for credentials – Under APIs & auth and after that Credentials click on “CREATE NEW CLIENT ID“, choose website option and after that insert the URL of your hosted website into “Javascript Origins” text field (i.e. http://localhost:8080). It won’t work if you do not enter your website’s URL properly!

Most important thing after registering your credentials is the “CLIENT ID” you will receive, you will need it when call for authentication is being done.

NOTE: User permissions accepted for a given Google account will remain permanently and do not have anything to do with user session state.

Example

Someone once said, a good example can replace a thousand words, so here we go by defining a simple HTML document.

If you are confused at this point, please don’t get worried, after we go trough some controller code things will become much more clear:

Retrieve additional user info

After successful authentication that has been explained in the example, you can retrieve some additional information from signed in user account. Google+ API follows a RESTfull API design, so a call like this:

would give us some additional information about given user.

Here is a neat example that shows how to retrieve users domain and e-mail address. Replace “Do some work in previous example with $scope.getUserInfo(); before proceeding.

Sign out

Google+ API also provides a easy way to terminate user session. Is also done by calling their API, and this is all you need to do:

IMPORTANT: This functionality won’t work if you host your website in localhost for some reason.