4

I have been scrambling to convert my website (which was using a server-side, Go-based OpenID solution, which may or may not have been disabled by Google this past Monday) over to a Google JavaScript oauth library to enable my users sign in with their Google account. I first reached out by asking a question here, and received several comments from people trying to help, but could get no definite answers. I then decided to just play it safe and convert to another method, which seemed to go well at first, but I now have some complaints from my users that they cannot get signed in, see my next question here.

My problem now is that I have come across at least FOUR different sets of documentation for different api libraries, all on official Google sites, that all claim to tell me how to do this. In no particular order:

  1. Google APIs Client Library for JavaScript (Beta)
  2. Google+ Platform, with a Quick Start
  3. Google Identity Platform
  4. Google Sign-In for Websites

I am now thoroughly confused as to what the actual "preferred" method might be, and am wondering if I am possibly using an outdated method that could be causing my problem? I am currently using the method used in the Quick Start guide from option #2 in my list above.

Any insights would be greatly appreciated.

Community
  • 1
  • 1
Blair Connolly
  • 584
  • 2
  • 7
  • 21

1 Answers1

6

Short version: Use Google Sign-in for Websites. To migrate from OpenID2: https://developers.google.com/identity/sign-in/auth-migration#oid2

If you must/strongly prefer to use standard OAuth2 directly: https://developers.google.com/identity/protocols/OpenID2Migration

A basic integration with the Google Identity Platform Javascript API (Google Sign-In for Websites) on the client side looks something like this:

<html lang="en">
  <head>
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="YOURCLIENTID.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </head>
  <body>
    <div class="g-signin2" data-openidrealm="YOUR_REALM" data-onsuccess="onSignIn"></div>
    <script>
      function onSignIn(googleUser) {
        // Useful data for your client-side scripts:
        var profile = googleUser.getBasicProfile();
        console.log("ID: " + profile.getId()); // NB. don't send this directly to your server, as that is insecure. Instead, send the full id_token, which your server can extract the id from using the 'sub' value.
        console.log("Name: " + profile.getName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail());

        // The ID token you need to pass to your backend:
        var id_token = googleUser.getAuthResponse().id_token;
        console.log("ID Token: " + id_token);
      };
    </script>
  </body>
</html>

The above logs the user in, and gives you their ID Token. You'll need to replace "YOURCLIENTID.apps.googleusercontent.com" with a client ID that you register in the Developers Console (Create a Project, then navigate to APIs & auth -> Credentials -> Create a new Client ID). Be sure to specify your production & development domain in the "Authorized JavaScript origins" list. Also replace "YOUR_REALM" in that sample with your previous OpenID 2.0 realm.

Once you have an "id_token" you can authenticate with your backend. You do this by passing the "id_token" to your backend, then validating and decoding it with a JWT library. For OpenID Migration in particular, you'll need to map the "openid_id" value from the JWT to the new "sub" ID.

Some sample code for id_token validation is here:

For testing, you can decode an ID token using this tool to see the data it contains (it should contain openid_id as a claim).

Regarding documentation: For Sign In the preferred approach is Google Sign-in for Websites (#4). It implements the simplest and best-updated API for Sign In.

Under the hood, Google Sign In is an implementation of OAuth2/OpenIDConnect. Link #3 above describes using this standard flow, with full-page redirect. It is a supported flow, but as noted on the link, Google Sign-in for Websites is preferred where possible.

Google APIs Client Library (#1) uses OAuth under the hood. Its sample code describes an old, legacy authentication model and should be updated. We will do that shortly; thanks for raising attention.

Finally, with the recent launch of Google Sign-in for Websites, the Google+ Platform API (#2) is no longer the preferred approach for Sign In. We are updating docs for this soon as well to avoid future confusion.

William Denniss
  • 16,089
  • 7
  • 81
  • 124
  • Thank you both for the clarification. The most helpful part of all of this (for me, at least) is the explanation of the different links, and the clarification of why there are so many. I will spend the next day or two updating my code to use Google Sign-in method and let you know how it goes. – Blair Connolly Apr 23 '15 at 16:40
  • This does seem to be an appropriate answer for the question I've asked, thank you guys. I'm going to mark it as the official answer. The code you've given me above still does produce the issue that I've described in one of my other open questions, though (http://stackoverflow.com/questions/29755539/error-when-loading-google-oauth2-javascript-api-while-logged-into-multiple-googl). If either of you have any input on that, I would be very grateful. – Blair Connolly Apr 23 '15 at 18:26