This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 5 years ago.
I am trying to integrate the google signing button onto my web application. Its my first time doing it, and I keep getting the following message in my console log...
auth2 is not defined
Also when I refresh the page the google button says "Sign In" instead of "Signed In"
Below is my code. Thanks!
<script>
gapi.load('auth2', function () {
auth2 = gapi.auth2.init();
// Sign the user in, and then retrieve their ID.
auth2.signIn().then(function () {
console.log(auth2.currentUser.get().getId());
});
});
if (auth2.isSignedIn.get()) {
var profile = auth2.currentUser.get().getBasicProfile();
console.log('ID: ' + profile.getId());
console.log('Full Name: ' + profile.getName());
console.log('Given Name: ' + profile.getGivenName());
console.log('Family Name: ' + profile.getFamilyName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
}
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('Full Name: ' + profile.getName());
console.log('Given Name: ' + profile.getGivenName());
console.log('Family Name: ' + profile.getFamilyName());
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>
Don't let Google API mislead you. The error is probably because of this line (and the code being in ('strict mode'):
auth2 = gapi.auth2.init();
as the error states that "auth2" is not defined (and you are not allowed to create variables in the global space while in strict mode). Declare it like:
var auth2 = gapi.auth2.init();
Same thing happening here gapi auth2 init failing with "Uncaught ReferenceError: auth2 is not defined".
Related
After playing around with google sign https://developers.google.com/identity/sign-in/web/sign-in. I wanted to clean up the code a bit by placing it in another file and maybe renaming them.
But somehow data-onsuccess would not work if I put the onSignIn function as an object's attribute.
I have something like this to give it a try
const google_auth = {};
google_auth.id_token = null;
google_auth.onSignIn = (googleUser) => {
const profile = googleUser.getBasicProfile();
const id_token = google_auth.id_token = googleUser.getAuthResponse().id_token;
console.log(profile, 'profile');
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('ID token: ' + id_token);
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
console.log(id_token.split('.'), 'id_token split');
};
then for html I tried
<div class="g-signin2" data-onsuccess="google_auth.onSignIn"></div>
the function will not be called though. If I just use the original code such as
const google_auth = {};
google_auth.id_token = null;
function onSignIn(googleUser) {
const profile = googleUser.getBasicProfile();
const id_token = google_auth.id_token = googleUser.getAuthResponse().id_token;
console.log(profile, 'profile');
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('ID token: ' + id_token);
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
console.log(id_token.split('.'), 'id_token split');
};
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Which works perfectly, I tried googling about data-onsuccess attributes but no one really talk much about this situation. Most people saying it doesn't work with the framework.
Thanks in advance for any help / suggestions.
This is the HTML:
<div id="button_google_login" class="customGPlusSignIn" onclick="startApp();">
<span class="dont_close" style="padding-left: 12px;">Sign In with Google</span>
</div>
JavaScript:
var googleUser = {};
var startApp = function() {
gapi.load('auth2', function(){
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: '[Secret].apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
// Request scopes in addition to 'profile' and 'email'
//scope: 'additional_scope'
});
attachSignin(document.getElementById('button_google_login'));
});
};
function attachSignin(element) {
console.log(element.id);
auth2.attachClickHandler(element, {},
function(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}, function(error) {
// error or break up
});
}
I need to click the button twice to start the Sign In process, what could be the problem? I also tried the normal non custom version and it worked how it should.
Thanks in advance!
I guess you copied the example from Google Documentation. There the startApp() function is called at the end of the body Tag. Therefore the click handler to the Google button is assigned, when the document has loaded. You changed the behaviour insofar as that the click handler is only assigned, when somebody clicks the button. Because of that, you have to click that button two times.
Why don't you want to do it like in the Google provided example?
Simply add <script>startApp();</script> before the closing </body> Tag and remove the onclick="startApp(); attribute from your button.
I would to a onClick event on a btn and then call a login function
function login() {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
Try to get the user's token I got:
Uncaught TypeError: profile.getAuthResponse is not a function
Where
profile = googleUser
This is my code:
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
console.log('Token id: ' + profile.getAuthResponse().id_token);
}
Nothing really special there.
I read on google doc that I should use the function getAuthResponse().id_token and not GoogleUser.getId() for security purposes.
In this question: Google access_token is undefined
Here Sharkos suggest to use gapi.auth.getToken().access_token but I got null
Any ideas why I got that error?
Try this
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
console.log('Token id: ' + googleUser.getAuthResponse().id_token);
}
You set var profile = googleUser.getBasicProfile(); Therefore, you can't use getAuthResponse() on getBasicProfile(). it has to be googleUser.getAuthResponse()
https://developers.google.com/identity/sign-in/web/reference#googleusergetauthresponseincludeauthorizationdata
I am integrating google sign-in in my web app. I followed the instructions from here. But I am unable to get any user information from the sign-in. The sign-in button works perfectly fine though.
<meta name="google-signin-client_id" content="3*****-c*******************.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-signin2 googleSignIn" data-onsuccess="onSignIn"></div>
I use these javascript functions:
if (auth2.isSignedIn.get()) {
var profile = auth2.currentUser.get().getBasicProfile();
console.log('ID: ' + profile.getId());
console.log('Full Name: ' + profile.getName());
console.log('Given Name: ' + profile.getGivenName());
console.log('Family Name: ' + profile.getFamilyName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
email=profile.getEmail();
}
}
This function results in an error: auth2 is not defined.
If I use window.onLoadCallback = function() before the function then it gives no error but also nothing in the log. If I use only this instead:
function onSignIn(googleUser) {
var id_token = googleUser.getAuthResponse().id_token;
console.log("done");
}
again I get no error but also nothing in the console log.
Place this code before if (auth2.isSignedIn.get()) it. Try to run it.
gapi.load('auth2', function () {
auth2 = gapi.auth2.init();
// Sign the user in, and then retrieve their ID.
auth2.signIn().then(function () {
console.log(auth2.currentUser.get().getId());
});
});
I've just added basic code from Google+ API docs.
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
gapi.auth.checkSessionState({session_state: null}, function(isUserNotLoggedIn){
if (isUserNotLoggedIn) {
console.log('Not logged in');
} else {
console.log('Logged in');
}
});
/*
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
*/
var id_token = googleUser.getAuthResponse().id_token;
//console.log("ID Token: " + id_token);
$.post('login.asp', 'idtoken=' + id_token, function(data){
//console.log('Passato a login.asp, idtoken=' + data);
});
}
I see it's not the way to use it, but how can I check if a user is logged in or not, in order to let him access authenticated user features?