Блог

Я хотел бы интегрировать плагин для общения с клиентами Facebook в веб-приложение React.

Приложение запускается в режиме разработки по URL-адресу: http://localhost:3000 /

Используемый пакет npm: react-messenger-customer-chat

Создал новое приложение Facebook и сайт Facebook с тем же именем и соединил их в Facebook для разработчиков.

Сохранены идентификатор приложения и идентификатор страницы на стороне React.

Добавлено в Настройки -> Основные -> Домены приложений: 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, переданный в аргументах новому компоненту. После перезагрузки я получаю 200 ответов от Facebook, но на сайте отображается пустой 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;
  

URL-адрес запроса:

 https://www.facebook.com/v2.11/plugins/customerchat.php?app_id=<MY_APP_APP_ID>amp;channel=https://staticxx.facebook.com/x/connect/xd_arbiter/?version=46#cb=f197f00e47470a&domain=localhost&origin=http%3A%2F%2Flocalhost%3A3000%2Ff229f87298f7008&relation=parent.parentamp;container_width=0amp;locale=en_USamp;page_id=MY_APP_PAGE_ID>amp;request_time=1603379771509amp;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):

Каким может быть решение этой проблемы?

Доменное имя как «localhost» не является опцией при разработке и тестировании приложения React с помощью плагина Facebook Chat.

1. В файл операционной системы hosts необходимо добавить новую запись, например: 127.0.0.1 react-with-chat-app.com
2. В Windows запустите командную строку от имени администратора с помощью команды ipconfig / flushdns.
3. Добавьте файл .env в корень проекта React и добавьте свое новое имя хоста: HOST=react-with-chat-app.com
4. Добавить http://react-with-chat.com / в массив доменов белого списка сайта Facebook, а также измените веб-сайт приложения Facebook на http://react-with-chat.com /.
5. Перезапустите приложение React и получите доступ с помощью: http://react-with-chat-app.com:3000 , и протестируйте функциональность чата.