Question

我正在处理的网站有一个Facebook登录选项，但最近一位用户报告说它不适用于他们。我禁用了我的扩展等，我在控制台中收到了这个错误：

Blocked a frame with origin "https://www.facebook.com" from accessing a frame 
with origin "http://static.ak.facebook.com".  The frame requesting access has 
a protocol of "https", the frame being accessed has a protocol of "http". 
Protocols must match.

我可以提供给API的选项，使其能够在相同的协议上运行吗？仅供参考，主要网站在HTTP（无S）上运行。

特别奇怪，因为它似乎突然停止工作（但这可能是一个问题，因为我是新手并正在学习这个系统。）

我的页面底部有这个代码：

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId  : ..., // App ID
            status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true,  // parse XFBML
            channel: '//...mychannel.../channel'
        });

        FB.Event.subscribe('auth.authResponseChange', function(fbResponse) {
            // function that logs in user
        });
    };

    // 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));
</script>

Answer 1

如果你没有加载javascript sdk async，你可能会看到很多错误。

请参阅：https://developers.facebook.com/docs/javascript/quickstart

此外，如果您通过iframe代码使用任何Facebook插件，请确保src url协议匹配。

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
  };

  // Load the SDK asynchronously
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Answer 2

我的开发环境遇到了同样的问题。解决的步骤（不确定是哪一个做到了）：

退出应用程序。
从浏览器中删除所有Cookie。
以预期用户身份登录FB（不是开发者页面，而是用户应用权限页面）。
从FB权限页面删除应用程序权限。
退出FB。
重新加载应用并尝试登录。

除非我花了几个小时的时间，否则我不会在这样的伏都教回答中回答，并会重视任何类型的巫术让我离开它。

Answer 3

我一直在处理这个问题...... 我的解决方案：
将您的Facebook通话移至静态页面...

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=IDDDD";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

设置ajax回调：

try{setTimeout(FB.XFBML.parse);}catch(e){}

开心：）

jquery示例：

$(document).ajaxComplete(function(){
            try{
                setTimeout(FB.XFBML.parse);
            }catch(ex){}
        });

Answer 4

为了它的价值，我设法通过转换为HTTPS来解决这个问题（无论如何我都应该这样做。）

Facebook登录API HTTPS问题

4 个答案: