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.

Altocumulus

It sounds like you're clicking the sign in button, and on signing in, it brings you back to the old tab, but you want it to render in the same tab? – Wardwarde

@aritra-chakraborty Since I don't see relations to PHP, I retagged your question. – Nunhood

ok...thank you @SteAp...can you please tell me how can i do this. – Altocumulus

I don't see the "g-plusone" class in your code as described in developers.google.com/+/web/+1button. I would suggest you make sure to use it accordingly to Google's example and work from there. – Perpendicular

i have copied the code from developers.google.com/+/web/signin link.should i change this. – Altocumulus

could you add a var clicked = false and check for it in the signinCallback function at the same time as the accessToken. Then add a click handler to the #signinButton to set clicked = true and trigger the plusone script again? – Bundelkhand

ok i will try that and let you know.Thanks @Kev Price – Altocumulus

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']);
  }

Dudeen

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.

Razorbill

Thanks @Ron i will implement it and let you know if i face any problem. – Altocumulus