Facebook登录API HTTPS问题

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

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