客户聊天不与客户聊天

Question

我想将Facebook客户聊天插件集成到一个反应性web应用程序中。

应用程序在URL：http://localhost:3000/上以开发模式运行

已使用的npm软件包:react送信-客户聊天

创建了一个新的Facebook应用程序和Facebook网站的同名，并将它们连接在Facebook上供开发人员使用。

将App和Page存储在响应端。

添加到设置-> Basic ->应用程序域: localhost (键入"http://localhost:3000/但保存为"localhost“)

添加了一个新的平台->网站：http://localhost:3000/

在->高级设置平台上白人化的->白化域：、、、

设置React代码，将参数传递给新组件。重新加载后，我从Facebook获得了200条响应，但是站点中显示了一个空的div，我无法使它正常工作(甚至尝试使用纯Javascript脚本或创建一个测试应用程序)。

用于App.js：

import React from 'react';
import MessengerCustomerChat from 'react-messenger-customer-chat';

import { FACEBOOK_APP_ID, FACEBOOK_PAGE_ID } from '../../shared/configuration';

const Chat = (props) => (
  <div>
    <MessengerCustomerChat pageId={FACEBOOK_PAGE_ID} appId={FACEBOOK_APP_ID} />
  </div>
);

export default Chat;

请求网址：

https://www.facebook.com/v2.11/plugins/customerchat.php?app_id=<MY_APP_APP_ID>&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Df197f00e47470a%26domain%3Dlocalhost%26origin%3Dhttp%253A%252F%252Flocalhost%253A3000%252Ff229f87298f7008%26relation%3Dparent.parent&container_width=0&locale=en_US&page_id=MY_APP_PAGE_ID>&request_time=1603379771509&sdk=joey

响应头：

alt-svc: h3-29=":443"; ma=3600,h3-27=":443"; ma=3600
cache-control: private, no-cache, no-store, must-revalidate
content-encoding: br
content-security-policy: default-src * data: blob: 'self';script-src *.facebook.com *.fbcdn.net *.facebook.net *.google-analytics.com *.virtualearth.net *.google.com 127.0.0.1:* *.spotilocal.com:* 'unsafe-inline' 'unsafe-eval' blob: data: 'self';style-src data: blob: 'unsafe-inline' *;connect-src *.facebook.com facebook.com *.fbcdn.net *.facebook.net *.spotilocal.com:* wss://*.facebook.com:* https://fb.scanandcleanlocal.com:* attachment.fbsbx.com ws://localhost:* blob: *.cdninstagram.com 'self' chrome-extension://boadgeojelhgndaghljhdicfkmllpafd chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm;block-all-mixed-content;upgrade-insecure-requests;
content-security-policy: frame-ancestors https://www.facebook.com;
content-type: text/html; charset="utf-8"
date: Thu, 22 Oct 2020 15:16:11 GMT
expires: Sat, 01 Jan 2000 00:00:00 GMT
facebook-api-version: v8.0
pragma: no-cache
status: 200
strict-transport-security: max-age=15552000; preload
vary: Accept-Encoding
x-content-type-options: nosniff
x-fb-debug: 3hcF+KdxLlfSCdNr3qJFo24n/o8y1GyMJRbFbyeBdoZdhniyI8ummvUQAGY6KB8GAdDePynl83js0QmsH6a5xA==
x-xss-protection: 0

HTML代码(第一个'div‘应该是’聊天‘组件内容，另外两行由npm包注入)：

​

这个问题的解决办法是什么？

Answer 1

在使用Facebook聊天插件开发和测试React应用程序时，域名作为"localhost“并不是一种选择。

操作系统主机文件中的react-with-chat-app.com

• On

• 必须添加一个新条目，例如: 127.0.0.1 HOST=react-with-chat-app.com

• Add /flushdns运行命令提示符作为管理员使用ipconfig /flushdns命令。

• 将.env文件添加到React项目的根目录中，并将您的新主机名:HOST=react-with-chat-app.com

• Add 添加到Facebook站点白名单域数组中，并将Facebook应用程序的网站也更改为.

• Restart React应用程序，并使用：进行访问。并测试chat functionality.