Preventing automatic sign-in when using Google+ Sign-In

Update

The best supported way to prevent automatic sign-in is to use the API method gapi.auth2.getAuthInstance().signOut() which will prevent automatic sign-in on your site after it has been called. Demo here.

In the demo, the user is signed out when they leave the page as shown in the following code:

window.onbeforeunload = function(e){
  gapi.auth2.getAuthInstance().signOut();
};

Now, whenever the user exits the site (e.g. closes the window, navigates away), they will be signed out and the sign in button will not trigger sign-in until the user clicks it.

I don’t recommend you do this in your own implementation but instead allow the user to explicitly sign out when they no longer desire want to be signed in. Also, please note that my example is a demo, you probably do not want to sign the user out automatically any time they leave your site.

Original Post

First, you should not be using data-approvalprompt=”force” as this will cause extra authorized subtokens to be issued to your application / client and is designed to be used in scenarios where the user needs to be reauthorized after credentials have been lost server-side.

Second, you probably do not want to have the behavior where the user needs to click to sign in because they are already “signed in” to their Google account and it could be confusing to need to sign in (or trigger sign-in) again, separately, for your site.

If you really wanted to do this, you would perform an explicit render for the signin button but would not make the call to gapi.signin.render as documented in the Google+ sign-in documentation until you are aware that the user will not automatically get signed in.

The following code shows how to enable explicit render of the sign-in button:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>
<script type="text/javascript">
var token = "";
function onSigninCallbackVanilla(authResponse){
   // in a typical flow, you show disconnect here and hide the sign-in button
}

The following code shows you how to explicitly render the button:

  <span id="signinButton">
    <button id = "shim" onclick="gapi.signin.go(); $('#shim').hide();">Show the button</button>
    <span
      class="g-signin"
      data-callback="onSigninCallbackVanilla"
      data-clientid="YOUR_CLIENT_ID"
      data-cookiepolicy="single_host_origin"
      data-requestvisibleactions="http://schemas.google.com/AddActivity"
      data-scope="https://www.googleapis.com/auth/plus.login">

    </span>
  </span>

How you’re communicating that the user is signed out of your site is probably going to vary from site to site, but one approach could be to set a cookie indicating the “signed out” state for a user and then using this as the trigger for blocking explicit load. The behavior gets a little trickier when a user visits your site and has disabled cookies or uses a separate, signed-in, browser. To address this, you could do something complicated like querying the user state from your server over XHR on the sign-in callback and pretending not to know the user is signed in to Google+.

More Related Contents:

Leave a Comment Cancel reply