Hacking Google+ Part 1: The Sign-In Button

Ever since Google+ was released in summer 2011, social web developers have been begging for API access to Google’s latest foray into social. But besides some widgets and the Hangout API, we were basically left on our own. Promising APIs like Google+ History  remained in developer preview, and Canvas integration is available to few exclusive […]

Ever since Google+ was released in summer 2011, social web developers have been begging for API access to Google’s latest foray into social. But besides some widgets and the Hangout API, we were basically left on our own. Promising APIs like Google+ History  remained in developer preview, and Canvas integration is available to few exclusive partners in gaming only. So when Google released several APIs for public access earlier this week, we truly were excited! Sign In button, App Activities and Interactive Posts – that’s a lot of stuff to try out! In this first of a – hopefully – ongoing series of tutorials, I want you to join me exploring the new Google+ API and its most basic element – the Sign In button.

Demo-App: https://dev.diesocialisten.at/google+/
GitHub Repository: https://github.com/DieSocialisten/Hacking-Google-Plus
Resources: https://developers.google.com/+/
Google API console: https://code.google.com/apis/console/

Sign Me Up!

The Sign In button implements a basic, client-side OAuth mechanism which works very similar to what we know from Facebook’s JavaScript SDK & Facebook Connect. It basically renders a login button which opens an OAuth dialog in a popup. On confirmation, a JavaScript callback-function is triggered and passed an access token, which in turn allows the application to access the users Goolge+ profile and act in the voice of the user. While there’s also a server-side authentication flow, we’ll stick with the client-side flow for now. Also, I won’t go into more detail on OAuth, as it’s pretty well known by now and there are great docs provided by Google.

Setting Up Your Google+ App

Before starting to code, developers have to register their apps with Google – a process similar to what we normally accomplish with Facebook’s Developer Dashboard. Open the Google API console and create a new project (choose “Create…” from the select-box) – just pick any name you see fit – we chose “Hacking Google+” for our tutorials.

Make sure to activate the “Google+ API” for your project in the “Services”-pane – for now, you won’t need any other APIs activated. While you’re here, make sure to take a look at the impressively long list of APIs offered by Google – I bet there are some you haven’t heard of yet (I sure didn’t).

Notice: while the Sign In button & authorization dialog will still work, a disabled Goolge+ API in “Services” will result in all calls to the API returning an error 403, “Access Not Configured”.

Google API Console

If you want to collaborate with others on your app, the “Team”-pane lets you add other developers to your project. Similar to Facebook’s Developer Roles, you may choose who may view, edit (= change app settings) or own (=administer app-members) your app. Afaik, there’s no way to “sandbox” a Google+ app right now (on Facebook, this is a great way to ensure that your app and all published stories remain invisible to the public).

Google API Console - Teams

Next, on the “API Access”-pane of your project choose “Create an OAuth 2.0 Client-ID”. This actually creates a set of ID & secret for your web-apps’ OAuth-client. Compared to Facebook’s Developer Dashboard, the process of creating a project and an app seperately might seem confusing, but it adds flexibility by enabling developers to associate more than one OAuth-client with one project. Ignore the section “Simple API Access” for now.

