我是Js的初学者，我在google devs上多次查看Google +登录。 我得到了我的ID等按钮现在做了什么，它打开了一个谷歌窗口，但窗口中没有任何内容，它关闭。我想要的是 ： 如果接受条件等，人们就会联系。如果没有，请返回索引。 如果成功，我想在我的谷歌电子邮件中收到用户的电子邮件。
请查看我的代码：
(JS in head)
<head>
<script type="text/javascript">
function signinCallback(authResult) {
if (authResult['access_token']) {
Successfully authorized;
// Hide the sign-in button now that the user is authorized, for example:
document.getElementById('signinButton').setAttribute('style', 'display: none');
} else if (authResult['error']) {
// There was an error.
// Possible error codes:
// "access_denied" - User denied access to your app
// "immediate_failed" - Could not automatially log in the user
console.log('There was an error: ' + authResult['error']);
}
}
</script>
<script type="text/javascript">
function disconnectUser(access_token) {
var revokeUrl = 'https://accounts.google.com/o/oauth2/revoke?token=' +
access_token;
// Perform an asynchronous GET request.
$.ajax({
type: 'GET',
url: revokeUrl,
async: false,
contentType: "application/json",
dataType: 'jsonp',
success: function(nullResponse) {
// Do something now that user is disconnected
// The response is always undefined.
},
error: function(e) {
// Handle the error
// console.log(e);
// You could point users to manually disconnect if unsuccessful
//https://plus.google.com/apps
}
});
}
// Could trigger the disconnect on a button click
$('#revokeButton').click(disconnectUser);
</script>
</head>
<body>
<span id="signinButton">
<span
class="g-signin"
data-callback="signinCallback"
data-clientid="id" (I got mine, it is not the problem)
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-scope="https://www.googleapis.com/auth/plus.login">
</span>
</span>
<!-- Place this asynchronous JavaScript just before your </body> tag -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async =
true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
oh i saw i've got a </div> before the </body> maybe it cause problem, i'll try to
put the </div> before the script, then </body>.
This is the url of google devs , Google + Sign-in button for the web :
https://developers.google.com/+/web/signin/
Thanks in advance for help!!
答案 0 :(得分：2)
以下是official documentation on the Google Developers site以供日后参考。甚至有一个Javascript sample on the site。
这是一个javascript示例（and jsfiddle of the same example），无耻地从Google开发者网站获取。 （注意，jsfiddle确实有效，因为需要更新clientId）
将此异步JavaScript放在</body>标记之前：
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js?onload=render';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
function render() {
gapi.signin.render('customBtn', {
//'callback': 'signinCallback',
'clientid': '841077041629.apps.googleusercontent.com',
'cookiepolicy': 'single_host_origin',
'requestvisibleactions': 'http://schemas.google.com/AddActivity',
'scope': 'https://www.googleapis.com/auth/plus.login'
});
}
</script>
以下是样本使用的一些样式：
<style type="text/css">
#customBtn {
display: inline-block;
background: #dd4b39;
color: white;
width: 165px;
border-radius: 5px;
white-space: nowrap;
}
#customBtn:hover {
background: #e74b37;
cursor: hand;
}
span.label {
font-weight: bold;
}
span.icon {
background: url('/+/images/branding/btn_red_32.png') transparent 5px 50% no-repeat;
display: inline-block;
vertical-align: middle;
width: 35px;
height: 35px;
border-right: #bb3f30 1px solid;
}
span.buttonText {
display: inline-block;
vertical-align: middle;
padding-left: 35px;
padding-right: 35px;
font-size: 14px;
font-weight: bold;
/* Use the Roboto font that is loaded in the <head> */
font-family: 'Roboto',arial,sans-serif;
}
</style>
在回调中，您会在成功登录时隐藏 gSignInWrapper 元素：
<div id="gSignInWrapper">
<span class="label">Sign in with:</span>
<div id="customBtn" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Google</span>
</div>
</div>
该按钮会触发OAuth 2.0登录流程。了解OAuth 2.x可能对您有所帮助。这是Wikipedia article。