Введение

Messages API интегрируется в Client SDK. Это обеспечит простой метод, с помощью которого ваши клиенты через Facebook Messenger, WhatsApp, Viber и другие смогут общаться с созданным вами приложением.

К концу этого сообщения в блоге у вас будет веб-приложение, способное отправлять и получать сообщения с вашей страницы Facebook и Messenger вашей страницы. Будет предоставлен пример кода, и будут объяснены соответствующие части интеграции API сообщений.

Создать страницу в Facebook

Войдите в Facebook и создайте тестовую страницу Facebook. Вы также можете протестировать уже существующую страницу.

Настройте образец веб-приложения

Сделайте свою копию примера веб-приложения, сделав ремикс этого глюка. Чтобы настроить приложение, следуйте инструкциям в файле readme. Пример приложения следует сценарию входа агента в панель мониторинга с текущими разговорами между клиентами страницы Facebook и агентом. С левой стороны происходят все разговоры, и агент может присоединиться к одному из них.

Когда агент нажимает на беседу, приложение чата с пользователем Facebook открывается в новом окне. Приложение для чата основано на том, что было создано в учебнике Создание приложения для чата.

Свяжите свою страницу Facebook с вашим приложением Vonage

Все, что осталось от настройки, — это подключить вашу страницу Facebook к веб-приложению, чтобы они могли общаться туда и обратно. Вот шаги:

  • На странице «Социальные каналы» нажмите Facebook Messenger

  • Следуйте инструкциям, чтобы связать свою страницу Facebook с вашей учетной записью Vonage.

  • Выберите страницу (страницы) Facebook для подключения к Vonage.

  • Убедитесь, что вы используете правильную учетную запись Facebook

  • Просмотрите разрешения, предоставленные Vonage.

  • Подтверждение того, что Vonage удалось успешно связать

  • Выберите страницу Facebook, которая была связана с Vonage, и завершите настройку.

  • Поздравляем, ваша страница Facebook успешно подключена

  • Теперь, когда Vonage знает о вашей странице в Facebook, давайте подключимся к вашему приложению Vonage, которое было создано, когда вы настроили образец с помощью Glitch. Либо нажмите «Связать с приложением», либо перейдите в раздел «Приложения» на панели инструментов.

  • Выберите приложение, которое вы создали при настройке образца Glitch, и нажмите «Ссылка».

Попробуйте

Разместите веб-приложение в одном окне браузера, а в другом откройте Facebook Messenger и при необходимости авторизуйтесь. Если вы еще этого не сделали, введите имя в веб-приложении, чтобы войти в панель управления. Думайте об этом как о своем имени или имени агента, это просто простой способ войти в систему. Теперь в Messenger найдите страницу Facebook, которую вы связали с приложением, и отправьте сообщение. В окне с вашим веб-приложением должна появиться карточка в разделе Все беседы. Нажмите Присоединиться, откроется приложение чата, и вы должны увидеть сообщение в чате. Отправьте сообщение из приложения чата, и оно должно появиться в вашем Facebook Messenger.

Что происходит

Давайте взглянем на код, задействованный для реализации вышеуказанного. Когда пользователь отправляет сообщение на вашу страницу в Facebook, Vonage отправляет его на входящий веб-перехватчик вашего веб-приложения. Веб-перехватчик возвращает объект, который позволяет Vonage знать, как обрабатывать сообщение. В этом случае мы отправляем обратно информацию, необходимую для интеграции Client SDK Messages API, чтобы связать пользователя Facebook с вашим веб-приложением для беседы. Это включает в себя идентификатор пользователя Facebook и название беседы (которое мы устанавливаем в качестве идентификатора пользователя Facebook, чтобы оно было уникальным).

Если это первый раз, когда пользователь Facebook отправляет сообщение, создается новый разговор. Это создает событие conversation:created, которое мы прослушиваем в веб-перехватчике событий. Серверная часть веб-приложения берет это событие и переупаковывает его как пользовательское событие custom:new_conv, которое можно использовать для уведомления панели мониторинга агента о необходимости отображения нового диалога.

В коде приложения чата есть прослушиватель событий message:received, который срабатывает при получении сообщения от пользователя Facebook. Затем он берет сообщение и добавляет его на дисплей чата.

Когда агент отвечает пользователю Facebook, это исходящее сообщение. Полная реализация исходящих сообщений в Client SDK будет завершена в следующем выпуске. До тех пор, точно так же, как прослушивание при создании нового диалога, мы можем прослушивать, когда событие custom:chat отправляется в веб-перехватчик событий. Vonage Node SDK используется для передачи сообщения агента пользователю Facebook.

Для тех, кто интересуется, FB_RECIPIENT_ID также является именем беседы, которое было установлено при отправке исходного сообщения от пользователя Facebook. Получение значения для FB_SENDER_ID, идентификатора страницы Facebook, немного сложнее. Когда агент открывает чат, делается запрос к конечной точке getChatAppAccounts сервера, которая выполняет вызов chatapp-accounts API Vonage с JWT администратора. Идентификатор страницы Facebook находится в ответе, который мы отправляем обратно клиенту. Хорошая новость заключается в том, что когда Outbound Messages будет интегрирован, вам не придется ни о чем беспокоиться, а Client SDK позаботится обо всем. Это пример того, как Client SDK может быть очень полезен при разработке приложений.

Маленькая ловушка

Если ваши исходящие сообщения внезапно перестали работать, проверьте журнал сервера на наличие ошибок. Если вы столкнулись с ошибкой, которая имеет это:

Это означает, что срок действия токена вашей страницы Facebook истек, и его необходимо обновить. Войдите в панель управления Vonage и перейдите в Сообщения и рассылка, затем в Социальные каналы. Рядом со страницей Facebook должна быть кнопка для обновления токена.

Заключение

Вот и все! С API сообщений, интегрированным в Client SDK, намного проще общаться с пользователем Facebook из вашего собственного веб-приложения.

Следующие шаги

Пожалуйста, ознакомьтесь с нашей Документацией по Client SDK. Там есть дополнительная информация о методах, используемых для создания панели агента, а также учебные пособия, руководства и многое другое. Возникли проблемы с демо-приложением? Хотите добавить новый функционал? Любые вопросы, комментарии и/или отзывы, пожалуйста, сообщите нам об этом на нашем Канале сообщества Slack.

Первоначально опубликовано на странице https://learn.vonage.com/blog/2021/10/14/build-a-web-application-to-chat-with-your-facebook-page-users/