Button callback function running every page load

Question

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

Answer 1

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>

Answer 2

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.