Интеграция WhatsApp в приложение с Maytapi API [JavaScript]

Что такое WhatsApp?

WhatsApp — это быстрая, простая и безопасная платформа для обмена сообщениями, созданная Facebook. Похвалы для приложения обычно исходят из его способности защищать сообщения, общаться с большими группами, отправлять сообщения без платы и бесплатно общаться на международном уровне.

Сообщается, что у приложения более 1,5 миллиарда пользователей.

Как работает API WhatsApp?

Важное различие между WhatsApp и SMS-сервисами заключается в том, что WhatsApp отправляет сообщения через Интернет. Это означает, что плата за SMS не взимается, а за международные голосовые звонки обычно не взимается плата. Чтобы использовать WhatsApp, человеку нужно;

1. телефонный номер
2. интернет-соединение
3. смартфон

Другие функции включают возможность отправки PDF, голосовых сообщений, документов, электронных таблиц и слайд-шоу.

Подключиться к Maytapi WhatsApp API

Споры

Главной особенностью является зашифрованный обмен сообщениями, что, в свою очередь, вызывает много критики. Зак Доффман, в статье, опубликованной на Forbes.com в конце 2019 года, писал;

Так в чем проблема? Проще говоря, если WhatsApp не может получить доступ к контенту, то правоохранительные органы и государственные органы также не могут получить к нему доступ. Не без ущерба для конечной точки, смартфона. Нет никакого уровня давления, которое можно было бы применить к платформе, чтобы она смягчилась, никаких судебных постановлений или ордеров, они не могут взломать шифрование без взлома.

Зашифрованные сообщения отправляются незаконными организациями и между ними, и платформа не может их отключить. Точно так же конкурирующие политические группировки в разных странах использовали платформу для общения без государственного шпионажа.

Простое погружение в вашу любимую поисковую систему даст много информации об этике WhatApp (а также таких альтернатив, как Telegram или WeChat). Кроме того, ознакомьтесь с этой статьей BuzzFeed о простых хаках, если вас интересуют менее спорные способы использования WhatsApp.

WhatsApp Веб

Помимо обмена сообщениями в мобильном приложении, пользователь может отсканировать QR-код своим телефоном для входа в WhatsApp Web. По сути, именно так мы собираемся интегрировать WhatsApp в наше приложение. Чтобы начать использовать WhatsApp Web;

Откройте https://web.whatsapp.com в браузере Chrome, Firefox, Opera, Safari или Edge и отсканируйте QR-код с помощью приложения WhatsApp на своем телефоне.WhatsApp.com

Чтобы отсканировать QR-код в приложении, перейдите в Настройки › WhatsApp Web/Desktop. Там вы можете увидеть устройства, на которых выполнен вход, и отсканировать QR-коды.

После сканирования открывается новая вкладка браузера, отображающая ваши чаты и сообщения. Впоследствии обмен сообщениями теперь можно выполнять из браузера. Но как мы можем интегрировать WhatsApp Web с нашим приложением?

Майтапи WhatsApp API

Maytapi — это API, который создает конечные точки для учетной записи пользователя WhatsApp. Следовательно, пользователь может отправлять и получать текстовые и мультимедийные сообщения через WhatsApp в приватных чатах.

API работает с WhatsApp Web и может программно отправлять сообщения WhatsApp с настроенного телефона через HTTP-запросы. Отправитель — это настроенный телефон для API, а получателем может быть любой действительный номер телефона (связанный с учетной записью WhatsApp), переданный в полезные данные почтового HTTP-запроса.

Кроме того, Maytapi может:

• передавать медиафайлы (до 2 МБ) в качестве параметра сообщения
• отправлять сообщения в группы
• отправить данные ответного сообщения на указанный URL-адрес веб-перехватчика

Например, предполагая, что я уже настроил конечную точку веб-перехватчика, — если я отправлю сообщение с помощью API на номер телефона, и этот человек ответит в WhatsApp, я получу веб-перехватчик, похожий на:

{
  product_id: 'productid',
  phone_id: 9999,
  message: {
    type: 'text',
    text: 'sample text',
    id: '[email protected]_3A64296F620C5245E26F_out',
    _serialized: '[email protected]_3A64296F620C5245E26F_out',
    fromMe: true
  },
  user: { id: '[email protected]', name: 'responders-number', phone: 'responders-number' },
  conversation: '[email protected]',
  receiver: 'mynumber',
  timestamp: 1582863093,
  type: 'message',
  reply: 'https://api.maytapi.com/api/myaccount/9999/sendMessage',
  productId: 'productid',
  phoneId: 9999
}

С помощью этой информации я мог захватить ответное сообщение или отправить другое сообщение, используя номер, указанный в объекте user (это номер человека, которому мы отправили исходное сообщение).

Является ли WhatsApp API бесплатным?

К сожалению нет. Стоимость MayTapi WhatsApp API составляет 29 долларов в месяц за неограниченное количество запросов к API.

Подключиться к Maytapi WhatsApp API

