1. Scripts : Google Sign In CDN Script
<script src="https://accounts.google.com/gsi/client" async></script>
Paste this code in your <head>
2. Html : Rendering The Google Sign In Button
<div class="signBtn">
<div class="g_id_signin"
data-type="standard"
data-shape="circle"
data-theme="outline"
data-text="continue_with"
data-size="large"
data-logo_alignment="left">
</div>
<div id="g_id_onload"
data-client_id="CLIENT_ID"
data-context="signin"
data-ux_mode="popup"
data-callback="handle"
data-nonce=""
data-auto_select="true"
data-itp_support="true">
</div>
The <div> with class ‘signBtn’ helps modify the appearance of the “Google Sign In’ button in your website while the <div> with id ‘g_id_onload’ helps modify the sign in behaviour. data-ux_mode=popup will give a list of emails in a modal while ‘handle’ in data-callback=handle is the function name which will handle the response after sign in.
3. Javascript: Handling Responses
<form style="display: none;" id="googleForm" method="post">. <input placeholder="id_token" type="text" id="id_token" name="id_token"></form>
function handle(response) {
document.getElementById('id_token').value = response.credential;
document.getElementById('googleForm').submit();
}
response.credential contains the a JWT TOKEN while the response object contains Email, Name, etc.
4. Decrypting JWT Token
response.credential will include a JWT Token.
Using Google’s JWT Token verification API, we can verify the JWT token recieved from response.credential and the get the user’s credential from that API.
This should be done in the backend. Security issues (with the website, not with user’s account) will be there if this is done using Javascript.
Example, anyone can put their own response object using console.
5. Javascript: Fetch User Credentials From JWT Token
const data = fetch("https://oauth2.googleapis.com/tokeninfo?id_token=" + response.credential);
const userCredentials = JSON.parse(data);
console.log(userCredentials);
This code is just an example. Similar code can be used in backend. You can pass the JWT Token to Google’s API. If the token is valid, you will recieve the user credentials such as name, email, etc. in the variable data.
6. PHP: Fetch User’s Credential From Jwt Token
$id_token = $_POST['id_token'];
$googleResult = file_get_contents('https://oauth2.googleapis.com/tokeninfo?id_token='.$id_token);
$googleResult = json_decode($googleResult,true);
if($googleResult['aud']=="CLIENT_ID") {
$email = $googleResult['email'];
$name = $googleResult['name'];
$profile = $googleResult['picture'];
$pass = $googleResult['sub'];
echo '<script>localStorage.setItem("registered","true");</script>';
}
else {
echo '<script>alert("AUD issue.");
}
This is an example of obtaining user credentials from JWT Token in PHP. It get’s the content from Google’s API using file_get_contents, converts it into json using json_decode and matches the aud key in that json with your client id. If it matches, you get the credentials & if it doesn’t then throw an error.
7. Obtain 'Oauth 2.0 Client ID'
Visit Google Developer's Console
https://shorturl.at/jkzHT
1. Create a new project
2. Go to APIs & Services > Credentials
3. Configure Consent Screen
4. After filling in the form, repeat the second step and obtain OAuth 2.0 Client ID and replace that with the instances where 'CLIENT_ID' is used in the code