我使用Google登录JavaScript。
单击按钮后我想导入JS。问题:仅在第二次单击按钮
时仅显示弹出登录谷物我的代码:
function clickButton(){
$.getScript( "https://apis.google.com/js/client:plusone.js?onload=onLoadGoogleLogin");
}
function onLoadGoogleLogin()
{
var initializedGoogleCallback = false;
gapi.client.setApiKey('AIzaSyBhV6vP_D_I7ldL1YIU7LJUGtSxJ55ievw');
var myParams = {
'callback': function googleLoginCallback(result) {
debugger;
if (!initializedGoogleCallback) {
if (result) {
if (result['error'] == undefined) {
initializedGoogleCallback = true;
gapi.auth.setToken(result);
gapi.client.load('oauth2', 'v2', function () {
var request = gapi.client.oauth2.userinfo.get();
request.execute(googleLoginDataUserCallback);
});
}
} else {
alert('Empty authResult');
}
}
},
'clientid': 'xxxxx-4kragpsm6jolann6d9t74crpkthch0iq.apps.googleusercontent.com',
'cookiepolicy': 'single_host_origin',
'requestvisibleactions': 'http://schemas.google.com/AddActivity',
'scope': 'https://www.googleapis.com/auth/plus.login'
}
开始使用Google登录OAuth:Web开发人员的逐步指南
- 创建一个Google API控制台项目:转到Google API控制台:Google Cloud平台通过单击"选择一个项目"来创建一个新项目。下拉列表页面,然后单击"新项目"。给您的项目一个名字,然后单击"创建"。
- 启用Google身份平台API:从仪表板中,单击"启用API和服务",然后搜索" Google身份平台API"。单击"启用"以启用您的项目的API。
- 创建OAuth凭据:单击左侧菜单中的"凭据"。单击"创建凭据",然后选择" OAUTH客户端ID"。选择" Web应用程序"作为应用程序类型,并为您的客户ID提供一个名称。添加您的授权JavaScript起源并重定向URI。这些应该与Web应用程序的域和路径。单击"创建"以创建您的OAuth客户端ID。
- 将Google登录API添加到您的网页:将以下脚本标签添加到网页的头部:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Google Sign in</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function onSignIn(googleUser) {
const responsePayload = decodeJwtResponse(googleUser.credential);
let google_email = responsePayload.email
console.log("google_email - ",google_email)
}
function decodeJwtResponse(data) {
let tokens = data.split(".");
return JSON.parse(atob(tokens[1]))
}
</script>
</head>
<body>
<div class="login">
<div id="g_id_onload" data-client_id="enter-your-client-id"
data-context="signin" data-ux_mode="popup" data-login_uri="" data-callback="onSignIn"
data-itp_support="true">
</div>
<div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="outline" data-text="signin"
data-size="large" data-logo_alignment="left">
</div>
</div>
</div>
</body>
</html>
查找代码:github -https://github.com/sravankumarraju/googlesignin