Menu
I'm working on adding a Google Sign-In Button to a website. In the docs, Google offers two options, a "basic" button:
https://developers.google.com/identity/sign-in/web/sign-in
and a "custom" button using signin2.render():
https://developers.google.com/identity/sign-in/web/build-button
The problem I'm encountering is that the two buttons exhibit different behavior. If I sign in with either button, the button's "title" changes from "Sign In" to "Signed In" to reflect the sign-in status. However, if I now refresh the page, then the basic button retains the title "Signed In", whereas the custom button changes its title back to "Sign In", suggesting (incorrectly) that the sign-in status has changed through the page refresh.
If I manually check the sign-in status post-refresh in the browser console by running:
auth = gapi.auth2.getAuthInstance()
auth.isSignedIn.get()
I get true as a return, showing that the refresh indeed did not alter the sign-in status, contrary to the change in the button's title.
So my question is: how can I get the custom button to behave like the basic button, so that its title does not change on refresh? Another (related, I assume) behavior of the basic button that I like is that the button's "onsuccess" callback gets called on each page load (if the user is signed in), whereas the custom button does not do this. So I'd also like to change this behavior on the custom button to match that of the basic button. Any suggestions would be greatly appreciated!
The parameters I'm passing to render look as follows:
function renderButton() {
gapi.signin2.render('mybutton', {
'scope': 'profile email',
'width': 125,
'height': 40,
'longtitle': false,
'theme': 'light',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
465
To create a Google Sign-In button with custom settings, add an element to contain the sign-in button to your sign-in page, write a function that calls signin2. render() with your style and scope settings, and include the https://apis.google.com/js/platform.js script with the query string onload=YOUR_RENDER_FUNCTION .
Google Sign-in is a free service. To use Google sign-in you have to use Google's Firebase authentication service.
Create or select a Google APIs project. If you already have a project for the Sign In With Google button or Google One Tap, use the existing project and the web client ID. If your project doesn't have a Web application-type client ID, click Create credentials > OAuth client ID to create one.
Could you provide params that you're passing to the button? Could you confirm that there aren't any errors in JS console and there aren't any 400/403/404/4xx requests?
I've tested this functionality using following code and it seems to work perfectly fine (you have to replace YOUR_CLIENT_ID with your actual client_id).
<head>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
</head>
<body>
<script>
function onSuccess(googleUser) {
console.log('onSuccess!');
}
function onCustomSuccess(googleUser) {
console.log('onCustomSignIn!');
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
function onLoad() {
gapi.signin2.render('custom_signin_button', {
'onsuccess': onCustomSuccess
});
}
</script>
<div class="g-signin2" data-onsuccess="onSuccess"></div>
<div id="custom_signin_button"></div>
<a href="#" onclick="signOut();">Sign out</a>
<script src="https://apis.google.com/js/platform.js?onload=onLoad" async defer></script>
</body>
</html>
Edit: Declaring base scope as head's meta tag is the best solution.
<meta name="google-signin-scope" content="profile email">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
