Google+ vs Google Identity Platform API

Question

tl;dr: can someone explain what exactly is the difference in implementing client-side Google login flow between these two platforms?

The backstory:

I've been trying to implement client-side Google sign in to my website. First, I implemented the Google+ platform with global settings using tags, so user session is monitored. Got the info here: https://developers.google.com/+/web/signin/

However, I encountered a problem where the site would automatically check for user login state if the user is not logged in, which resulted in many 'toastr' messages of 'Logged out', which I implemented in the signInCallback function. It was pretty annoyting.

So I did some research and stumbled across their 'quick start app' and browsed through it. It is WAY more complicated than their guide, many elements were documented on Google Identity Platform, here: https://developers.google.com/identity/sign-in/web/reference

Now I don't really understand what is the correct way of implementing their login - is it the lightweight Google+ button with tag callback check for user state, or is it the robust GIP way with listeners, gapi instances and all? What exactly different do these platforms offer?

Answer 1

Both the Google+ platform sign-in (gapi.auth) and the Identity platform (gapi.auth2) are related and work similarly.

The chief differences between the two are:

gapi.auth2 supports more modern JavaScript (listeners and promises) so you can do this:

var signinChanged = function (val) {
  console.log('Signin state changed to ', val);
  document.getElementById('signed-in-cell').innerText = val;
};

auth2.isSignedIn.listen(signinChanged);

...auth2 has a more explicit syntax to give you more control over behavior:

gapi.load('auth2', function() {
  auth2 = gapi.auth2.init({
    client_id: 'CLIENT_ID.apps.googleusercontent.com',
    fetch_basic_profile: true,
    scope: 'profile'
  });

  // Sign the user in, and then retrieve their ID.
  auth2.signIn().then(function() {
    console.log(auth2.currentUser.get().getId());
  });
});

And auth2 provides basic profile support without needing an extra API call:

if (auth2.isSignedIn.get()) {
  var profile = auth2.currentUser.get().getBasicProfile();
  console.log('ID: ' + profile.getId());
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail());
}

In short, I recommend using the approaches documented at https://developers.google.com/identity/sign-in/, such as https://developers.google.com/identity/sign-in/web/.

Implementing login correctly will depend on what kind of sign-in you want:

• Client-only, you can just use the JavaScript/iOS/Android clients
• Hybrid client-server auth, you will need to implement something similar to one of the quickstarts

If you are doing client-only, then it should be pretty simple: you authorize the user and then access the resources using the API client. If you are doing something more sophisticated, e.g. managing sessions and so forth, you should use ID tokens from the API client to authorize the user's session after authorizing your server using an authorization code.