Google prompted me today to update the Google Sign-in at Clickschool. This is long overdue anyway as currently it does not work with mobile devices.
I found that when adding a DIV using JQuery to use for the sign-in button and then making subsequent calls to google resulted in the button not being rendered for some reason I didn’t end up figuring out.
i.e. doing something like this didn’t work
$(‘buttonsContainer’).append(‘<div id=”gSignIn”>’)
google.accounts.id.initialize({ …})
google.accounts.id.prompt(“gSignIn”, {…});
My workaround was to add the standard HTML DIVs using JQuery and then load in the script without using the JS API call at all. Something like this:
var gsign = ‘<div id=”g_id_onload” data-callback=”onGoogleSignIn” data-context=”signin” data-ux_mode=”popup” data-client_id=”CLIENT_ID HERE” data-auto_prompt=”false”>
var gSignButton = ‘<div id=”gSignIn” class=”g_id_signin” data-width=”280″ data-type=”standard” data-size=”large” data-theme=”outline” data-text=”sign_in_with”data-shape=”rectangular” data-logo_alignment=”left”>’
$(‘buttonsContainer’).append(gsign,gSignButton);
loadScript(‘https://accounts.google.com/gsi/client’);
‘loadScript’ is a custom function for loading the new Google Sign-in client.
The server-side is the same as before, and now it works on mobile devices (which previously didn’t work owing to the old way that Google used to display the popup used for signing in).