I want to call Google Plus callback function when clicking on the Google Plus button

Question

I have used a Google Plus button in my project [built in CodeIgniter]. Here I have added the following code.

<span id="signinButton">
  <span
    class="g-signin gooConnect"
    data-callback="signinCallback"
    data-clientid="my_project_client_id"
    data-cookiepolicy="single_host_origin"
    data-requestvisibleactions="http://schemas.google.com/AddActivity"
    data-scope="https://www.googleapis.com/auth/userinfo.email">
  </span>
</span>

Then I added the Javascript code provided by Google.

<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);
  })();

  function signinCallback(authResult) {
    if (authResult['access_token']) {
      $.ajax({
        url:base_url+'index.php/user/getUserProfile',
        type:'POST',
        data:{'access':authResult['access_token']},
        beforeSend  : function(){
          $("#loadingImageBeforeResult").show('slow');
        },
        success : function(resp){
          $("#loadingImageBeforeResult").hide('slow');
          if( resp == 'exist' ){
            window.location.href=base_url+'index.php/user/my_deals';
          } else {
            $('#link_for_geniepage').trigger('click');
          }
        },
        error : function(resp){}
      });
    } else if (authResult['error']) {
      // There was an error.
      // Possible error codes:
      //   "access_denied" - User denied access to your app
      //   "immediate_failed" - Could not automatially log in the user
      // console.log('There was an error: ' + authResult['error']);
    }
  }
</script> 

It's working fine for me, but if I log in my Gmail account in a separate tab and then I go to my login page, the callback function just auto logins with my Gmail credentials and redirects me to my dashboard.

I want that unless I click on that Google Plus button, the callback function should not work. How can I do this? Please help me.

Answer 1

In the signinCallback(authResult) function, you should at first check if the user is signed in and then you should check, if the method value is AUTO or PROMPT. PROMPT is exactly what you want because it is returned when user clicks on the sign in button. Here's the code:

function signinCallback(authResult) {
  if (authResult['status']['signed_in'] && authResult['status']['method'] == 'PROMPT') {
      // User clicked on the sign in button. Do your staff here.
  } else if (authResult['status']['signed_in']) {
      // This is called when user is signed in to Google but hasn't clicked on the button.
  } else {
      // Update the app to reflect a signed out user
      // Possible error values:
      //   "user_signed_out" - User is signed-out
      //   "access_denied" - User denied access to your app
      //   "immediate_failed" - Could not automatically log in the user
      console.log('Sign-in state: ' + authResult['error']);
  }

Answer 2

From the docs, it looks like the signin button, when used this way, will always attempt an immediate validation. Since you're already signed in to google and have authorized the app, google automatically signs you in and sends you to your dashboard.

I'd suggest not using that sample code. You could, instead, use other parts of the Google Javascript API (https://developers.google.com/+/web/api/javascript) Make a Google sign in button that's a normal button. When that's clicked, call gapi.auth.authorize() to log the user in. Then nothing happens until they click the button, and when they do, it either asks for approval/login or just signs the user in automatically.