Еще одна гипотеза перед интеграцией

Скажем, я:

• настроил мой личный мобильный телефон в качестве основного телефона для моей учетной записи Maytapi API
• отправил сообщение на другой номер телефона программно с помощью API

После того, как я отправил сообщение, я увидел новый разговор, начавшийся в моих чатах WhatsApp на моем телефоне. Это потому, что API использует мой телефон для отправки сообщений. Кроме того, я мог бы пообщаться с другим человеком в приложении, если бы он захотел ответить.

Мы можем легко настроить телефон в RapidAPI Maytapi Dashboard, и я проведу вас через шаги в следующем разделе. Помимо настройки телефона, я объясню некоторые другие конечные точки и приведу пример интеграции в форме регистрации. Давайте начнем!

Как получить доступ к WhatsApp API?

1. Зарегистрируйте бесплатную учетную запись RapidAPI

Сначала зарегистрируйте учетную запись на RapidAPI.com. Это бесплатно!

2. Перейдите на страницу MayTapi WhatsApp API.

В RapidAPI выполните поиск WhatsApp или нажмите на эту ссылку, чтобы перейти на страницу API WhatsApp.

3. Подпишитесь на API

Оттуда нажмите на вкладку Цены и подпишитесь на API. Всего за 29 долларов США в месяц вы получите неограниченное количество запросов API.

Подключиться к Maytapi WhatsApp API

Как добавить интеграцию WhatsApp в приложение с помощью JavaScript

Предпосылки

Для завершения примера вам понадобится несколько вещей:

• Учетная запись RapidAPI
• подписка на Maytapi API на RapidAPI
• WhatApps, загруженные на ваш смартфон
• интернет-соединение
• понимание NodeJS и ReactJS
• общее понимание того, как открыть и использовать командную строку
• ngrok установлен локально (инструкция по MAC)
• netlify cli установлен

Проверка всего из списка может занять несколько минут, но скоро вернитесь и продолжите!

1. Подключите API к телефону

Перейдите к Maytapi API на RapidAPI.

Выберите конечную точку addPhone.

Добавьте свой номер телефона в качестве значения параметра number. Вам нужно будет добавить код страны в начале номера.

Затем нажмите Проверить конечную точку выше на странице.

Тело ответа отображается рядом с тем местом, где был добавлен требуемый параметр номера телефона. Это будет выглядеть так:

{
    "pid":"rapidapi-yourusername",
    "number":NULL,
    "status":NULL,
    "id":9999,
}

Запишите параметр id. Это идентификатор вашего телефона. Он используется в последующих вызовах.

Затем в левой части экрана выберите конечную точку getScreen.

Введите свой идентификатор телефона в качестве параметра phone_id в середине панели инструментов.

Если вы потеряли свой идентификатор, конечная точка getListPhones вернет список зарегистрированных телефонов.

Наконец, конечная точка возвращает снимок экрана с QR-кодом, который необходимо отсканировать телефоном, к которому вы пытаетесь подключиться.

Возможно, вы не сможете отсканировать маленькое изображение, и вам придется открыть изображение в новой вкладке.

Кроме того, QR-коды часто меняются, поэтому вам может потребоваться сделать это несколько раз, прежде чем вы поймаете действительный QR-код.

Есть два способа проверить, вошли ли вы в систему:

1. В разделе Устройства, вошедшие в систему на вашем телефоне будет устройство Windows.
2. Запустите конечную точку getStatus на панели инструментов с идентификатором телефона в качестве параметра. Объект ответа должен иметь параметр loggedIn со значением true.

Хорошая работа! Теперь телефон настроен правильно.

Тестовое сообщение

Мы можем отправить тестовое сообщение самим себе, используя конечную точку sendMessage на панели управления RapidAPI.

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

Подключиться к Maytapi WhatsApp API

2. Клонировать репозиторий проектов

Описание Проекта

Я создал небольшой пример проекта, который был загружен с помощью Create React App. Кроме того, проект использует функции Netlify в качестве бессерверных функций.

Если мы используем функции Netlify, интерфейс командной строки Netlify, ngrok и приложение Create React, мы можем настроить среду разработки, которая действует как интерфейс, сервер и имеет возможность использовать реальные веб-хуки, отправленные на прокси. URL-адрес, настроенный с помощью ngrok.

Мы можем сделать все это в нашем каталоге проекта, без необходимости настраивать код на сервере и добавлять много кода.

В качестве бонуса мы также используем API REST Country в RapidAPI для получения списка стран и соответствующих им кодов стран. Возвращаемые данные достаточно полны в каждой стране, а API предоставляется бесплатно. Ответ от этого API генерирует список стран для выбранного ввода в форме.

Если вы пришли из Express, подумайте о папке functions как об отдельных маршрутах. После того, как сервер разработки запущен на localhost:8888, доступ к функциям можно получить на /.netlify/functions/[function name].

