How do I integrate google sign in to my website and collect the users details?
Question
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>
1 answers
solution1
0 2019-07-11 13:58:15
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.