javascript - 需要一种解决方法来阻止 Safari 浏览器阻止 Facebook 身份验证弹出框以允许用户登录我的网站

Question

我已经为我的网站设置了 Parse/Facebook 登录工作流程 (JavaScript SDK)，如此处所示 https://parse.com/docs/js/guide#users-facebook-users这适用于桌面设备，但在移动设备上，由于 Facebook 身份验证使用工作流程中的弹出框，我无法完成此工作(除非我手动调整浏览器设置，这当然不是其他用户的选项)

我已经研究过了，但似乎找不到我能够实现的解决方案。有人能解决这个问题吗？

我遵循了以下地方的指导:

Facebook Login not open in Safari/ iPhone

Prevent pop-ups from being blocked

Error/blank page with Chrome and Safar browser apps for iphone when using javascript FB login code

我当前的代码是

Function FBLogin() {

//Fb app information//
window.fbAsyncInit = function() {
    Parse.FacebookUtils.init({
      appId      : 'XXXXX',
      xfbml      : true,
      version    : 'v2.3'
    });



//FB user authentication script//



var uri = encodeURI('http://XXXXX/user_home.html');
Parse.FacebookUtils.logIn(null, {
    success: function(user) {
        if (!user.existed()) {
                window.location.href=uri;
        } else {
            window.location = encodeURI("https://www.facebook.com/dialog/oauth?client_id=XXXXXXXXX&redirect_uri="+uri+"&response_type=token");


        }
    },
    error: function(user, error) {

    }
});



};

(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";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}

Answer 1

我在这个网站上找到了纯 FB JS SDK 链接的答案，我下面的代码经过调整以使其适用于 Parse。

function getUserData() {
    FB.api('/me', function(response) {
        document.getElementById('response').innerHTML = 'Hello ' + response.name;
    });
}

window.fbAsyncInit = function() {
    //SDK loaded, initialize it
    Parse.FacebookUtils.init({
        appId      : 'XXXXXX',
        xfbml      : true,
        version    : 'v2.2'
    });



    //check user session and refresh it
    var uri = encodeURI('http://XXXXX/XXXXXX.html');
    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            //user is authorized
            document.getElementById('loginBtn').style.display = 'none';
            getUserData();

        } else {
            //user is not authorized
        }
    });
};

//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.net/en_US/all.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));


//add event listener to login button
document.getElementById('loginBtn').addEventListener('click', function() {
    //do the login
var uri = encodeURI('http://XXXXX/XXXXX.html');
Parse.FacebookUtils.logIn(null, {
    success: function(user) {
        if (!user.existed()) {
                window.location.href=uri;
        } else {
            window.location = encodeURI("https://www.facebook.com/dialog/oauth?client_id=ADDYOURAPPIDHERE&redirect_uri="+uri+"&response_type=token");


        }
    },
    error: function(user, error) {

    }
});
}, false);