Javascript 为什么我的Google OAuth 2登录按钮不起作用？
我试图通过使用google登录按钮实现应用程序的登录页面来了解OAuth 2。但是当我单击该按钮时，该按钮没有响应或调用signInCallBack（），我不知道问题出在哪里。。我已经尝试添加onClick操作，而不是数据回调，但没有成功Javascript 为什么我的Google OAuth 2登录按钮不起作用？,javascript,html,css,oauth-2.0,google-oauth,Javascript,Html,Css,Oauth 2.0,Google Oauth,我试图通过使用google登录按钮实现应用程序的登录页面来了解OAuth 2。但是当我单击该按钮时，该按钮没有响应或调用signInCallBack（），我不知道问题出在哪里。。我已经尝试添加onClick操作，而不是数据回调，但没有成功 <!DOCTYPE html> <html> <head> <!--LOAD PRE-REQUISITES FOR GOOGLE SIGN IN --> <script src="https:
<!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>
.谷歌按钮{
高度：40px；
边框宽度：0；
背景：白色；
颜色：#7373；
边界半径：5px；
空白：nowrap；
盒影：1px 1px 0px 1px rgba（0,0,0,0.05）；
过渡属性：背景色，框阴影；
过渡时间：150ms；
过渡定时功能：易进易出；
填充：0；
}
.google按钮图标{
显示：内联块；
垂直对齐：中间对齐；
保证金：8px 0 8px 8px；
宽度：18px；
高度：18px；
框大小：边框框；
}
.google-button图标--plus{
宽度：27px；
}
.google-button\u文本{
显示：内联块；
垂直对齐：中间对齐；
填充：0 24px；
字体大小：14px；
字体大小：粗体；
字体系列：“Roboto”，arial，无衬线；
}
html，正文{
身高：100%；
}
身体{
背景色：#f0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
按钮~按钮{
左边距：20px；
}
使用谷歌登录
函数signInCallback（authResult）{
console.log（“此处”）；
if（authResult['code']）{
//现在用户已获得授权，请隐藏“登录”按钮
$（'signinButton'）.attr（'style'，'display:none'）；
//将一次性使用代码发送到服务器，如果服务器响应，将“登录成功”消息写入网页，然后重定向回主页
$.ajax({
键入：“POST”，
url:“/gconnect？state={{state}}”，
processData:false，
数据：authResult['code']，
contentType:'应用程序/八位字节流；字符集=utf-8'，
成功：功能（结果）{
//如有必要，处理或验证服务器响应。
如果（结果）{
$（'#result'）.html（'登录成功！'+result+'重定向…'））
setTimeout（函数（）{
window.location.href=“/restaurant”；
}, 4000);
}else if（authResult['error']）{
log（'出现错误：'+authResult['error']）；
}否则{
$（'#result'）.html（'未能进行服务器端调用。请检查您的配置和控制台'）；
}
}
});
}
}
<!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>
4234760167137-vud910b6hg4o6svll814nbrrr07mp3qt.apps.googleusercontent.com