logo标签列表

FB.login对话框在Google Chrome上无法关闭。

facebookgoogle-chromeauthentication
40
我在应用程序中的点击事件上调用FB.login()。预期弹出对话框，但是当用户完成Facebook登录（和/或授权应用程序）后，对话框不会关闭。相反，它会加载一个白色页面（在对话框内），标题更改为XD Proxy。
这只发生在Google Chrome上（我正在使用适用于Windows 7的最新版本）。
如果Chrome处于隐身模式，则不会发生此情况。
fb-login“社交插件”在Chrome上运行良好。
为了进一步测试/调试此问题，我创建了一个新的Facebook应用程序，其中设置只有站点URL。以下是可以用来重新创建此错误的HTML代码。

重现问题的示例代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Chrome Bug Test</title>
    </head>
    <body>
        <button onclick="dologin()">Login using Facebook</button>

        <div id="fb-root"></div>
        <script src="http://connect.facebook.net/en_US/all.js"></script>
        <script>
          FB.init({
            appId  : '[YOUR APP ID HERE]',
            status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true  // parse XFBML
          });
        </script>

        <script type="text/javascript">
            function dologin(){
                FB.login(function(r){
                    if(console && console.log) {
                        console.log(r);
                    }
                });
            }
        </script>

    </body>
</html>

我尝试更改的Facebook设置

  1. 设置网站域名，但没有改变任何内容。
  2. 使用自定义channelUrl和channel文件，也没有帮助。

在Facebook上跟踪的相关错误

这里在Stack Overflow上的相关问题

我看到很多人遇到这个问题，但令我困扰的是，我还没有找到一个确定的解决方案。Facebook 还没有回应 bug 报告。一种解决方案是摆脱基于 Javascript 的身份验证代码，只使用服务器端机制（Facebook PHP SDK）。由于时间限制，我想避免这种方法。

有人有什么想法如何解决这个问题吗？

6个回答
11

我收到了一个类似于 FB.login() 的呼叫，通过改变它来关闭对话框。

onclick="dologin()"

to

onclick="dologin(); return false;"
1
或者在 doLogin() 函数的第一行添加 event.preventDefault()。 - Raptor
7
鉴于此帖子的年龄，我猜测发帖人已经解决了这个问题；但考虑到这也是其他人寻找解决类似问题资源的地方，我想在这里分享我的经验，以防万一。
我发现导致我出现同样问题症状的原因是在jQuery的“click”监听处理程序中不小心忘记了包含event.preventDefault();。Facebook登录对话框弹出并允许我登录，但没有消失。问题在于网站执行了默认的表单提交操作，这干扰了Facebook回调函数的执行。
6

我有完全相同的问题。我做了两件事，首先在 FB.init() 调用之前添加了以下这行代码：

FB.Flash.hasMinVersion = function () { return false; };

然后我进入了FB应用页面，并添加了站点域名（例如test.com）。

我认为站点域设置是关键，但我不确定百分之百。所有我知道的是现在它似乎在所有浏览器中都能正常关闭，包括Chrome。

我还添加了"return false"，除此之外，我将其添加在了FB.getLoginStatus的末尾。 - Kieran
5

与上面问题相关的简短回答：

使用 https 加载 all.js 脚本。

<script src="https://connect.facebook.net/en_US/all.js"></script>

如果你在排除类似的问题：

请使用谷歌浏览器进行登录尝试。一旦你成功登录并且屏幕上有一个空白弹出窗口，按下F12键。这将打开谷歌浏览器的开发工具。点击控制台标签，你就会看到错误信息。你可能会看到与XD（跨域）问题有关的内容。

即使你遇到的问题与我所遇到的不同，以上方法也应该能指导你朝着正确的方向解决问题。

我的问题/解决方案是针对 Facebook C# SDK v6 documentation - 教程代码使用了以//开始的URL来加载 all.js 脚本，而这个脚本从和我的网站相同的协议（http）加载。在我登录后，弹出窗口试图重定向我回到从https登录的Facebook页面到我的http站点，然后出现了XD问题。解决方案是从以下位置专门加载脚本：https://connect.facebook.net/en_US/all.js，代码如下：

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "https://connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));

编辑：

经过一些考虑，允许重定向到http的方法可能会危及系统的安全性，因为它允许其他人读取该请求中的数据并进行再利用。我没有找到任何相关的文档或示例，因此无法得出结论，可能因人而异。

非常感谢！我刚才添加了 "https"，问题得以解决！ - pmrotule
2
在FB.init后调用此片段对我有帮助。但对于不同情况，可能需要其他解决方案。
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
if ($.browser.chrome || $.browser.msie) {
    FB.XD._origin = window.location.protocol + "//" + document.domain + "/" + FB.guid();
    FB.XD.Flash.init();
    FB.XD._transport = "flash";
  } else if ($.browser.opera) {
    FB.XD._transport = "fragment";
    FB.XD.Fragment._channelUrl = window.location.protocol + "//" + window.location.host + "/";
  }
1

我在IE9中遇到了同样的问题，似乎是由于升级到Flash Player 10引起的。已经提出的答案对我没有用，而且我已经失去了尝试修复它的希望，因为在Facebook上找到了一个开放性的错误。但是Henson在类似的问题上发布了一个答案，这为我解决了问题。在我的站点主控制器中的JavaScript中，我删除了这些行

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

现在它可以工作了。（注意：我还没有检查那些代码行是否能解决IE8的问题。）

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接