I'm trying to learn about OAuth 2 by implementing a login page to my application with google sign-in button. but the button doesn't response or call the signInCallBack() when I click on it, and I don't know what is the problem? .. I already have tried to add onClick action instead of data-callback but this didn't work.
<!DOCTYPE html>
<html>
<head>
<!--LOAD PRE-REQUISITES FOR GOOGLE SIGN IN -->
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</script>
<script src="//apis.google.com/js/platform.js?onload=start"> </script>
<!-- END PRE-REQUISITES FOR GOOGLE SIGN IN -->
<style>
.google-button {
height: 40px;
border-width: 0;
background: white;
color: #737373;
border-radius: 5px;
white-space: nowrap;
box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.05);
transition-property: background-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-in-out;
padding: 0;
}
.google-button__icon {
display: inline-block;
vertical-align: middle;
margin: 8px 0 8px 8px;
width: 18px;
height: 18px;
box-sizing: border-box;
}
.google-button__icon--plus {
width: 27px;
}
.google-button__text {
display: inline-block;
vertical-align: middle;
padding: 0 24px;
font-size: 14px;
font-weight: bold;
font-family: 'Roboto',arial,sans-serif;
}
html, body {
height: 100%;
}
body {
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
button ~ button {
margin-left: 20px;
}
</style>
</head>
<body>
<button type="button" id="signinButton" class="google-button">
<span class="google-button__icon">
<svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg"><path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z" id="Shape" fill="#EA4335"/><path d="M20.6 102.4c20.3 15.8 40.6 31.5 61 47.3-8 23.3-8 49.2 0 72.4-20.3 15.8-40.6 31.6-60.9 47.3C1.9 232.7-3.8 189.6 4.4 149.2c3.3-16.2 8.7-32 16.2-46.8z" id="Shape" fill="#FBBC05"/><path d="M361.7 151.1c5.8 32.7 4.5 66.8-4.7 98.8-8.5 29.3-24.6 56.5-47.1 77.2l-59.1-45.9c19.5-13.1 33.3-34.3 37.2-57.5H186.6c.1-24.2.1-48.4.1-72.6h175z" id="Shape" fill="#4285F4"/><path d="M81.4 222.2c7.8 22.9 22.8 43.2 42.6 57.1 12.4 8.7 26.6 14.9 41.4 17.9 14.6 3 29.7 2.6 44.4.1 14.6-2.6 28.7-7.9 41-16.2l59.1 45.9c-21.3 19.7-48 33.1-76.2 39.6-31.2 7.1-64.2 7.3-95.2-1-24.6-6.5-47.7-18.2-67.6-34.1-20.9-16.6-38.3-38-50.4-62 20.3-15.7 40.6-31.5 60.9-47.3z" fill="#34A853"/></svg>
</span>
<span data-scope="openid email"
data-clientid="806553823694-6du09kl3dfjk7s294i4gims2p0kh2fpu.apps.googleusercontent.com"
data-redirecturi="postmessage" data-accesstype="offline" data-cookiepolicy="single_host_origin"
data-callback="signInCallback" data-approvalprompt="force">
</span>
<span class="google-button__text">Sign in with Google</span>
</button>
<div id="result"></div>
<script type="text/javascript">
function signInCallback(authResult) {
console.log("Here");
if (authResult['code']) {
// Hide the sign-in button now that the user is authorized
$('#signinButton').attr('style', 'display: none');
// Send the one-time-use code to the server, if the server responds, write a 'login successful' message to the web page and then redirect back to the main restaurants page
$.ajax({
type: 'POST',
url: '/gconnect?state={{STATE}}',
processData: false,
data: authResult['code'],
contentType: 'application/octet-stream; charset=utf-8',
success: function (result) {
// Handle or verify the server response if necessary.
if (result) {
$('#result').html('Login Successful!</br>' + result + '</br>Redirecting...')
setTimeout(function () {
window.location.href = "/restaurant";
}, 4000);
} else if (authResult['error']) {
console.log('There was an error: ' + authResult['error']);
} else {
$('#result').html('Failed to make a server-side call. Check your configuration and console.');
}
}
});
}
}
</script>
</body>
</html>
Made changes in code :
<!DOCTYPE html>
<html>
<head>
<!--LOAD PRE-REQUISITES FOR GOOGLE SIGN IN -->
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</script>
<script src="https://apis.google.com/js/api:client.js"></script>
<!-- END PRE-REQUISITES FOR GOOGLE SIGN IN -->
<style>
.google-button {
height: 40px;
border-width: 0;
background: white;
color: #737373;
border-radius: 5px;
white-space: nowrap;
box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.05);
transition-property: background-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-in-out;
padding: 0;
}
.google-button__icon {
display: inline-block;
vertical-align: middle;
margin: 8px 0 8px 8px;
width: 18px;
height: 18px;
box-sizing: border-box;
}
.google-button__icon--plus {
width: 27px;
}
.google-button__text {
display: inline-block;
vertical-align: middle;
padding: 0 24px;
font-size: 14px;
font-weight: bold;
font-family: 'Roboto',arial,sans-serif;
}
html, body {
height: 100%;
}
body {
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
button ~ button {
margin-left: 20px;
}
</style>
</head>
<body>
<button type="button" id="signinButton" class="google-button">
<span class="google-button__icon">
<svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg"><path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z" id="Shape" fill="#EA4335"/><path d="M20.6 102.4c20.3 15.8 40.6 31.5 61 47.3-8 23.3-8 49.2 0 72.4-20.3 15.8-40.6 31.6-60.9 47.3C1.9 232.7-3.8 189.6 4.4 149.2c3.3-16.2 8.7-32 16.2-46.8z" id="Shape" fill="#FBBC05"/><path d="M361.7 151.1c5.8 32.7 4.5 66.8-4.7 98.8-8.5 29.3-24.6 56.5-47.1 77.2l-59.1-45.9c19.5-13.1 33.3-34.3 37.2-57.5H186.6c.1-24.2.1-48.4.1-72.6h175z" id="Shape" fill="#4285F4"/><path d="M81.4 222.2c7.8 22.9 22.8 43.2 42.6 57.1 12.4 8.7 26.6 14.9 41.4 17.9 14.6 3 29.7 2.6 44.4.1 14.6-2.6 28.7-7.9 41-16.2l59.1 45.9c-21.3 19.7-48 33.1-76.2 39.6-31.2 7.1-64.2 7.3-95.2-1-24.6-6.5-47.7-18.2-67.6-34.1-20.9-16.6-38.3-38-50.4-62 20.3-15.7 40.6-31.5 60.9-47.3z" fill="#34A853"/></svg>
</span>
<span data-scope="openid email"
data-clientid="806553823694-6du09kl3dfjk7s294i4gims2p0kh2fpu.apps.googleusercontent.com"
data-redirecturi="postmessage" data-accesstype="offline" data-cookiepolicy="single_host_origin"
data-callback="signInCallback" data-approvalprompt="force">
</span>
<span class="google-button__text">Sign in with Google</span>
</button>
<div id="result"></div>
<script type="text/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: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
// Request scopes in addition to 'profile' and 'email'
//scope: 'additional_scope'
});
attachSignin(document.getElementById('signinButton'));
});
};
function attachSignin(element) {
console.log(element.id);
auth2.attachClickHandler(element, {},
function(googleUser) {
//document.getElementById('name').innerText = "Signed in: " +
googleUser.getBasicProfile().getName();
signInCallback();
}, function(error) {
alert(JSON.stringify(error, undefined, 2));
});
}
function signInCallback(authResult) {
console.log("Here");
if (authResult['code']) {
// Hide the sign-in button now that the user is authorized
$('#signinButton').attr('style', 'display: none');
// Send the one-time-use code to the server, if the server responds, write a 'login successful' message to the web page and then redirect back to the main restaurants page
$.ajax({
type: 'POST',
url: '/gconnect?state={{STATE}}',
processData: false,
data: authResult['code'],
contentType: 'application/octet-stream; charset=utf-8',
success: function (result) {
// Handle or verify the server response if necessary.
if (result) {
$('#result').html('Login Successful!</br>' + result + '</br>Redirecting...')
setTimeout(function () {
window.location.href = "/restaurant";
}, 4000);
} else if (authResult['error']) {
console.log('There was an error: ' + authResult['error']);
} else {
$('#result').html('Failed to make a server-side call. Check your configuration and console.');
}
}
});
}
}
</script>
<script>startApp();</script>
</body>
</html>
Here is reference document :
https://developers.google.com/identity/sign-in/web/build-button
Note : You need to get client id from project. it will be something like this
4234760167137-vud910b6hg4o6svll814nbrrr07mp3qt.apps.googleusercontent.com