google-authentication-helper

This is a small library designed to help you integrate Google's client-side one-touch authentication into your website.

Requirements

You need your Google client ID in the page header:

<meta name="google-signin-client_id"
      content="531745357390-akh3vsslmb6c3jmufjrqqr5qkif95g1i.apps.googleusercontent.com">
          

...and to load Google's authentication libraries:

<script src="https://smartlock.google.com/client" async defer type="text/javascript"></script>
<script src="https://apis.google.com/js/platform.js" async="" defer type="text/javascript"></script>
          

...and to load this library:

<script src="https://cs125-illinois.github.io/google-authentication-helper/google-authentication-helper.js" type="text/javascript"></script>
          

Now click the start button below to see what happens:

Here's the code that accomplishes what happens above:

window.googleLoginHelper
  .config('531745357390-akh3vsslmb6c3jmufjrqqr5qkif95g1i.apps.googleusercontent.com')
  .login(user => {
    $("#output > pre").text(JSON.stringify(user, null, 2))
    $("#signin").hide()
  })
  .manual(error => {
    $("#signin").show()
  })

$("#start").click(() => {
  window.googleLoginHelper.start()
})

Try opening the page in an Incognito window. The manual strategy will fall back to showing a login button, which will trigger an event also handled by the library. The same login callback will be called with the same information.