Question

我正在尝试facebook messenger checkbox工作，我已将以下代码添加到我的HTML

window.fbAsyncInit = function() {
    FB.init({
      appId: "{{ fb_app_id }}",
      xfbml: true,
      version: "v2.6"
    });

    FB.Event.subscribe('messenger_checkbox', function(e) {
      console.log("messenger_checkbox event");
      console.log(e);

      if (e.event == 'rendered') {
        console.log("Plugin was rendered");
      } else if (e.event == 'checkbox') {
        var checkboxState = e.state;
        console.log("Checkbox state: " + checkboxState);
      } else if (e.event == 'not_you') {
        console.log("User clicked 'not you'");
      } else if (e.event == 'hidden') {
        console.log("Plugin was hidden");
      }

    });
  };

  (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/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

      <div class="fb-messenger-checkbox"
        origin="my.site.com"
        page_id="{{ fb_page_id }}"
        messenger_app_id="{{ fb_app_id }}"
        user_ref="{{ user_token }}"
        prechecked="true"
        allow_login="true"
        size="xlarge"></div>

但每当我刷新页面时，messenger复选框都不会显示，而是在chrome的控制台中出现错误

Refused to display 'https://www.facebook.com/v2.6/plugins/messenger_checkbox.php?allow_login=tr…&user_ref=1tYPmZaYMKXKfcZiUtaENYTXH3H49OTP7tJrt5fyobCgepqziMA0Z037T5gto9o3'
in a frame because an ancestor violates the following Content Security Policy directive: 
"frame-ancestors https://www.facebook.com".

任何人都可能知道如何解决这个问题？被困在过去24小时。

编辑：文档声明我应该将我的域名添加为白名单，我已经这样做了，但此错误仍然存在。

Answer 1

这个问题有两种解决方案：

安装chrome Disable Content-Security-Policy plugin 并在查看时使用它来禁用内容安全策略标头使用复选框插件的页面
Whitelist the domain（包括协议和端口）。在本地测试时，我在http://localhost:3000/signup上运行的nodejs应用程序上托管插件。我还使用ngrok允许我远程公开我的本地服务器，以便我可以在本地计算机上处理opt-in callback。事实证明，您必须将您在浏览器URL字段中输入的域列入白名单才能访问该页面。这似乎是显而易见的，但我一直在尝试使用ngrok域，它看起来像http://abc364ef.ngrok.io并且不起作用。就我而言，由于我通过http://localhost:3000/signup访问了该页面，因此我不得不使用以下白名单命令：
```
curl -X POST -H "Content-Type: application/json" -d '{
  "whitelisted_domains":[
    "http://localhost:3000"
  ]
}' "https://graph.facebook.com/v2.6/me/messenger_profile?access_token=PAGE_ACCESS_TOKEN" 
```
我还必须在origin块的<div class="fb-messenger-checkbox"属性中使用同一个域。后来我发现我实际上可以使用ngrok域，但是，我必须使用http://abc364ef.ngrok.io/signup来访问页面，这太慢了，所以我更喜欢坚持使用http://localhost:3000。< / p>

Answer 2

您应该将自己的域https://developers.facebook.com/docs/messenger-platform/messenger-profile/domain-whitelisting

列入白名单

1）点击页面顶部的设置

2）单击左侧的Messenger平台

3）在白名单域名部分中为您的页面编辑白名单域

Answer 3

在我们的项目中，我们确定了几个失败点，这里是troubleshooting tips：

user_ref必须始终是唯一的。（即使每页刷新！）
检查您显示复选框的域是否已被删除列入白名单。如果您从类似的域名调用您的表单 https://your-domain.com/facebook/facebook.aspx然后列入白名单 https://your-domain.com/facebook也是！
如果allow_login参数设置为false，则需要有一个有效的Facebook用户会话（即未以网页身份登录），否则该插件将被隐藏。
origin属性是否与您托管的域相同插入？
目前Facebook不支持对localhost进行测试。（至少Facebook这么说。但是你可以通过使用ngrok克服这一点。）
检查Facebook Javascript SDK中的appId和messenger_app_id中的<div class="fb-messenger-checkbox"是否具有相同的值。

如何使用facebook messenger-checkbox修复CSP问题

3 个答案: