google plus sign-in in checkbox

Question

I am implementing the google plus sign in my API, the one I am following is this(which accesses in the server-side):

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

At step 4 it adds the button this way:

<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>

I have done all the steps, and was able to do it even in the python side. The one I am having problem with is when I am trying to change it into a input type:checkbox that has a class like a toggle button. What I wanted is when the toggle button is on the above code will work, or the google+ plus login pop-up will show. But it doesnt.

Here is the code I tried doing:

            <label id="gConnect" class="switch" style="margin-left:30px; margin-top:6px;">
            <input type="checkbox" id="link-switch" class="input-switch g-signin" data-scope="https://www.googleapis.com/auth/plus.login"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-clientid="CLIENT_ID"
data-accesstype="offline"
data-cookiepolicy="single_host_origin"
data-callback="onSignInCallback" >
            <span class="switch-label" data-on="Yes" data-off="No"></span>
            <span class="switch-handle"></span>
            </label>

Am I missing something?

Answer 1

The button needs to render on a block element really. What I would do in your case is use gapi.auth.signIn to trigger the sign in process once somebody clicks on the checkbox.

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

The one downside with that is it can be tricky to work with pop up blockers at times. If that's the the case then what I would do is have selecting the checkbox bring up a lightbox or similar with the sign in button in it rendered as you had before.