How to pass anti-forgery state to the Google Sign-In button or javascript?

Question

I'm following this tutorial to create a sign-in button.

https://developers.google.com/+/web/signin/server-side-flow

But I don't see how the anti-forgery state is passed to the button snippet (step 4).

Should there be a parameter like data-state for the button?

The whole tutorial doesn't mention how the state code is passed from the page to google server and back to my signInCallback function.

<div id="signinButton">
  <span class="g-signin"
        data-scope="https://www.googleapis.com/auth/plus.login"
        data-clientid="YOUR_CLIENT_ID"
        data-redirecturi="postmessage"
        data-accesstype="offline"
        data-cookiepolicy="single_host_origin"
        data-callback="signInCallback">
  </span>
</div>

Then in step 6, I don't see how the state is passed to the ajax server call. So how does this if-condition work in step 7?

if request.args.get('state', '') != session['state']:

Thanks for any help in advance.

Answer 1

After a little poking around, I found that there's an undocumented parameter, data-state, for the button. Once I set it, I could it coming back to my callback function.

<div id="signinButton">
  <span class="g-signin"
        data-scope="https://www.googleapis.com/auth/plus.login"
        data-clientid="YOUR_CLIENT_ID"
        data-state="MY_STATE" <!-- The state is sent to Google and back to my callback -->
        data-redirecturi="postmessage"
        data-accesstype="offline"
        data-cookiepolicy="single_host_origin"
        data-callback="signInCallback">
  </span>
</div>