Кроме того, папка lambda представляет собой скомпилированную версию полей нашего кода в папке functions. Подробнее о настройке файловой системы вы можете прочитать в Документации Netlify.

Клонировать репозиторий

Клонируем репозиторий с Github:

git clone https://github.com/jdretz/rapidapi-whatsapp-integration-maytapi.git

Перейдите в каталог проекта и запустите npm install. Для установки зависимостей потребуется некоторое время.

В корне проекта создайте файл .env. Внутри файла добавьте:

REACT_APP_RAPIDAPI_KEY=[your rapidapi key]

Затем откройте файл sendMessage.js. Измените URL-адрес в строке 18, заменив PHONE_ID своим четырехзначным идентификатором телефона.

После этого в верхней части файла импортируйте ключ RapidAPI из среды или жестко закодируйте его в переменную headers для целей тестирования.

Наконец, запустите netlify dev в проекте с правами root, чтобы запустить сервер разработки. Команда объяснена нетехническим языком;

• обнаруживает и запускает приложение React на порту 3000
• создает бессерверные функции в папке functions и обслуживает их через порт 34567 или /.netlify/functions/[function name]
• создает сервер разработки, прослушивающий порт 8888, объединяющий два мира, чтобы мы могли делать все на одном порту (8888).

Доступ к нашим приложениям будет осуществляться по адресу http://localhost:8888.

Подключиться к Maytapi WhatsApp API

3. Настройте вебхук

Нам нужно настроить доступный URL-адрес, чтобы протестировать веб-перехватчик ответа. Для этого запустите ngrok http 8888 в новом терминале.

Терминал отобразит такой экран:

Затем взгляните на первую строку с надписью Переадресация. Скопируйте этот URL-адрес и вернитесь в панель управления RapidAPI. URL-адрес будет похож на http://idnumber.ngrok.io.

На панели инструментов выберите конечную точку setWebhook. Прокрутите вниз и введите скопированный URL-адрес, но объедините его с /.netlify/functions/webhooks.

Чтобы уточнить, проект, который вы клонировали, имеет бессерверную функцию под названием webhooks. Этот файл находится в папке functions. Netlify будет выполнять функции, которые мы создаем в /.netlify/functions/[function name].

Проверка файла webhooks.js показывает, что мы записываем данные ответа в консоль при получении веб-перехватчика.

Наконец, вернувшись на свой телефон в чат, наберите сообщение в ответ на наше программно отправленное сообщение.

Должны произойти две вещи:

1. Ответ веб-перехватчика регистрируется в работающем терминале.

Request from ::1: POST /.netlify/functions/webhooks
{
  product_id: 'product-id',
  phone_id: 9999,
  message: {
    type: 'text',
    text: 'Hey this is super awesome way to get in touch with me!',
    id: '[email protected]_3A77C9634C59ABC88FC5_out',
    _serialized: '[email protected]_3A77C9634C59ABC88FC5_out',
    fromMe: true
  },
  user: { id: '[email protected]', name: 'receiversNumber', phone: 'receiversNumber' },
  conversation: '[email protected]',
  receiver: 'receiversNumber',
  timestamp: 1582919890,
  type: 'message',
  reply: 'https://api.maytapi.com/api/productid/phone_id/sendMessage',
  productId: 'productID',
  phoneId: 9999
}
Response with status 200 in 52 ms.

2. Терминал, на котором работает ngrok, отобразит конечную точку, получившую вебхук, с кодом состояния (200, если он сработал).

И вот оно! Подводя итог, у нас теперь есть:

• настроенный телефон для Maytapi API, который интегрируется с WhatsApp
• функция, которая может динамически и программно отправлять сообщения WhatsApp с пользовательскими сообщениями
• веб-хук, который получает и обрабатывает данные ответа, отправленные на наш телефон

Подключиться к Maytapi WhatsApp API

Вывод

Подводя итог, учебник может показаться довольно самоуверенным, но концепции и жизненно важный код — нет. Вызов API для отправки сообщения (в sendMessage.js) будет работать практически в любой другой настройке, использующей NodeJS. То же самое касается URL-адреса веб-перехватчика. Веб-перехватчик — это простой POST-запрос, поступающий от API, и его можно обрабатывать разными способами.

Этот момент важно помнить, если вы не знакомы с бессерверными функциями Netlify или бессерверными функциями в целом.

Я не приводил примеры группового обмена сообщениями или отправки изображений, но есть примеры на RapidAPI и примеры на Maytapi, которые легко воспроизвести теперь, когда вы знаете, как использовать API.

Эта настройка может свести вас с ума от спама и соблазнить распространить свою маркетинговую манию на всех, у кого есть учетная запись WhatsApp. Однако отправка сообщения кому-либо, не входящему в ваш список контактов, может быть расценена как спам. Кроме того, вас могут забанить, если вы несколько раз (5–10) были отмечены как спам. У Maytapi есть больше советов, как не попасть в бан на их сайте.

Первоначально опубликовано на https://rapidapi.com 4 марта 2020 г.