CODEWITHSUNDEEP
javascriptgoogle-plus
Alias
Alias

Reputation: 3091

Button callback function running every page load

I have a button:

<span id="signinButton">
  <span
    class="g-signin"
    data-callback="onSignInCallback"
    data-clientid="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>

When pressed, this runs a function... which at the moment goes off, makes an AJAX post, and prints some text back in the console (just to test, this part works):

<script type="text/javascript">
var helper = (function() {
    return {
        onSignInCallback: function(data) {

            var dataString = 'access_token=' + data['access_token'];

            $.ajax({
                type: "POST",
                url: "getdetails",
                data: dataString,
                dataType: 'html',
                timeout: 0,
                statusCode: {
                    200: function(data){
                        console.log(data);
                    },
                    error: function(data){
                        console.log("There was an error");
                    }
                }
            });
        }
    };
})();   

function onSignInCallback(data) {
  helper.onSignInCallback(data);
}
</script>

However, the issue is that every time I refresh the page without clicking the button, my function runs and the data is posted via AJAX and the text gets printed into the console.

Any idea why this is happening? I want it (obviously) so this only happens when they click the button.

I'm working with the Google Plus API, code modified from:

https://github.com/googleplus/gplus-quickstart-javascript/blob/master/index.html#L44

Upvotes: 5

Views: 2195

Answers (3)

jer0dh
jer0dh

Reputation: 382

I was getting this as well. On my global onSignInCallBack(authResult) function, I enclosed the call that makes the ajax request in an if statement that checks for a value in authResult['access_token']. I'm using AngularJs and moved my Ajax call into my controller. Since you are not using AngularJS, you can replace the gplusController().onSignInCallback(..) line with your AJAX call.

function onSignInCallback(authResult){
    if (authResult['access_token']) {
    var afToken = document.getElementById('afToken').getAttribute('data-afToken');
    gplusController().onSignInCallback(authResult, afToken);
   }
 }

Upvotes: 0

Matthew Graves
Matthew Graves

Reputation: 3294

Per the documentation for that directive:

data-callback - A function in the global namespace, which is called when the sign-in button is rendered and also called after a sign-in flow completes. When the button is rendered the callback occurs to check whether or not the user previously authorized the app and should be automatically signed in.

By design the callback will run when the button is rendered (i.e. page loads) and also when the button is clicked.

A workaround would be to set a global boolean on the first run.

<script type="text/javascript">
var first_run = true;
var helper = (function() {
    return {
        onSignInCallback: function(data) {

            var dataString = 'access_token=' + data['access_token'];

            $.ajax({
                type: "POST",
                url: "getdetails",
                data: dataString,
                dataType: 'html',
                timeout: 0,
                statusCode: {
                    200: function(data){
                        console.log(data);
                    },
                    error: function(data){
                        console.log("There was an error");
                    }
                }
            });
        }
    };
})();   

function onSignInCallback(data) {
  if(!first_run) {
      helper.onSignInCallback(data);
  }
  first_run = false;
}
</script>

Upvotes: 5

T.J. Crowder
T.J. Crowder

Reputation: 1075567

In the Google Plus documentation:

If the user previously agreed to allow your application access through this button, or another button representing the same application, they are automatically logged in. The callback function is called automatically as soon as the sign-in button is rendered and passed a new authorization object with an access token.

Upvotes: 2

Related Questions