如何在Facebook游戏页添加Messanger复选框插件及解决聊天插件CSP错误

嗨，咱们一步步解决你的两个Facebook Messenger插件问题——先搞定Customer Chat插件的CSP错误，再把Checkbox插件加到你的Facebook游戏页面上。我之前也遇到过类似Canvas应用的插件问题，下面是可行的解决方案：

一、修复Customer Chat插件的CSP/Origin问题 #

从错误信息来看，问题出在Facebook的Customer Chat插件页面的CSP规则不允许被Facebook自身的Canvas iframe嵌入（因为你的应用此时运行在apps.facebook.com的iframe里，而插件默认只信任你直接的域名）。按照以下步骤调整：

1. 确认应用与Facebook Page的关联

   • 打开Facebook开发者平台，进入你的应用，转到「Messenger」→「Settings」，在「Page Settings」区域选择你的目标Page（122137601YYYYYY）完成关联。这是插件正常工作的基础。

2. 更新应用的域名配置

   • 进入应用的「Settings」→「Basic」：
     • 在「App Domains」中添加你的域名，包括端口：game.XXXXXX.in:3093；
     • 在「Valid OAuth Redirect URIs」中填入你的应用完整URL：https://game.XXXXXX.in:3093/；
     • 转到「Settings」→「Advanced」→「Security」，找到「Allowed Domains for the Customer Chat Plugin」，添加game.XXXXXX.in:3093和apps.facebook.com（因为你的应用嵌入在这个Facebook域名下）。

3. 调整页面的Content Security Policy（如果你的页面自定义了CSP）

   • 如果你的页面设置了CSP规则，必须添加以下条目，确保允许加载Facebook的插件资源：

     frame-src https://www.facebook.com;
     script-src https://connect.facebook.net;
     style-src https://www.facebook.com;
     

   • 另外，如果你设置了frame-ancestors，需要把Facebook的Canvas域名加进去，允许你的页面被嵌入：

     frame-ancestors https://game.XXXXXX.in:3093 https://apps.facebook.com;
     

4. 优化插件初始化代码

   • 注意你用的SDK版本v2.6太旧了，建议升级到最新稳定版（比如v18.0），避免兼容性问题。同时确保初始化代码在页面加载时正确执行：

     <div class="fb-customerchat"
          page_id="122137601YYYYYY"
          minimized="true"
          locale="en_US">
     </div>
     
     <script>
       window.fbAsyncInit = function() {
         FB.init({
           appId            : '142034109YYYYYY',
           autoLogAppEvents : true,
           xfbml            : true,
           version          : 'v18.0' // 升级到最新版本
         });
       };
     
       (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 = "https://connect.facebook.net/en_US/sdk.js";
          fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
     </script>
     

二、在Facebook游戏页面添加Messenger复选框插件 #

Facebook游戏页面指的是你的Canvas应用页面（https://apps.facebook.com/你的应用ID/），要在这里添加复选框插件，按以下步骤操作：

1. 确保应用已关联目标Page

   • 同上，先完成应用与你的Page的关联，这是插件生效的前提。

2. 插入复选框插件代码

   • 在游戏页面的合适位置添加以下代码，注意替换关键参数：

     <div class="fb-messenger-checkbox"
          origin="https://game.XXXXXX.in:3093" <!-- 必须和你的应用域名一致，带端口 -->
          page_id="122137601YYYYYY"
          messenger_app_id="142034109YYYYYY"
          user_ref="你的游戏用户唯一ID" <!-- 替换为每个用户的专属标识，比如游戏内的UID -->
          prechecked="false"
          allow_login="true"
          size="large">
     </div>
     

   • 重点：origin参数必须严格匹配你的应用实际域名（带端口），这是插件验证用户来源的关键。

3. 初始化并渲染插件

   • 确保Facebook SDK已正确加载，若页面是动态渲染的，需手动调用FB.XFBML.parse()来触发插件渲染。

4. 配置Webhook接收订阅事件

   • 转到开发者平台的「Messenger」→「Webhooks」，设置你的Webhook URL，并订阅messaging_optins事件。当用户勾选复选框确认后，你会收到该事件，从而获取用户的Messenger ID，实现后续消息推送。

内容的提问来源于stack exchange，提问作者Nitin Bhanderi