问题
I’m trying to set up a pretty basic authentication logic flow with the FB JavaScript SDK to check a user’s logged-in status and permissions before performing an action (and prompting the user to log in with permissions if they are not).
- The user types a message into a textarea on my site to post to their Facebook feed, and clicks a ‘post to Facebook’ button on my site.
- In response to the click, I check the user’s logged-in status with
FB.getLoginStatus. - In the callback to
FB.getLoginStatus, if the user is not logged in, prompt them to log in (FB.login). - In the callback to
FB.loginI then need to make sure they have the right permissions, so I make a call toFB.api('/me/permissions')— if they don’t, I again prompt them to log in (FB.login).
The problem I’m running into is that any time I try to call FB.login inside a callback to other FB methods, the browser seems to lose track of the origin of execution (the click) and thus will block the popup. I’m wondering whether I’m missing some way to prompt the user to login after checking their status without the browser mistakenly thinking that it’s not a user-initiated popup?
I’ve currently fallen back to just calling FB.login() first regardless. The undesired side effect of this approach, however, is that if the user is already logged in with permissions and I’m still calling FB.login, the auth popup will open and close immediately before continuing, which looks rather buggy despite being functional.
It seems like checking a user’s login status and permissions before doing something would be a common flow so I feel like I’m missing something. Here’s some example code.
<div onclick="onClickPostBtn()">Post to Facebook</div>
<script>
// Callback to click on Post button.
function onClickPostBtn() {
// Check if logged in, prompt to do so if not.
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
checkPermissions(response.authResponse.accessToken);
} else {
FB.login(function(){}, {scope: 'publish_stream'})
}
});
}
// Logged in, check permissions.
function checkPermissions(accessToken) {
FB.api('/me/permissions',
{'access_token': accessToken},
function(response){
// Logged in and authorized for this site.
if (response.data && response.data.length) {
// Parse response object to check for permission here...
if (hasPermission) {
// Logged in with permission, perform some action.
} else {
// Logged in without proper permission, request login with permissions.
FB.login(function(){}, {scope: 'publish_stream'})
}
// Logged in to FB but not authorized for this site.
} else {
FB.login(function(){}, {scope: 'publish_stream'})
}
}
);
}
</script>
回答1:
The problem I'm running into is that anytime I try to call FB.login inside a callback to other FB methods, the browser seems to lose track of the origin of execution (the click) and thus will block the popup.
He is not actually “losing track” – it’s a whole different execution context, because the FB methods work asynchronously. The click happened in an execution context that is long gone and finished by the time the callback function is executed.
You could check permissions earlier, on page load. It is not very likely that something about the user’s given permissions changes while he’s on your site, I guess – at least for a “normal” user, who does not try to mess with your app to see how it’ll react. (Although there might be uses cases where this can’t be said with certainty.)
If this results in the info that a necessary permission is missing – then call FB.login on the button click asking for this permission. In the FB.login callback, you can check the permissions again, if you want to be sure – if the permission is still not given then, then I’d suggest alerting the user to that fact, maybe telling him again why it’s necessary – and than he’ll have to click the button that starts the whole action again.
If permissions are alright, then you can make your API call to actually make a post. And to be really really sure and on the safe side … in that API call’s callback you can check for success or errors again, and if there’s an error find out if it was due to missing permissions – if so, back to square one, telling the user permission is necessary and have him start the whole thing over again, by clicking the button …
回答2:
I've got another solution for a more elegant way of checking whether user has
- A) Logged into FB
- B) Correct permissions
In a nutshell, for A), instead of "callback-ing" Fb.login you need to instead "alert" user that he is not logged in. Your page should then refresh, and handle the login process during the refresh.
However, for B) permissions, you request permisissions (via callback) using fb.ui method (using display: iframe), instead of using fb.login to request permissions. Using display:iframe should prevent the hassle of pop up blocker.
Please see below modified code:
<div onclick="onClickPostBtn()">Post to Facebook</div>
<script>
// Callback to click on Post button.
function onClickPostBtn() {
// Check if logged in, prompt to do so if not.
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
checkPermissions(response.authResponse.accessToken);
} else {
//Don't call FB.login because this results in popup blocker.
//FB.login(function(){}, {scope: 'publish_stream'})
//Instead, just alert user that "YOu are not connected to FB", and then refresh the page (which should theoreticalyl handle the logging aspect)
}
});
}
// Logged in, check permissions.
function checkPermissions(accessToken) {
FB.api('/me/permissions',
{'access_token': accessToken},
function(response){
// Logged in and authorized for this site.
if (response.data && response.data.length) {
// Parse response object to check for permission here...
if (hasPermission) {
// Logged in with permission, perform some action.
} else {
//Don't use FB.login to request permissions. Instead use a FB.ui ({method:'permissions.request'} with "display" set to "iframe"
//FB.login(function(){}, {scope: 'publish_stream'})
FB.ui(
{
method: 'permissions.request',
'perms': 'publish_stream,WHATEVER_PERMISSIONS',
'display': 'iframe' //THIS IS IMPORTANT TO PREVENT POPUP BLOCKER
},
function(response) {
//Do action if permissions add success other wise prompt error adding permissions.
}
}
// Logged in to FB but not authorized for this site.
} else {
//Don't call FB.login because this results in popup blocker.
//FB.login(function(){}, {scope: 'publish_stream'})
//Instead, just alert user that "YOu are not connected to FB", and then refresh the page (which should theoreticalyl handle the logging aspect)
}
}
);
}
</script>
来源：https://stackoverflow.com/questions/11779955/can-you-call-fb-login-inside-a-callback-from-other-fb-methods-like-fb-getlogins