Need a workaround to stop Safari browser blocking Facebook authentication pop up box for allowing users to login to my site

Question

I've set up the Parse/Facebook login workflow (JavaScript SDK) for my site as seen here https://parse.com/docs/js/guide#users-facebook-users This works on desktop , but on mobile devices because of the Fb authentication using a pop up box in the workflow, I'm unable to make this work (Unless I adjust my browser settings manually, which isn't of course isn't an option for other users)

I've researched it, but can't seem to find a solution I've been able to implement. Has any one been able to solve this?

I've followed the guidance seen in the following places:

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

My current code for this is

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

I found the answer on this site for a pure FB JS SDK link, my code below is adjusted to make it work for 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);