我在这个登录页面上使用javascript sdk实现了Facebook登录。 它就像一个魅力。
问题是,在向用户显示登录页面之后,登录操作就开始了,而按钮上没有用户交互。
我想阻止这个"自动"登录并等待用户决定。
我怎样才能使这项工作正常进行?
站点:
<!DOCTYPE HTML>
<html>
<head>
<title>Vienes?</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/bootstrap.css" />
<script src="assets/js/jquery-1.11.0.min.js"></script>
</head>
<body id="top">
<script>
function getUserData() {
FB.api('/me', function(response) {
$.ajax({
url: "loginSave.php",
type: "post",
data: {id:response.id,
email:response.email,
name1:response.name,
name2:'',
gender:response.gender} ,
success: function (response) {
// you will get response from your php page (what you echo or print)
window.location.href = 'index.php';
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});
}
window.fbAsyncInit = function() {
//SDK loaded, initialize it
FB.init({
appId : '000000035339xxx',
xfbml : true,
version : 'v2.2'
});
//check user session and refresh it
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//user is authorized
document.getElementById('load').style.display = 'none';
getUserData();
} else {
}
});
};
//load the JavaScript SDK
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.com/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.onload=function(){
document.getElementById('load').addEventListener('click', function() {
FB.login(function(response) {
if (response.authResponse) {
//user just authorized your app
document.getElementById('load').style.display = 'none';
getUserData();
}
}, {scope: 'email,public_profile', return_scopes: true});
}, false);
}
<div class="container text-center">
<img src="images/logoblanco.png" style="max-width: 100px;margin-top:40px">
<h1 style="color:white;font-family: 'Raleway', sans-serif !important;font-size: 54px; margin-top:0px !important; margin-bottom:0px !important"><i>X?</i></h1>
<p style="color:white;font-family: 'Raleway', sans-serif !important;line-height: 0.6;">XXX.</p>
</div>
<div class="container text-center">
<button id='load' style="margin-top:10px;margin-bottom: 10px" class="loginBtn loginBtn--facebook">Loging with Facebook
</button>
</div>
<script src="assets/js/jquery.min.js"></script>
</body>
</html>