Enter your apps name, logo and homepage (this is mainly for branding-reasons, we entered http://dev.diesocialisten.at/google+ as the homepage). On the next screen, choose “Web application” as type and enter the URL where your users should be redirected after authorizing OAuth-access (this will probably be the root of your app again, so again we entered http://dev.diesocialisten.at/google+ here). You’ll recognize that the console populates the hostname & Redirect URI-field with this information automatically. If your webserver offers a valid SSL-certificate, you can choose https:// as protocol, otherwise opt for http://:

Google API Console - OAuth Client

That’s it – you’re almost ready to use your fresh app with the Google+ API! Please notice the Client-ID of & -Secret of your new app – the ID consists of a numerical part and the appendix “.apps.googleusercontent.com”. One more thing: if you want to run your app on both http:// & https://-protocols, make sure to add both URLs as valid JavaScript origins (in my experiments this was necessary at lease):

Google API Console

Less Talk, More Code!

The goal for this first example is rather easy: we want to let users sign in using their Google+ account and use their access token to fetch their basic profile info from Google+. Of course, this was possible using OAuth even before the new Google+ APIs were released, so the real fun starts when we will try to query the circled users (“friends”) of the current user. This basically exposes Google+’ social graph through the API and will be key  for developers adding social context and personalization to their apps and websites. Btw, you’ll find the full code of this example on my public GithHub repository.

Conveniently, our demo will just consist of a single index.html. For using the client-side authentication flow and rendering the actual Sign in-button, make sure to load the Goolge+ JavaScript client. For asynchronous loading, at this snippet just before the closing </body>:

<script type="text/javascript">
(function() {
  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  po.src = 'https://apis.google.com/js/client:plusone.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

Similar to the Facebook JavaScript SDK, the Google+ Sign In-button is rendered by adding the CSS-class “g-signin” to an arbitrary <span>-element. We’ll enclose this element by another <span> with the id “signinButton” – we’ll use the outer element to control the visiblity of the button (this is necessary since the Google+ Client controls the visibility of the inner <span>):

<span id="signinButton" style="display:none;">
  <span class="g-signin"

The data-attributes are used to control the Sign in-button’s behavior:

  • data-callback specifies a JavaScript function that is triggered when the user has authorized the app. It is also called automatically on page-load, after the Google+ Client is initialized. We use this callback to check weither the current user has already authorized the app before.
  • data-clientid refers to the OAuth Client ID – copy your ID (*.apps.googleusercontent.com) from the Google API Console!
  • data-cookiepolicy specifies which source domains can access the Google+ cookie – single_host_origin is fine for our demo.
  • data-requestvisibleactions activates Google+ Moments – we won’t be using this for now but might try it in a later tutorial.
  • data-scope specifies which permissions users will grant your app by installing it. https://www.googleapis.com/auth/plus.login is the basic permission which allows the app to access the users Google+ profile and circled users. https://www.googleapis.com/auth/userinfo.email is used to access the email address of the user. https://www.googleapis.com/auth/plus.me is a subset of plus.login and can be used if you only want to know the users Google+ ID.

This is how the Sign In-button is rendered on our demo-app – on click, the OAuth dialog is opened in a new browser window:

Sign In & OAuth

The dialog shows which permissions users will be granting the app by installing. Note that users can easily define which circles will see activities published by the app and which Google+ circles the app will have access to. This way users can limit which part of their social graph is exposed to the app (this is a nice addition for controlling your privacy, and something Facebook currently doesn’t offer).

After accepting the dialog, the JavaScript handler given in data-callback is triggered:

function signinCallback(authResult) {
  if (authResult['access_token']) {
    // The user has authorized the app, so lets see who we've got here...
    gAPI ('/people/me');
  } else if (authResult['error']) {
    // User has not authorized the G+ App!

The JSON-object authResult which is passed to the handler contains a field access_token if the authorization was successful – we check this to decide if the user has in fact logged in. Note: its important to note that the handler is also called on page load, after the Google+ Client is initialized. That way the app can immediately recognize if the the user has already authorized the app before.

Requesting the Plus

Now that we’ve authorized the app, the gapi.client.request()-method is used to send the actual API-requests. Just pass the relative API-path (see the Google+ HTTP API reference) and define a callback-handler to process the results of the request. For our demo we try out these two requests:

people.get: This call retrieves all information about the current user. This includes name, profile-picture, organizations, age-range, locale, gender and more.

gapi.client.request({path:'/plus/v1/people/me', method:'GET', callback: function(result) {

More: https://developers.google.com/+/api/latest/people/get

people.list: This call retrieves all profiles the current user has circled. This is definitely the most powerful method the G+ API is offering right now, as it offers access to the social graph of the user. Interestingly, users can limit which part of their circles is exposed to the app by selecting circles on the OAuth-dialog – this gives users greater control on who of their contacts is visible to the app (on Facebook, to the contrary, an app authorization always exposes the full friend-list).

gapi.client.request({path:'/plus/v1/people/me/people/visible', method:'GET', callback: function(result) {

More: https://developers.google.com/+/api/latest/people/list

Removing Your Google+ App

Removing an installed Google+ app is especially important for the purpose of testing your authorization flow. Like on Facebook, uninstall on Google+ isn’t  exactly super-obvious. Go to your “Account”-settings, choose “Google+” from the menu and scroll way down to the “Manage Apps” button – there you go! You can setup which of your circles will see app activity, view and delete all past activity or disconnect from the app at all:

Removing Google+ AppsTry reloading your app and you’ll notice that the “Sign In”-button will be displayed again. Unlike Facebook, Google+ also offers a programmatical way to disconnect an app from a user (“uninstall”) by requesting this endpoint provided with the users access token – our demo implements this in the function gDisconnect().

  url: 'https://accounts.google.com/o/oauth2/revoke?token='+access_token;

What’s Next

With the Sign In-button and the two API-calls we’ve used in our demo, developers can now effectively start building social apps on the Google+ platform. Accessing the profiles a user has in their circles can be used to connect friends in your app and is the basic building block for content-personalization & -discovery. What’s still missing: sharing content back to Goolge+! Luckily this can be achieved with App Activities, another API Google has released this week. I’ll be covering App Activities in a follow up, although I’m afraid this feature is restricted to iOS and Android apps for now. Until then – have some fun and play with Google+!

More articles from our series Hacking Google+:

About Author

Michael Kamleitner

Michael Kamleitner is CEO & Product Manager at Swat.io, a Social Media Management solution that’s helping companies to improve their customer support & content management on Facebook, Twitter, Instagram and others. Swat.io is currently used by companies such as 3Österreich, Hitradio Ö3, ÖBB, Focus Online and Burda Intermedia. Follow Michael on Twitter, Facebook or Google+!

Facebook Twitter Google+ Foursquare SlideShare