Save Google Oauth Profile Image as Base64 JavaScript - javascript

I need to save that profile picture returned from the google OAuth as base 64.
function Google_signIn(googleUser) {
const profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId());
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
console.log('JSON: ' + profile._json.image.url());
}
from this function, I can get the image URL, but I want to save the image in Base64.
This is a example URL.

Related

how to trigger google onSignIn data-onsuccess without global onSignIn function?

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.

How to validate gmail access token on server side

I want to validate gmail access token on sever
(ie. in action of a controller).
I am able to get access token by below code:
now I want to validate this access_token (received by onSignIn
function) by c# code on sever side.
I am sending email id & access_token to the sever by ajax call.
i have no idea what to do next , please help me. Thanks in advance
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
idToken = googleUser.Zi.access_token
id = profile.getId();
console.log('ID: ' + profile.getId());
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
ValidateAccessToken(id, idToken);
}

Google Sign In get user token

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

How to detect Google+ user logged in

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?

Why do I keep getting a auth2 is not defined? [duplicate]

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".

Categories

Resources