题 Facebook登录API HTTPS问题


我正在开发的网站有一个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>

31
2018-06-02 22:56


起源


我也一直在检查这个答案。似乎最近的Chrome / Safari安全更新在涉及在单独窗口中打开模式时杀死了所有Facebook交互。协议不匹配错误(上面)特别令人沮丧,因为开发人员无法控制所使用的协议。 - Mike_K
嗯......我在Firefox中查了一下也行不通,但据报道“[16:51:47.802]不推荐使用Mutation事件。请改用MutationObserver。@ fbstatic-a.akamaihd.net/rsrc.php/v2/y4/r/dePwLAaASOW.js:59"; - SapphireSun
你检查了你在那里设置的fb设置吗? - Farnsbert
Facebook iFrame错误和Firefox“使用变异事件已被弃用”错误一直发生,可能不是问题。当您的网站被Facebook授权流程回叫时,您的网站会做什么? - Old Pro
我没有测试的可能性,但你可以改变这一行 js.src = "//connect.facebook.net/en_US/all.js"; 至 js.src = "http://connect.facebook.net/en_US/all.js";强制使用http协议sciprt? - WooCaSh


答案:


如果你没有加载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>

6
2018-06-06 07:36



我正在使用一个弹出单独的窗口登录facebook。我不知道这是否算作插件。我知道SDK代码嵌入了几个iframe。对于它的价值,这个代码(定制相关部分)出现在我的应用程序的脚下。 - SapphireSun
对不起蓝宝石,没有看到你的代码以及所有内容如何布局,除了指示你为异步版本交换JS SDK之外,我无法帮助你。 - Shawn E Carter
我将页面底部的代码添加到顶部的问题中。 - SapphireSun
建议将JS SDK放置在尽可能靠近<body>标记或尽可能靠近<body>标记的位置。事情的顺序。基本上,您希望在尝试加载任何社交插件之前加载sdk,否则会出现错误。除此之外,你可以在async中编写插件到DOM,并在加载sdk后使用xFBML初始化它们。 - Shawn E Carter


我在开发环境中遇到了同样的问题。 要解决的步骤(不确定是哪一个做到了):

  1. 退出应用程序。
  2. 从浏览器中删除所有cookie。
  3. 以预期用户身份登录FB(不是开发者页面,而是登录到用户应用程序权限页面)。
  4. 从FB权限页面删除应用程序权限。
  5. 退出FB。
  6. 重新加载应用程序并尝试登录。

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


3
2017-07-19 13:37



确实。那是我的问题。易于测试 - 以隐身/私密模式加载浏览器。如果错误消失,那么它似乎表明cookie /会话问题。 - cyberwombat


我一直在处理这个问题......
我的解决方案
将您的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){}
        });

1
2018-06-12 12:40





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


-3
2017-10-04 18:39