javascript Facebook 登录 JS - FB.Event.subscribe('auth.login') 在没有登录按钮点击的情况下触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9110519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Facebook login JS - FB.Event.subscribe('auth.login') triggers without login button click
提问by Aidas
really need your help with log-in-with-facebook feature I'm trying to implement on my website.
我正在尝试在我的网站上实施登录 Facebook 功能，真的需要您的帮助。
Basically, I'm trying to achieve the following:
基本上，我试图实现以下目标：
if user has acknowledged the app before and clicks FB Log in button on my website, they get logged into the website (with website's user account associated with the Facebook user ID)
if user has not acknowledged the app before, on FB log in (and subscription to app) they get redirected to website's registration page. Here the form is pre-filled with user data coming through Facebook and registration process becomes easier and faster.
如果用户之前已确认该应用程序并单击我网站上的 FB 登录按钮，他们将登录该网站（网站的用户帐户与 Facebook 用户 ID 相关联）
如果用户之前没有确认该应用程序，则在 FB 登录（和订阅应用程序）时，他们会被重定向到网站的注册页面。在这里，表单预先填写了来自 Facebook 的用户数据，注册过程变得更加容易和快捷。
I'm using the code below.
我正在使用下面的代码。
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxxxxxx',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
if ((parseFloat(uid) == parseInt(uid)) && !isNaN(uid)) {
$.ajax({
url: '/user_actions/prep_facebook_registration',
cache: false,
type: 'POST',
data: { 'uid': uid, 'token': accessToken },
dataType: 'json',
success: function(data) {
if (data.success=='true') {
if ((typeof(data.redirect) != 'undefined')) {
window.location=data.redirect;
}
}
}
});
}
}
});
FB.Event.subscribe('auth.logout', function(response) {
FB.getLoginStatus(function(res) {
if (!res.authResponse) {
window.location='/access/logout';
}
});
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
//not doing anything so far
}
});
};
(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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
LogIn button lays further down in a website:
登录按钮位于网站的下方：
<div class="fb-login-button" autologoutlink="true" data-show-faces="false" data-width="166" data-max-rows="1" style="position: absolute; top: 5px; right: 0;" scope="email"></div>
The problem here is that FB.Event.subscribe('auth.login') triggers not only on FB log in button click, but also if user has logged to Facebook and only after comes to my website. This causing a redirection to registration page or current page reload even if user hasn't clicked the login button!
这里的问题是 FB.Event.subscribe('auth.login') 不仅在 FB 登录按钮点击时触发，而且在用户登录 Facebook 并且仅在访问我的网站后触发。即使用户没有点击登录按钮，这也会导致重定向到注册页面或当前页面重新加载！
'/user_actions/prep_facebook_registration' holds a script, which is checking if the member has to be redirected to registration page or should be loggedin with local account. It returns the URL to redirect.
'/user_actions/prep_facebook_registration' 包含一个脚本，用于检查成员是否必须重定向到注册页面或应该使用本地帐户登录。它返回要重定向的 URL。
What am I doing wrong? How can I avoid FB.Event.subscribe('auth.login') being triggered outside the login button click?
我究竟做错了什么？如何避免在登录按钮点击之外触发 FB.Event.subscribe('auth.login') ？
采纳答案by Aidas
=====================
======================
Edit: Ok, I think there's a bit of a progress here :)
编辑：好的，我认为这里有一些进展:)
I've extended the FB login button with onloginevent which calls a JS function Facebook_login()
我已经使用调用 JS 函数 Facebook_login() 的onlogin事件扩展了 FB 登录按钮
<div class="fb-login-button" onlogin="Facebook_login()" autologoutlink="true" [parameters]></div>
I've exported uidand accessTokenvariables outside window.fbAsyncInit function so I could access them from anywhere else:
我已经在 window.fbAsyncInit 函数之外导出了uid和accessToken变量，所以我可以从其他任何地方访问它们：
var uid;
var accessToken;
window.fbAsyncInit = function() {
FB.init({
your parameters
});
});
Then, I got FB.Event.subscribe('auth.login') to only assign values to my uidand accessTokenvariables, but not perform any redirection.
然后，我让 FB.Event.subscribe('auth.login') 只为我的uid和accessToken变量赋值，但不执行任何重定向。
FB.Event.subscribe('auth.login', function(response) {
if (response.status === 'connected') {
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
}
});
And finally, my custom function Facebook_login () fetches the uid and accessToken values and does the rest of the operation. This time it happens only when login button is clicked. Please note, this function is outside window.fbAsyncInit()
最后，我的自定义函数 Facebook_login () 获取 uid 和 accessToken 值并执行剩余的操作。这次只有在单击登录按钮时才会发生。请注意，此函数在 window.fbAsyncInit() 之外
function Facebook_login () {
if ((parseFloat(uid) == parseInt(uid)) && !isNaN(uid)) {
$.ajax({
url: '/user_actions/prep_facebook_registration',
cache: false,
type: 'POST',
data: { 'uid': uid, 'token': accessToken },
dataType: 'json',
success: function(data) {
if (data.success=='true') {
if ((typeof(data.redirect) != 'undefined')) {
if (data.redirect=='current') {
location.reload();
} else {
window.location=data.redirect;
}
}
}
}
});
}
}
This seems to do a job for me. If anyone has any better solutions, your input would be appreciated :)
这似乎对我有用。如果有人有更好的解决方案，您的意见将不胜感激:)
回答by Ivan Feri?
Actualy, there's a better solution.
其实还有更好的解决办法。
There are 2 things that you could do better:
有两件事你可以做得更好：
- In your
FB.initmethod, you're settingstatus: true. This tells the page that it should check whether the user is logged in the facebook immediately after page loads. In your case, it's not only that you don't need it - it will take some of your visitor's bandwidth for round trip to facebook that you don't actually need. - You don't need to remember uid and accessToken variables since you can get them on demand by using
FB.getLoginStatusmethod.
- 在您的
FB.init方法中，您正在设置status: true. 这告诉页面它应该在页面加载后立即检查用户是否登录了 Facebook。在您的情况下，不仅您不需要它 - 它会占用您访问者的一些带宽来往返您实际上并不需要的 facebook。 - 您不需要记住 uid 和 accessToken 变量，因为您可以通过使用
FB.getLoginStatus方法按需获取它们。
The complete solution based on your sample code would be:
基于您的示例代码的完整解决方案是：
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : false,
cookie : true,
xfbml : true
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
function Facebook_login () {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
if ((parseFloat(uid) == parseInt(uid)) && !isNaN(uid)) {
$.ajax({
url: '/user_actions/prep_facebook_registration',
cache: false,
type: 'POST',
data: { 'uid': uid, 'token': accessToken },
dataType: 'json',
success: function(data) {
if (data.success=='true') {
if ((typeof(data.redirect) != 'undefined')) {
if (data.redirect=='current') {
location.reload();
} else {
window.location=data.redirect;
}
}
}
}
});
}
}
}
}
</script>
<div class="fb-login-button" onlogin="Facebook_login()" autologoutlink="true" [parameters]></div>
