我有一个 html 文件，其中包含“使用 google plus 登录”按钮。
<div class="sub_but"> <a href="javascript:void(0)" onclick="googlepluslogin();" class="googleplus_but" ><i class="fa fa-google-plus"></i> Sign in with Google Plus</a> </div>
当我单击此按钮时，我需要从 google 获取“用户名、电子邮件”，并且需要通过 ajax 传递此数据。
为了从谷歌获取数据，我找到了这段代码 developers.google
代码
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://plus.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</head>
<body>
<div class="container">
<form class="form-signin" role="form">
<div id="status"></div>
<h2 class="form-signin-heading">User Registration</h2>
<label for="inputFname" class="sr-only">First Name</label>
<input type="text" id="inputFullname" class="form-control" placeholder="First Name" required autofocus>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required >
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="row">
<div class="col-md-6">
<button class="btn btn-sm btn-primary btn-block" type="submit">Sign Up</button>
</div>
<div class="col-md-6">
<button class="g-signin "
data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-clientId="MY-ID-GIVEN"
data-accesstype="offline"
data-callback="mycoddeSignIn"
data-theme="dark"
data-cookiepolicy="single_host_origin">
</button>
</div>
</div>
</form>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
var gpclass = (function(){
//Defining Class Variables here
var response = undefined;
return {
//Class functions / Objects
mycoddeSignIn:function(response){
// The user is signed in
if (response['access_token']) {
//Get User Info from Google Plus API
gapi.client.load('plus','v1',this.getUserInformation);
} else if (response['error']) {
// There was an error, which means the user is not signed in.
//alert('There was an error: ' + authResult['error']);
}
},
getUserInformation: function(){
var request = gapi.client.plus.people.get( {'userId' : 'me'} );
request.execute( function(profile) {
var email = profile['emails'].filter(function(v) {
return v.type === 'account'; // Filter out the primary email
})[0].value;
var fName = profile.displayName;
$("#inputFullname").val(fName);
$("#inputEmail").val(email);
});
}
}; //End of Return
})();
function mycoddeSignIn(gpSignInResponse){
gpclass.mycoddeSignIn(gpSignInResponse);
}
</script>
但我不知道在我的 onClick(). 中使用了这个
提前致谢。
最佳答案
您可以将 Google 登录流程附加到您的自定义按钮，而无需编写自己的 onClick 处理程序。
auth2 = gapi.auth2.init({
client_id: '<YOUR_CLIENT_ID>.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
scope: '<additional_scopes>'
});
element = document.querySelector('.googleplus_but');
auth2.attachClickHandler(element, {},
function(googleUser) {
console.log('Signed in: ' + googleUser.getBasicProfile().getName();
}, function(error) {
console.log('Sign-in error', error);
}
);
关于javascript - 使用带有 onClick() 的 Google Plus 自定义图像按钮登录，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31376609/