[英]Customer chat not working with React Messenger Customer Chat
我想將 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”不是一個選項。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.