当通过Chrome网上应用店安装页面时,Facebook登录会在"XD代理"处挂起

Question

创建了以下Web应用程序:

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

我还将其添加到Chrome网上应用店:

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

问题是当进入Chrome网上应用店并安装此应用程序时,Facebook登录窗口会挂起"XD代理"窗口.虽然连接本身有效,但这个空白窗口可能会使用户感到困惑.

我做了我的研究,这似乎是一个Chrome问题:https: //code.google.com/p/chromium/issues/detail？id = 59285#c26

如果您从Chrome卸载该应用,问题就会消失.

这个问题有解决方法吗？

类似的stackoverflow问题:

• Facebook在Chrome中连接登录窗口锁定
• FB.login对话框未在Google Chrome上关闭
• facebook连接空白弹出铬
• /sf/ask/309660291/

这是我的Facebook连接,以防它有帮助:

    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();
    }
}; 

解决方案

感谢reekogi的回复,我能够解决这个问题.这是完整的实现:

为了避免XD代理问题,您必须在不使用FB.login的情况下连接到Facebook,这可以通过手动将用户重定向到Facebook页面来实现.

我的代码中有这个登录功能:

_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__});
};

我将其替换为此代码:

_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);
};

新代码打开一个弹出窗口,连接到Facebook并返回到'next'参数中指定的url.我在这个回调网址中添加了一些额外的参数,以便javascript代码可以检查它并关闭弹出窗口.

Facebook重定向到回调网址时执行此代码:

_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只是一个包含所有url参数的辅助对象.

我仍然认为这是一个Chrome问题,但由于这个解决方法已经解决了我的问题,我将此问题标记为已解决.

Answer 1

您可以调用 JavaScript 重定向来获取权限，然后重定向回http://www.web-allbum.com/connected uri 吗？

我在这里详细描述了这个方法 -> 粉丝页面上的权限

编辑：

当 OAuth 2.0 满足要求时，我之前演示的方法将被弃用。

这是适用于 OAauth 2.0 的代码（response.session替换为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>

刚刚尝试和测试，在 chrome 中工作得很好。