Menu
I'm trying to implement the standard Google Sign-In option on a website, as they suggest here: https://developers.google.com/identity/sign-in/web/.
As a beginning, I thought I'd just follow the basic instructions (https://developers.google.com/identity/sign-in/web/devconsole-project) and I'm using nothing more than their sample code:
<html lang="en">
<head>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
<script>
function onSignIn(googleUser) {
// Useful data for your client-side scripts:
var profile = googleUser.getBasicProfile();
console.log("ID: " + profile.getId()); // Don't send this directly to your server!
console.log("Name: " + profile.getName());
console.log("Image URL: " + profile.getImageUrl());
console.log("Email: " + profile.getEmail());
// The ID token you need to pass to your backend:
var id_token = googleUser.getAuthResponse().id_token;
console.log("ID Token: " + id_token);
};
</script>
</body>
</html>
(obviously with the client id replaced by the one generated from their developer console for my site). I entered the site IP address as a valid JavaScript origin when creating the Client ID, as described. However, the login button doesn't even appear.
I feel like an idiot, because I'm sure there's some obvious step that I'm missing, but I just haven't been able to figure it out. Any recommendations?
563
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 .
On your device, touch and hold the Home button or say "Hey Google." If the Google Assistant is off, you'll be asked to turn it on. Ask a question or say a command.
Google Sign-in is a free service.
Might be too late to respond, but here is the solution.
Remove "async defer" from loading platorm.js.
53
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
