Facebook 客户聊天显示空 iframe

Question

我尝试包含 Facebook 客户聊天并在本地主机上对其进行测试。但我只看到空的 iframe。

我没有任何错误，只有一个带有 .它也不会对 FB.CustomerChat.show();

做出反应

我的代码中的一些关键时刻：

js.src = "//connect.facebook.net/en_US/sdk/xfbml.customerchat.js";

Vue.use(vue_fb, {
        appId: process.env.FACEBOOK_AUTH_APP_ID,
        autoLogAppEvents: true,
        xfbml: true,
        version: 'v4.0'
    });```

Answer 1

localhost 不适用于测试此插件，因为需要将域列入白名单，https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/domain-whitelisting#requirements:

Domains must meet the following requirements to be whitelisted:
- Served over HTTPS
- Use a fully qualified domain name, such as https://www.messenger.com/. IP addresses and localhost are not supported for whitelisting.

本地设置的带有自签名证书的域名应该可以工作 - 所有相关的事情都发生在浏览器中，因此这是您唯一需要说服接受自签名证书的人。

但不处理颁发和嵌入您自己的证书的麻烦可能是更好的选择 - 而是使用 https://ngrok.com/ 之类的服务，它提供了一个简单的 HTTPS 隧道到您的本地主机，这是理想的选择适合测试这样的东西。

Facebook 客户聊天显示空 iframe

Facebook Customer Chat showing empty iframe

facebook

facebook-messenger