javascript - Chrome/Safari (webkit) 中的 Facebook Javascript SDK 登录问题 - 不安全的 Javascript 尝试

Question

有人问过类似的问题，但这些问题的解决方案似乎对我没有帮助。

我已经在虚拟机上设置了一个本地开发站点: http://lamp.site

当 index.php 加载时，我已经运行了这个 javascript(带有正确的 appId):

/* facebook auth */ 
window.fbAsyncInit = function() {
    FB.init({
        appId: '01234567890',
        channelUrl: 'http://lamp.site/channel.html'
    });
};

// 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 = "//connect.facebook.net/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
}(document));

然后当一个按钮被点击时，这个javascript函数被触发:

#HTML
<li><a class="btn" href="#" ng-click="connectToFacebook()">Connect with Facebook</a></li>

#Snippet in AngularJS Controller
$scope.connectToFacebook = function() {
    facebookConnect.authenticate(
    function(reason) { // fail
        console.log(reason);
    }, 
    function(user) { // success
        console.log('logged in',user);
        //Session.login();
    });

    return false;
}

#Factory in AngularJS module
.factory('facebookConnect', function() {
return {
    authenticate: function(fail, success) {
        FB.login(function(response) {
            console.log(response);
            if (response.authResponse) {
                FB.api('/me', success);
            } else {
                fail('User cancelled login or did not fully authorize.');
            }
        });
    }
}

如果我在 Firefox 中按下按钮，它就会工作!可爱的，我从 Facebook 得到了所有正确的东西。

如果我在 PC 上使用 Chrome 或 Safari，或在 iPhone 上使用 Safari Mobile，我会弹出 facebook 登录窗口并显示消息“发生错误。请稍后重试。”，以及以下控制台数据:

Unsafe JavaScript attempt to access frame with URL
https://www.facebook.com/dialog/permissions.request from frame with URL
http://lamp.site/index.php?page=login. Domains, protocols and ports must match.

Object
authResponse: null
status: "not_authorized"
__proto__: Object

User cancelled login or did not fully authorize. 

我已将我的本地测试 URL 添加到开发人员部分的 facebook 应用程序中，因为它使用 Firefox 登录。这是我的 channel 文件，存储在 http://lamp.site/channel.html

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

我试过在 src= 标签中使用和不使用 http: 的 channel 文件。

Facebook 应用程序具有以下设置:

• 应用域:lamp.site
• 网站网址:http://lamp.site
• 移动网站 URL:http://lamp.site

所以它在 Firefox 中工作，我到底做错了什么。我不能只启用跨站点脚本，因为用户不会那样做，而这将进入移动站点。

最近有其他人设法解决了这个问题吗？

所有其他类似的问题都没有答案......一定有人解决了这个问题!

编辑:我在我的网站上制作了一个简化版本，新的应用程序 ID。

http://dev.willshawmedia.com/fb/

这是来自 Facebook Dev 应用程序面板的应用程序 ID 的屏幕截图

你可以看看源码，直接从这里复制过来的:

https://developers.facebook.com/docs/guides/web/

而且 channel 文件确实存在:

http://dev.willshawmedia.com/fb/channel.html

我不能再简单了，我仍然收到“发生错误。请稍后重试。”消息，但现在它只是转发到 Facebook，而不是进行身份验证和关闭。

编辑:我遗漏了站点 URL，我已经添加了这些，这个简单的示例正在运行。

因为它在我的实时网站上运行，所以它一定与我的本地域有关。但是我的 /etc/hosts/ 文件中有这一行:

192.168.0.13 lamp.site

这是在我的笔记本电脑上运行的 VirtualBox Ubuntu 服务器的 IP 地址。我可以正常浏览那个网站。

Answer 1

必须禁用沙盒模式才能在 Chrome 中运行。就是这样，就是这样。

我启用了该模式，因为我认为这会阻止它出现在搜索中，这是我不想要的。因为它在 Firefox 中工作，所以我不认为这是一个问题。但是你走了，我关闭了沙盒模式，它立即开始工作。

我不明白为什么这会阻止 Chrome。