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上得到了所有正确的东西。

如果我在我的电脑上使用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登录。 这是我的频道文件，存储在http://lamp.site/channel.html

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

我已经尝试在src =标签中使用带有和不带http：的通道文件。

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

• 应用领域：lamp.site
• 网站网址： http ： //lamp.site
• 移动网站网址： http ： //lamp.site

所以它适用于Firefox，我到底做错了什么。 我不能只启用跨站点脚本，因为用户不会这样做，这将进入移动网站。

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

所有其他类似的问题都没有得到答复......有人必须解决这个问题！

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

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

以下是使用Facebook Dev应用程序面板中的应用程序ID拍摄的屏幕截图

您可以查看源代码，直接从这里复制：

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

并且通道文件确实存在：

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

我不能说它更简单，我仍然得到“发生错误。请稍后再试。” 消息，但现在它只是转发到Facebook而不是验证和关闭。

编辑：我错过了网站网址，我添加了这些网址，这个简单的例子正在运行。

由于它在我的实时网站上运行，因此必须与我的本地域名一起使用。 但我在/ etc / hosts /文件中有这一行：

192.168.0.13 lamp.site

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

Answer 1

必须禁用沙箱模式才能在Chrome中使用。 就是这样，就是这样。

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

我并不认为为什么这会阻止Chrome。

Answer 2

你的工厂有一些奇怪的 JavaScript： return new function() ......除此之外我没有看到问题。 我正在使用相同的基本技术，我在Chrome中没有任何问题。

确保您的Facebook应用程序已设置到您的域（让我们称之为“mydomain.com”）...然后，要在本地测试，您需要编辑您的hosts文件以将mydomain.com指向127.0.0.1 ..所以浏览器位置中的URL与Facebook的期望值相匹配。

这可能是我正在做的和你正在做的事情之间的唯一区别。

...还要确保您的App ID是设置Facebook应用程序时正确的App ID。 仔细检查一下。 BS“test”App ID也会给你错误信息。

-

-

---

编辑 ：关于new function(){ }前面...... 我认为这不是你的问题 ....我想再解释一下：

var x = new function() { this.foo = 'test'; };

是相同的

var x = { foo: 'test' };

因为new关键字用于将函数作为对象构造函数调用，并且您在匿名函数上使用new，而您无法再次使用它，所以没有理由声明它。

所以你的代码片段可能（也可能应该）：

.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.');
                }
            });
        }
    }
});