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/idalgghcnjhmnbgbeebpdolhgdpbcplf

The problem is that when go to the Chrome Web Store and install this app the Facebook login windows hangs at a "XD Proxy" window. While the connect itself works, this blank window can confuse the users.

I did my research, and this seems to be a Chrome issue: https://code.google.com/p/chromium/issues/detail?id=59285#c26

If you uninstall the app from Chrome, the problem disappears.

Is there any workaround for this problem?

Similar stackoverflow questions:

• Facebook connect login window locking in Chrome
• FB.login dialog does not close on Google Chrome
• facebook connect blank pop up on chrome
• https://stackoverflow.com/questions/4423718/blank-page-with-fb-connect-js-sdk-on-after-permission-request

This is my Facebook connect in case it helps:

    FB.init({
        appId  : window.__FACEBOOK_APP_ID__,
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true, // parse XFBML
        channelUrl : window.__MEDIA_URL__ + 'channel.html', // channel.html file
        oauth  : true // enable OAuth 2.0
    });


    FB.XD.Flash.init();
    FB.XD._transport = "flash";

    if (A.networks.facebook.connected) {
        FB.getLoginStatus(function (response) {
            // Stores the current user ID for later use
            that.network_id = response.authResponse.userID;

            if (!response.authResponse) {
                // no user session available, someone you dont know
                A.networks.facebook.connected = false;
            }
            callback();
        });
    }
    else {
        callback();
    }
}; 

The Solution

Thanks to the reekogi reply I was able to workaround this issue. Here is the full implementation:

In order to avoid the XD Proxy problem, you have to connecte to Facebook without using the FB.login, this can be achieved by manually redirecting the user to Facebook page.

I had this login function in my code:

_facebook.connect_to_network = function (callback) {
    FB.login(function (response) {
        if (response.authResponse) {
            console.log('Welcome!  Fetching your information.... ');
            FB.api('/me', function (response) {
                // Stores the current user Id for later use
                that.network_id = response.id;
                console.log('Good to see you, ' + response.name + '.');
                callback();
            });
        }
        else {
            console.log('User cancelled login or did not fully authorize.');
            that.connected = false;
            callback();
        }

    }, {scope: window.__FACEBOOK_PERMS__});
};

Which I replaced by this code:

_facebook.connect_to_network = function (callback) {
    var url = 'https://www.facebook.com/connect/uiserver.php?app_id=' + window.__FACEBOOK_APP_ID__ + '&method=permissions.request&display=page&next=' + encodeURIComponent(window.__BASE_URL__ + 'authorize-window?my_app=facebook&my_method=login') + '&response_type=token&fbconnect=1&perms=' + window.__FACEBOOK_PERMS__;

    window.open(url);
};

The new code opens a popup which connects to Facebook and returns to the url specified in the 'next' parameter. I added some extra parameters in this callback url so that the javascript code could check for it and close the popup.

This code is executed when the Facebook redirects to the callback url:

_facebook.parse_url_params = function () {
    // This is the popup window
    if (URL_PARAMS.my_method === 'login') {
        window.opener.A.networks.facebook.connected = true;
        self.close();
    }
};

URL_PARAMS is just a helper object that contains all the url parameters.

I still believe that this is a Chrome issue, but since this workaround has worked and solved my problem I am marking this question as solved.

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.