I'm working on a website where the client has asked for an option to allow signup/login using Google and Facebook accounts. How can I extract the email address from a user's Google profile for storing in database?
Here is my code. The problem is that I am not getting the user profile completely. Instead, I am receiving just user name.
try
{
WebClient client = new WebClient();
var urlProfile = "https://www.googleapis.com/oauth2/v1/userinfo?access_token="
+ access_token;
string outputData = client.DownloadString(urlProfile);
GoogleUserOutputData serStatus =
JsonConvert.DeserializeObject<GoogleUserOutputData>(outputData);
if (serStatus != null)
{
return serStatus;
// You will get the user information here.
}
}
catch (Exception ex)
{
//catching the exception
}
return null;
Here is a way to receive data (email, etc.) in JavaScript. At the end it shows an alert with data. (You can store this data in a database.) It's a complete working example with a Google button.
<html>
<head>
<title>Demo: Getting an email address using the Google+ Sign-in button</title>
<!-- Include the API client and Google+ client. -->
<script src = "https://plus.google.com/js/client:platform.js" async defer></script>
</head>
<body>
<!-- Container with the Sign-In button. -->
<div id="gConnect" class="button">
<button class="g-signin"
data-scope="email"
data-clientid="Your_Client_ID"
data-callback="onSignInCallback"
data-theme="dark"
data-cookiepolicy="single_host_origin">
</button>
<!-- Textarea for outputting data -->
<div id="response" class="hide">
<textarea id="responseContainer" style="width:100%; height:150px"></textarea>
</div>
</div>
</body>
<script>
/**
* Handler for the signin callback triggered after the user selects an account.
*/
function onSignInCallback(resp) {
gapi.client.load('plus', 'v1', apiClientLoaded);
}
/**
* Sets up an API call after the Google API client loads.
*/
function apiClientLoaded() {
gapi.client.plus.people.get({userId: 'me'}).execute(handleEmailResponse);
}
/**
* Response callback for when the API client receives a response.
*
* #param resp The API response object with the user email and profile information.
*/
function handleEmailResponse(resp) {
var primaryEmail;
var name;
var gender;
for (var i=0; i < resp.emails.length; i++) {
if (resp.emails[i].type === 'account')
primaryEmail = resp.emails[i].value;
if (resp.displayName != null)
name = resp.displayName;
gender = resp.gender;
}
document.getElementById('responseContainer').value = 'Primary email: ' +
primaryEmail + '\n\nFull Response:\n' + JSON.stringify(resp);
ShowAlert("Email: "+primaryEmail +" "+"Name: "+ resp.displayName +" "+"Gender: "+gender);
}
</script>
</html>
For further information and detail you can (should) read this link:
Getting people and profile information
Documentation is the key; please check it completely.
https://developers.google.com/identity/sign-in/web/sign-in
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<div class="g-signin2" data-onsuccess="onSignIn"></div>
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.
}
Sign out
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>
Related
I want to integrate the google sign in button onto my website. I know html but I am unsure on php and java script. Ultimately, I would like the google sign in to sign in the user and give me their information so i can store it on my database on phpmyadmin securely. I have visited the google tutorial for this but found it did not explain how to collect the users information fully. I have attempted to follow this and so far I have this but it is far from what it should be like. I have watched other tutorials such as this one. However i find they all do not follow the googles instructions as for example you have to download a google API in them, however on the google website it does not mention downloading anything.
Below is the code of what i have managed to do so far by using the google tutorial:
<html lang="en">
<head>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="808271051181-424qcdq0emrd0pd77frfiuacvcetp58t.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('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>
</body>
</html>
You might be able to get all data from the profile in javascript, but I wanted to get all their data into php variables so that I could store in my database. To do this I sent the google id token as post data from javascript (how to do that here).
You still need all the other google sign in code you have, but I replaced onSingIn with this:
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
document.getElementById("userid").value = googleUser.getAuthResponse().id_token;
document.getElementById("userid").form.submit();
}
Also add the form code in the body:
<form action="login.php" method="post">
<input type="hidden" name="id" id="userid">
</form>
You then need another file I called it login.php which contains the following function:
function get_var($var)
{
$id = $_POST["id"]; // id from google
$id_token = file("https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=" . $id); // decrypted id
foreach ($id_token as $part) {
// part is a factor of the user such as name or email
// remove unecessary charcters
$peice = str_replace("\"", "", $part);
$peice = str_replace(",", "", $peice);
$peice = substr($peice, 0, strpos($peice, ":") + 2);
if (strpos($peice, $var) !== false) {
$var = str_replace("\"", "", $part);
$var = str_replace(",", "", $var);
$var = substr($var, strpos($var, ":") + 2);
return $var;
}
}
}
With this you should be able to get all the information you need. Example uses:
$name = trim(get_var("name"));
$email = trim(get_var("email"));
To view all the accessible information either print out $id_token in get_var or go to https://www.googleapis.com/oauth2/v3/tokeninfo?id_token= adding an id token at the end.
More information about getting data from an ID token here.
I'm trying to add a login/logout to/from google by their guide:
https://developers.google.com/identity/sign-in/web/sign-in
But I'm facing some problems.
index.html:
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="**my-google-api-key**.apps.googleusercontent.com">
<script>
gapi.load('auth2',function () {
gapi.auth2.init();
});
</script>
app.component.html:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Sign out
app.component.ts:
public onSignIn(googleUser):void {
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());
}
public signOut():void {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
Problems:
After logging in succussfully, onSignIn function does not get called so nothing is printed but the signIn is working.
In the signOut function I have error: "Cannot find name 'gapi'." but the signout is working.
Question:
Google tells us not to use the googleUser.getBasicProfile().getId() as the user ID but use the ID Token intead: googleUser.getAuthResponse().id_token.sub.
Why?
I solved it by using NgZone. Not sure if it's the best way but it's the best until I'll find another one :)
import { Component, NgZone } from '#angular/core';
......
......
constructor(ngZone: NgZone) {
window['onSignIn'] = (user) => ngZone.run(() => this.onSignIn(user));
}
......
......
onSignIn(googleUser) {
//now it gets called
......
}
you can simply add your onSignIn method to window to get called, by following code.
constructor() {
const _self = this;
window['onSignIn'] = function (user) {
_self.onSignIn(user);
};
}
onSignIn(googleUser) {
// sign in code
}
may this link help for your last question.
Authenticate with a backend server
they described:
Warning: Do not accept plain user IDs, such as those you can get with the GoogleUser.getId() method, on your backend server. A modified
client application can send arbitrary user IDs to your server to
impersonate users, so you must instead use verifiable ID tokens to
securely get the user IDs of signed-in users on the server side.
mrgoos answer helped me, but we can make it cleaner without NGZone:
constructor() {
window['onSignIn'] = this.onSignIn;
}
I'm implementing "Google Sign In" into my website to handle all user authentication etc.. I will have a back-end database that I use to store information against users to keep track of their profile and their actions etc..
I've followed the Google Developer documentation and have got a "Google Sign In" button on a web page and when this button is clicked I choose my account and am signed in and the id_token goes off and is authenticated with my back-end server successfully. The only problem I'm now having is that when I refresh the page the button is back to "Sign In" rather than staying signed in, is this normal behaviour or is there something I'm missing? I don't want users to have to have to sign in again whenever the page changes.
On a side note I have managed to store the id_token from successfully logging into Google in localStorage and then using this id_token to re-authenticate with the back-end server automatically (as you can see in the commented out code) but this doesn't obviously automatically change the status of the "Google Sign In" button which would confuse users on the client-side.
Can anyone shed any light on this problem please?
Not signed in:
After signing in (doesn't currently stay like this after a page refresh):
login.html:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/base.css"/> <!-- Base CSS -->
<script src="./js/all.js"></script> <!-- All JavaScript file -->
<script src="./js/Logger.class.js"></script> <!-- Logger class -->
<script src="./bower_components/jquery/dist/jquery.min.js"></script> <!-- jQuery -->
<script src="./js/gSignIn.js"></script>
<!-- Polymer -->
<script src="./bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <!-- Web Components Import -->
<!-- Element Imports -->
<link rel="import" href="./bower_components/paper-button/paper-button.html"/>
<link rel="import" href="./bower_components/google-signin/google-signin.html"/>
</head>
<body>
<google-signin id="gSignIn" client-id="--- REMOVED FOR PRIVACY ---" scopes="profile email openid"></google-signin>
Sign Out
</body>
</html>
gSignIn.js:
/**
* Google Sign In JavaScript
*/
$(document).ready(function() {
var logger = new Logger("gSignIn.js", false); // logger object
var id_token = null;
logger.log("Load", "Successful");
// Try to automatically login
// if (localStorage !== null) { // If local storage is available
// if (localStorage.getItem("gIDToken") !== null) { // If the Google ID token is available
// id_token = localStorage.getItem("gIDToken");
// // Send off AJAX request to verify on the server
// $.ajax({
// type: "POST",
// url: window.api.url + "googleauth/verify/",
// data: { "id_token": id_token },
// success: function (data) {
// if (!data.error) { // If there was no error
// logger.log("Google SignIn", "Successfully signed in!");
// }
// }
// });
// }
// }
/**
* EVENT: Google SignIn success
*/
$("#gSignIn").on("google-signin-success", function () {
id_token = getGoogleAuthResponse().id_token;
var profile = getGoogleProfile();
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());
// Send off AJAX request to verify on the server
$.ajax({
type: "POST",
url: window.api.url + "googleauth/verify/",
data: { "id_token": id_token },
success: function (data) {
if (!data.error) { // If there was no error
logger.log("Google SignIn", "Successfully signed in!");
// Store the id_token
if (localStorage !== null) { // If localStorage is available
localStorage.setItem("gIDToken", id_token); // Store the id_token
}
}
}
});
});
$("#signOut").click(function () {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log("User signed out.");
});
});
/**
* Get Google Profile
*
* #returns object
*/
var getGoogleProfile = function () {
var profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile();
return profile;
};
/**
* Get Google Auth Response
*
* #returns object
*/
var getGoogleAuthResponse = function () {
var response = gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse();
return response;
};
});
Thanks!
I had the same problem and, after ensuring third party cookies were enabled, it came down to the hostname, localhost in this case.
In the end, I had to fake a domain using /etc/hosts, ensure google developers dashboard has that domain whitelisted, and start using that domain instead of localhost.
I can only assume that gapis don't like localhost, even though it's whitelisted in my google developers dashboard for the account I'm using. If you do manage to get localhost to work, do give me a shout!
Another way to do this is to access localhost from a nonstandard port (not 80). I managed to get around this headache by using an nginx proxy from port 80 to 81:
server {
listen 81;
location / {
proxy_pass http://localhost:80;
}
}
i have take google signin in my website :
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
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('Image URL: ' + profile.getImageUrl());
//console.log('Name: ' + profile.getName());
//console.log('Email: ' + profile.getEmail());
var user_uname = profile.getName();
var user_email = profile.getEmail();
alert(user_uname);
}
</script>
and here is a button to login google:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
i want to give user google signin but the problem is whenever page is load onSignIn() function is called automatically.
i want it only on button click. can anybody help me?
Best solution is to render sign-in button only when user is not signed in.
<html>
<head>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
</head>
<body>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
var user_name = profile.getName();
alert(user_name);
}
function onLoad() {
gapi.load('auth2,signin2', function() {
var auth2 = gapi.auth2.init();
auth2.then(function() {
// Current values
var isSignedIn = auth2.isSignedIn.get();
var currentUser = auth2.currentUser.get();
if (!isSignedIn) {
// Rendering g-signin2 button.
gapi.signin2.render('google-signin-button', {
'onsuccess': 'onSignIn'
});
}
});
});
}
</script>
<div id="google-signin-button"></div>
<script src="https://apis.google.com/js/platform.js?onload=onLoad" async defer></script>
</body>
</html>
I done it by declaring global js variable as false
var isFirstGoogle = 0;
Then to check this variable
if(isFirstGoogle)
{
//wont enter here first time
}
isFirstGoogle = 1;
So next time when I click on button the above method will be called as now isFirstGoogle = 1;
Hope this help!! It's a temporary thing I know but it's working for me.
I am using google api in my website to get user details from google plus api.I click signin button to login and click (permission for view profile information)accept.It's everything OK but the browser console show one error.
"Callback function named "signinCallback" not found" cb=gapi.loaded_0:492
Return callback function not working.How to solve that problem?
My google plus api code:
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
function signinCallback(authResult) {
alert("login success");
if (authResult['status']['signed_in']) {
// Update the app to reflect a signed in user
// Hide the sign-in button now that the user is authorized, for example:
document.getElementById('signinButton').setAttribute('style',
'display: none');
var request = gapi.client.plus.people.get({
'userId' : 'me'
});
request.execute(function(resp) {
var email = '';
if(resp['emails'])
{
for(var i = 0; i < resp['emails'].length; i++)
{
if(resp['emails'][i]['type'] == 'account')
{
email = resp['emails'][i]['value'];
}
}
}
alert("email ="+email);
getUserMail(email);
console.log('ID: ' + resp.id);
console.log('Display Name: ' + resp.displayName);
console.log('Image URL: ' + resp.image.url);
console.log('Profile URL: ' + resp.url);
});
} else {
alert("login unsuccessful");
// Update the app to reflect a signed out user
// Possible error values:
// "user_signed_out" - User is signed-out
// "access_denied" - User denied access to your app
// "immediate_failed" - Could not automatically log in the user
console.log('Sign-in state: ' + authResult['error']);
}
}
Html code:
<span id="signinButton">
<span class="g-signin"
data-callback="signinCallback"
data-clientid="*******.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-scope="profile">
</span>
</span>
</span>
You are incorrectly defining your Google parameters within you span element.
You should specify your Google log-in parameters as follows:
<meta name="google-signin-clientid" content="xxxxxxxxxxxxxx.apps.googleusercontent.com" />
<meta name="google-signin-cookiepolicy" content="single_host_origin" />
<meta name="google-signin-callback" content="signinCallback" />
<meta name="google-signin-requestvisibleactions" content="https://schema.org/AddAction" />
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/plus.login" />
<div class="g-signin"><!-- Your button here --></div>
See the example in the Google+ documentation here (see step 4)