我疯了!
我一直在尝试使用Facebook Javascript API弹出Facebook登录页面。
我已多次关注本教程,但登录不会出现在弹出窗口中,如果我按照登录过程通过它来登录我,而不是将我重定向回我的网站。一旦我回到我的网站,我就登录了,它运行正常。
我尝试过以下代码的多种变体(太多不能全部写出来):
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '123456789012345',
status : true,
xfbml : true,
version : 'v2.4'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
showLogoutOption(); // This shows the logout option
}
else {
showLoginOption(); // This shows the login option
console.log('Not logged in');
}
});
$('#loginOption').click(function() {
FB.login(); // When the login option is clicked -> login
});
};
(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.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
我还使用了快速启动here下的代码。
所以我可以登录,我可以访问FB图形API并提取数据,我可以注销。我无法做的就是拥有一个提供良好客户体验的登录信息。
注意:我正在使用Firefox(在Chrome上试过它,它会快速闪烁一个对话框,然后再次消失,记录用户但不刷新页面)。
如果您需要更多信息,请告诉我们。
答案 0 :(得分:0)
试试这个例子:
(function(win, doc) {
var declined_perms = [];
var PERMISSIONS = ['email', 'user_friends', 'user_photos', 'publish_actions'];
var APP_ID = 'Your API Key';
win.fbAsyncInit = function() {
FB.init({
appId: APP_ID,
xfbml: true,
cookie: true,
status: true,
version: 'v2.0'
});
afterFBASYNLoaded();
};
(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.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(doc, 'script', 'facebook-jssdk'));
var afterLoginBtnClick = function() {
FB.login(function(response) {
afterLoginStatus(response);
}, {
scope: PERMISSIONS.join()
});
};
var afterLoginBtnReAuthClick = function() {
FB.login(function(response) {
afterLoginStatus(response);
}, {
scope: declined_perms.join(),
auth_type: 'rerequest'
});
};
var hideAll = function() {
$("#loginSection").fadeOut("fast");
$("#loginSectionReAuth").fadeOut("fast");
};
var afterFBASYNLoaded = function() {
FB.getLoginStatus(function(response) {
afterLoginStatus(response);
});
$("#login_btn").on("click", function() {
afterLoginBtnClick();
});
$("#login_btnReAuth").on("click", function() {
afterLoginBtnReAuthClick();
});
};
var afterLoginStatus = function(response) {
var res = response.status;
if (res == 'connected') {
$("#loader").fadeIn("fast", function() {
declined_perms.length = 0;
FB.api('/me/permissions', function(response) {
for (var i = 0; i < response.data.length; i++) {
if (response.data[i].status == 'declined') {
declined_perms.push(response.data[i].permission);
}
}
if (declined_perms.length) {
hideAll();
$("#loader").fadeOut("fast", function() {
$("#loginSectionReAuth").fadeIn("fast");
});
} else {
var query = "SELECT uid,name,first_name,contact_email,name,last_name,email FROM user WHERE uid=me()";
FB.api({
method: 'fql.query',
query: query
},
function(res) {
var res2 = res[0];
var full_name = res2['name'];
var first_name = res2['first_name'];
var last_name = res2['last_name'];
var email = res2['contact_email'];
var fb_id = res2['uid'];
var data = {
name: full_name,
first_name: first_name,
last_name: last_name,
email: email,
fb_id: fb_id
};
$.ajax({
url: "services/insertuserdata.php",
dataType: "json",
type: "POST",
data: data
})
.done(function(data) {
var response = makeObject(data);
if (response['response'] == "success") {
//Data inserted successfully
} else {
//error from API
}
})
.error(function(jqXHR, exception) {
//error
});
});
}
});
});
} else {
hideAll();
$("#loginSection").fadeIn("fast");
}
};
})(window, document);
$("#loginSection")
是登录按钮容器
$("#loginSectionReAuth")
是登录Re-auth
容器,假设用户已登录但他未授权应用权限
$("#login_btn")
是一个登录按钮
$("#login_btnReAuth")
是重新授权登录按钮
$("#loader")
是一个加载元素
我希望这会有所帮助!!!