javascript - 客户聊天不适用于 React Messenger 客户聊天
问题描述
我想将 Facebook 客户聊天插件集成到 React Web 应用程序中。
应用程序以开发模式运行在 URL:http://localhost:3000/
使用的 npm 包:react-messenger-customer-chat
创建了一个新的同名 Facebook 应用程序和 Facebook 站点,并将它们连接到 Facebook for Developers。
在 React 端存储了App ID和Page ID。
在设置 -> 基本 ->应用程序域中添加:localhost(输入“http://localhost:3000/ 但保存为“localhost”
添加了一个新平台 ->网站:http://localhost:3000/
Messenger平台白名单->高级设置->白名单域:http: //127.0.0.1 :3000/ , https://127.0.0.1:3000/ , https://127.0.0.1:3000/ , https:// /127.0.0.1/
设置 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' 应该是 'Chat' 组件内容,其他两行由 npm 包注入):
这个问题的解决方案是什么?
解决方案
使用 Facebook 聊天插件开发和测试 React 应用程序时,不能选择域名作为“localhost”。
- 在操作系统的hosts文件中要添加一个新条目,例如:127.0.0.1 react-with-chat-app.com
- 在 Windows 上,使用ipconfig /flushdns命令以管理员身份运行命令提示符。
- 在 React 项目的根目录中添加.env文件,并添加您的新主机名: HOST=react-with-chat-app.com
- 将http://react-with-chat.com/添加到 Facebook 站点白名单域数组,并将 Facebook 应用程序的网站也更改为http://react-with-chat.com/。
- 重启 React 应用,使用http://react-with-chat-app.com:3000访问,测试聊天功能。
推荐阅读
- deep-learning - 深度 Q 学习:如何可视化收敛?
- wordpress - Wordpress 访问日志中的不间断 GET 请求
- javascript - 将颜色值 onclick 从黑色增加到红色 Javascript
- java - 与嵌入式 tomcat 交战
- python - 带有“w”参数的 Python 日志记录配置文件
- opencv3.0 - 使用opencv提取前景
- amazon-web-services - 使用什么从 OpenFIGI API 获取数据以存储到 AWS 或 Snowflake?
- flutter - 导航时未定义的命名“上下文”
- verilog - 如何解决verilog模块实例化错误
- vbscript - 在 VBscript 中删除文件