I want the user to be able to sign in with his Google account in his web browser. However, the data-onsuccess method isn't being called.
I uploaded a .html file with the sign in code to my webspace, created a Google API project with the relevant settings. I can see see login button. I can click it and input my Google account data and allow my application to access my account. However, the data-onsuccess method isn't called and so I cannot react to the successful login.
I tried the login with the umodified example code from Google and my own code where I added some debugging to see if JS is working at all:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="CORRECT_VALUE_HERE.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<title>Google sign in test</title>
</head>
<body>
<h1>Google sign in test</h1>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<br>
<a href="#" onclick="signOut();">Sign out</a>
<br>
<a href="index.html">Back</a>
<br>
<a href="#" onclick="someTest()">JavaScript Test</a>
<br>
<ul>
<li id="gID">Google ID, temporary</li>
<li id="gFullName">Full Name</li>
<li id="gGivenName">Given Name</li>
<li id="gFamilyName">FamilyName</li>
<li id="gImg">Image URL</li>
<li id="gEMail">E-Mail</li>
<li id="gToken">Google Token, permanent</li>
</ul>
<script>
function onSignIn(googleUser) {
alert('in onSignIn');
// Useful data for your client-side scripts:
var profile = googleUser.getBasicProfile();
document.getElementById('gID').textContent = profile.getId();
document.getElementById('gFullName').textContent = profile.getName();
document.getElementById('gGivenName').textContent = profile.getGivenName();
document.getElementById('gFamilyName').textContent = profile.getFamilyName();
document.getElementById('gImg').textContent = profile.getImageUrl();
document.getElementById('gEMail').textContent = profile.getEmail();
// The ID token you need to pass to your backend:
var id_token = googleUser.getAuthResponse().id_token;
document.getElementById('gToken').textContent = id_token;
};
function someTest() {
alert('js is working');
var x = {};
x.getBasicProfile = function() {
var y = {};
y.getId = function() { return 'fake id'; };
y.getName = function() { return 'fake fake full name'; };
y.getGivenName = function() { return 'fake fake given name'; };
y.getFamilyName = function() { return 'fake fake family name'; };
y.getImageUrl = function() { return 'fake image'; };
y.getEmail = function() { return 'fake e-mail'; };
return y;
};
x.getAuthResponse = function() {
var z = {}
z.id_token = 'fake id token';
return z;
};
onSignIn(x);
};
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
};
</script>
</body>
</html>
I don't see any error messages in my browser or my http server. Can anybody tell me what I am doing wrong?
Things I already tried/checked:
- I check that my client_id in the meta-tag is correct, several times.
- I am sure I set the correct "Authorized JavaScript origin". Otherwise I would see and error message during the loging screen.
- I am sure I am using a correct login. I can can see my example application among the authorized sites in my google account settings.
- I tried moving the script-tag above the div-tags. It doesn't matter. I made sure onSignIn() is a top level JS function.
- I tried hosting this .html file somewhere else (in case Heroku blocks this process somehow). It didn't help.
- I tried this in up to date Firefox and Chrome on Linux and Windows. No difference.
