使用FB登录问题:带有“登录"对话框的FB弹出窗口被Web浏览器阻止 [英] Sign In with FB issue: FB popup window with the Login dialog is blocked by a web browser

问题描述

FB文档说:

如该功能的参考文档中所述，它会导致 弹出窗口，显示登录"对话框，因此只能是 由于某人点击了HTML按钮而被调用(这样， 弹出窗口未被浏览器阻止.

As noted in the reference docs for this function, it results in a popup window showing the Login dialog, and therefore should only be invoked as a result of someone clicking an HTML button (so that the popup isn't blocked by browsers).

正如我所说，我将FB.login函数放入了onCLick函数中.但是Login dialog仍然被阻止.为什么?如何重新排序代码?

And I did as it says, I put the FB.login function into an onCLick function. But the the Login dialog is still blocked. Why? How to reorder the code?

// Facebook
// Here is a click event, so FB.login is inside a click function.
$("#login_btn_fb").on("click", function() {


    function getUserData(res, fCallback) {
        if(res.authResponse != null) {
            FB.api('/me', function(response) {
                console.log('/me_: ', response);
            });
        }
        else {
            console.log("getUserData CANCEL: ", res);
            return;
        }
    };


    FB.getLoginStatus(function(res) {

        var uid = null;
        var accessToken = null;

        if($.isPlainObject(res)) {

            // Fb+ App+
            if(res.status == "connected") {
                console.error("connected");
                uid = res.authResponse.userID;
                accessToken = res.authResponse.accessToken;
                getUserData(res, null);
            }
            // Fb+ App-
            else if(res.status == "not_authorized") {
                console.error("not_authorized");
                FB.login(function(res) {
                    getUserData(res, null);
                }, {scope: 'email,user_birthday,user_photos,public_profile,user_location'});
            }
            // Fb- App-
            else {
                console.log("UNKNOWN");
                FB.login(function(res) {
                    // console.log("===UNK FB.login res: ", res);
                    getUserData(res, null);
                }, {scope: 'email,user_birthday,user_photos,public_profile,user_location', return_scopes: true});
            };
        }
        // ERROR with FB
        else {
            alert("Facebook sign in failure. Please try again later.");
            return;
        }
    });
});

推荐答案

您没有将FB.login放置在User事件直接调用的函数中，而是放置在FB.getLoginStatus的异步回调函数中.

You did not put FB.login in a function that is directly called by a User event, but in an asynchronous callback function of FB.getLoginStatus.

使用FB.getLoginStatus刷新用户会话，并在加载页面时(在FB.init之后)检查用户是否已正确登录，并且仅在用户交互时使用FB.login-而不是在异步回调中，当然.

Use FB.getLoginStatus to refresh a User Session and to check if the User is logged in right when you load your Page (right after FB.init), and FB.login only on User interaction - but NOT in an asynchronous callback, of course.

这篇关于使用FB登录问题:带有“登录"对话框的FB弹出窗口被Web浏览器阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！