Facebook login hangs at “XD Proxy” when page is installed via Chrome Web Store

Question

The created the following web application:

http://www.web-allbum.com/

I also added it to the Chrome Web Store:

https://chrome.google.com/webstore/detail/

Answer 1

Could you call a javascript redirect to get permissions then redirect back to the http://www.web-allbum.com/connected uri?

I described this method in detail here -> Permissions on fan page

EDIT:

The method I demonstrated before will be deprecated when OAuth 2.0 comes into the requirements.

Here is the code, adapted for OAauth 2.0 (response.session is replaced with response.authResponse)

<div id="fb-root"></div>
<script>
theAppId = "YOURAPPID";
redirectUri = "YOURREDIRECTURI"; //This is the page that you redirect to after the user accepts the permissions dialogue

//Connect to JS SDK
FB.init({
    appId  : theAppId,
    cookie: true, 
    xfbml: true, 
    status: true,
    channelURL : 'http://yourdomain.co.uk/channel.html', // channel.html file
    oauth  : true // enable OAuth 2.0
});

//Append to JS SDK to div.fb-root
(function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());

//Check login status and permissions
FB.getLoginStatus(function(response) {
  if (response.authResponse) {
    // logged in and connected user, someone you know
  } else {
    //Redirect to permissions dialogue
    top.location="https://www.facebook.com/connect/uiserver.php?app_id=" + theAppId + "&method=permissions.request&display=page&next=" + redirectUri + "&response_type=token&fbconnect=1&perms=email,read_stream,publish_stream,offline_access";
  }
});

</script>

Just tried and tested, worked fine in chrome.

Answer 2

It appears this has been fixed in Chrome. No longer happens for us in Mac Chrome 15.0.874.106

Answer 3

I've been experiencing the same issue in IE9, and it seemed to stem from upgrading to Flash Player 10. The answers suggested already did not work for me and I'd lost hope in trying to fix it since finding an open bug at Facebook covering it. But Henson has posted an answer on a similar question that fixed it for me. In the JavaScript in my site master I removed the lines

    FB.UIServer.setLoadedNode = function (a, b) {
       //HACK: http://bugs.developers.facebook.net/show_bug.cgi?id=20168
        FB.UIServer._loadedNodes[a.id] = b;
    };

and now it works. (N.B. I have not checked to see if the IE8 issue those lines were intended to overcome returns.)

Answer 4

I didn't try the solution proposed by Cesar, because I prefer to stick with Facebook's official javascript SDK.

Nevertheless I would like to add a few observations:

• Indeed, the blocking problem only happened on Chrome after installing from Chrome Web Store. Uninstalling the web app solves the problem. (tested with legacy authentication method, without oauth 2.0). After closing the XD Proxy popup manually, my application was working properly.

• After switching to asynchronous FB.init() and enabling oauth 2.0 option, my application would not even get a valid facebook connect status at login time ({authResponse: null, status: "unknown"})... Again, uninstalling it from the Chrome Web Store, it's working... ({authResponse: Object, status: "connected"})

• No problem encountered with Safari, in any of these cases.

Answer 5

Open a new browser tab in Chrome and see if you have the Facebook 'App' installed. If so, drag it to the bottom right corner to uninstall. Once uninstalled the XD Proxy will work.

Reference: facebook connect blank pop up on chrome

Answer 6

I was experiencing same problem for all browsers. When user clicked "login" button, a popup opened and hanged; and unless user killed browser process, it caused a high load on CPU. If user managed to see "allow" button and click it however, then it appeared a "xd proxy" blank window and nothing happened. That was the problem.

After long investigations, I noticed my new JS code which proxies setInterval/clearInterval/setTimeout/clearTimeout methods, caused this problem. Code is as follows:

window.timeoutList = new Array();
window.intervalList = new Array();

window.oldSetTimeout = window.setTimeout;
window.oldSetInterval = window.setInterval;
window.oldClearTimeout = window.clearTimeout;
window.oldClearInterval = window.clearInterval;

window.setTimeout = function(code, delay) {
    window.timeoutList.push(window.oldSetTimeout(code, delay));
};
window.clearTimeout = function(id) {
    var ind = window.timeoutList.indexOf(id);
    if(ind >= 0) {
        window.timeoutList.splice(ind, 1);
    }
    window.oldClearTimeout(id);
};
window.setInterval = function(code, delay) {
    window.intervalList.push(window.oldSetInterval(code, delay));
};
window.clearInterval = function(id) {
    var ind = window.intervalList.indexOf(id);
    if(ind >= 0) {
        window.intervalList.splice(ind, 1);
    }
    window.oldClearInterval(id);
};
window.clearAllTimeouts = function() {
    for(var i in window.timeoutList) {
        window.oldClearTimeout(window.timeoutList[i]);
    }
    window.timeoutList = new Array();
};
window.clearAllIntervals = function() {
    for(var i in window.intervalList) {
        window.oldClearInterval(window.intervalList[i]);
    }
    window.intervalList = new Array();
};

Removing these lines solved my problem. Maybe it helps to who experiences the same.