Реализация | Документация для разработчиков
Выполнение
Обновлено: 25 марта 2026 г
В этом документе объясняется, как внедрить встроенную регистрацию версии 4 и собирать генерируемые ею данные для регистрации бизнес-клиентов на платформе WhatsApp Business.
Прежде чем начать
Шаг 1: Добавьте разрешенные домены
Загрузите приложение на панель управления приложениями и перейдите в раздел «Вход через Facebook для бизнеса» > «Настройки» > «Настройки OAuth клиента» :
Установите следующие переключатели в положение «Да» :
Вход клиента через OAuthВход через Web OAuthПринудительное использование HTTPSВстроенный браузерный вход через OAuthИспользуйте строгий режим для URI перенаправленияВход в систему с помощью JavaScript SDK
Встроенная регистрация использует JavaScript SDK. Когда корпоративный клиент завершает процесс встроенной регистрации, в окно, запустившее этот процесс, возвращаются его WABA-идентификатор, идентификатор номера телефона компании и код обмена токена, но только если домен страницы, запустившей процесс, указан в «Разрешенные домены» и «Действительные URI перенаправления OAuth» .
Добавьте в эти поля все домены, где вы планируете размещать встроенную форму регистрации, включая любые домены для разработки, где вы будете тестировать процесс. Поддерживаются HTTPS
Шаг 2: Создание конфигурации входа через Facebook для бизнеса
Настройки функции Facebook Login for Business определяют, какие разрешения запрашивать и какую дополнительную информацию собирать у бизнес-клиентов, использующих встроенную форму регистрации.
Перейдите в раздел «Вход через Facebook для бизнеса» > «Настройки» :
Нажмите «Создать из шаблона» и создайте конфигурацию на основе Конфигурация встроенной регистрации WhatsApp с токеном истечения срока действия на 60 дней» . Это сгенерирует конфигурацию для наиболее часто используемых разрешений и уровней доступа.
В качестве альтернативы вы можете создать собственную конфигурацию. Для этого на «Конфигурации » нажмите «Создать конфигурацию» и укажите имя, которое поможет вам отличить эту пользовательскую конфигурацию от любых других, которые вы можете создать в будущем. При завершении процесса обязательно выберите через встроенную форму регистрации WhatsApp :
Выберите продукты, которые вы хотите подключить для этой конфигурации.
При выборе ресурсов и разрешений выбирайте только те ресурсы и разрешения, которые вам действительно понадобятся от ваших бизнес-клиентов. Уже выбранные ресурсы добавляются по умолчанию.
Например, если вы выберете «Каталоги» , но вам на самом деле не нужен доступ к каталогам клиентов, ваши клиенты, скорее всего, прервут процесс на экране выбора каталога и попросят вас уточнить.
После завершения процесса настройки зафиксируйте идентификатор конфигурации, поскольку он понадобится вам на следующем шаге.
Шаг 3: Добавьте встроенную форму регистрации на свой сайт
Добавьте следующий HTML-код и JavaScript на свой веб-сайт. Это полный код, необходимый для реализации встроенной регистрации. Каждая часть кода будет подробно объяснена ниже.
обработчик событий сообщения журнала сессии
Этот фрагмент кода создает обработчик событий сообщений, который собирает следующую важную информацию:
Новые идентификаторы активов, сгенерированные бизнес-клиентом, если он успешно завершил процессНазвание экрана, который они покинули, если они нарушили ход событийИдентификатор ошибки, если возникла ошибка и пользователь использовал схему для её сообщения
// Обработчик событий сообщения сессии window.addEventListener('message', (event) => { if (!event.origin.endsWith('facebook.com')) return; try { const data = JSON.parse(event.data); if (data.type === 'WA_EMBEDDED_SIGNUP') { console.log('message event: ', data); // удалить после тестирования // ваш код здесь } } catch { console.log('message event: ', event.data); // удалить после тестирования // ваш код здесь } });
Эта информация будет отправлена в виде объекта события сообщения окну, запустившему поток, и будет присвоена константе данных. Добавьте свой собственный код в блок try-catch, который сможет отправить этот объект на ваш сервер. Структура объекта будет меняться в зависимости от завершения потока, его прерывания или сообщения об ошибке, как описано ниже.
Структура успешного завершения потока:
На заключительном экране как нажатие кнопки «Готово» и закрытие всплывающего окна (например, нажатием кнопки «X») считаются успешным завершением регистрации. В обоих случаях будет возвращен обменный токен-код и объект информации о сессии, содержащий идентификаторы активов клиента. Выход с заключительного экрана не считается событием отмены.
{ data: { phone_number_id: '<CUSTOMER_BUSINESS_PHONE_NUMBER_ID> ', waba_id: '<CUSTOMER_WABA_ID> ', business_id: '<CUSTOMER_BUSINESS_PORTFOLIO_ID> ',<!-- only included if customer selected ad accounts --> ad_account_ids: ['<CUSTOMER_AD_ACCOUNT_ID_1> ', '<CUSTOMER_AD_ACCOUNT_ID_2> '],<!-- only included if customer selected Facebook Pages --> page_ids: ['<CUSTOMER_PAGE_ID_1> ', '<CUSTOMER_PAGE_ID_2> '],<!-- only included if customer selected datasets --> dataset_ids: ['<CUSTOMER_DATASET_ID_1> ', '<CUSTOMER_DATASET_ID_2> '],<!-- only included if customer selected catalogs --> catalog_ids: ['<CUSTOMER_CATALOG_ID_1> ', '<CUSTOMER_CATALOG_ID_2> '],<!-- only included if customer selected Instagram accounts --> instagram_account_ids: ['<CUSTOMER_IG_ACCOUNT_ID_1> ', '<CUSTOMER_IG_ACCOUNT_ID_2> '],<!-- only included for multi-WABA flows --> waba_ids: ['<CUSTOMER_WABA_ID_1> ', '<CUSTOMER_WABA_ID_2> '] }, тип: 'WA_EMBEDDED_SIGNUP', событие: '<FLOW_FINISH_TYPE> ', }| Заполнитель | Описание | Пример значения |
|---|---|---|
<CUSTOMER_BUSINESS_PHONE_NUMBER_ID> |
Идентификатор номера корпоративного телефона клиента |
106540352242922 |
<CUSTOMER_WABA_ID> |
Идентификатор бизнес-аккаунта WhatsApp клиента. |
524126980791429 |
<CUSTOMER_BUSINESS_PORTFOLIO_ID> |
Идентификатор бизнес-портфеля корпоративного клиента. |
2729063490586005 |
<CUSTOMER_AD_ACCOUNT_ID> |
Указывается только в том случае, если клиент выбрал рекламные аккаунты в процессе оформления заказа. Идентификатор рекламного аккаунта бизнес-клиента. |
4052175343162067 |
<CUSTOMER_PAGE_ID> |
Указывается только в том случае, если клиент выбрал «Страницы Facebook» в процессе оформления заказа. Идентификатор страницы Facebook клиента (для бизнеса). |
1791141545170328 |
<CUSTOMER_DATASET_ID> |
Включается только в том случае, если клиент выбрал наборы данных в процессе работы. Идентификатор набора данных бизнес-клиента. |
524126980791429 |
<CUSTOMER_CATALOG_ID> |
Указывается только в том случае, если клиент выбрал каталоги в процессе оформления заказа. Идентификатор каталога бизнес-клиента. |
8827498273649182 |
<CUSTOMER_IG_ACCOUNT_ID> |
Указывается только в том случае, если клиент выбрал учетные записи Instagram в процессе оформления заказа. Идентификатор учетной записи Instagram бизнес-клиента. |
1749204838281942 |
waba_ids ) |
Включено только для потоков с несколькими учетными записями WhatsApp Business. Массив идентификаторов учетных записей WhatsApp Business клиента. |
524126980791429 |
<FLOW_FINISH_TYPE> |
Указывает на то, что клиент успешно завершил процедуру.
Возможные значения: ЗАВЕРШЕНИЕ : Означает успешное завершение процесса работы с Cloud API .FINISH_ONLY_WABA : Указывает на то, что пользователь завершил процесс без указания номера телефона .FINISH_WHATSAPP_BUSINESS_APP_ONBOARDING : Указывает на завершение пользователем процесса регистрации в приложении WhatsApp Business .FINISH_OBO_MIGRATION : Указывает на то, что пользователь завершил процесс миграции от имени другого лица.FINISH_GRANT_ONLY_API_ACCESS : Указывает, что пользователь завершил процесс предоставления доступа к API только с правом предоставления доступа.ОШИБКА : Указывает на то, что пользователь столкнулся с ошибкой в процессе выполнения операции. |
ЗАКАНЧИВАТЬ |
Заброшенная гидротехническая структура:
{ data: { current_step: '<CURRENT_STEP> ', }, type: 'WA_EMBEDDED_SIGNUP', event: 'CANCEL', }| Заполнитель | Описание | Пример значения |
|---|---|---|
<CURRENT_STEP> |
Указывает, на каком экране находился бизнес-клиент, когда прервал процесс регистрации. Описание каждого шага разделе «Ошибки в процессе регистрации» |
НАСТРОЙКА_НОМЕРА_ТЕЛЕФОНА |
Ошибки, о которых сообщили пользователи
{ data: { error_message: '<ERROR_MESSAGE> ', error_code: '<ERROR_CODE> ', session_id: '<SESSION_ID> ', метка времени: '<TIMESTAMP> ', }, type: 'WA_EMBEDDED_SIGNUP', event: 'CANCEL', }| Заполнитель | Описание | Пример значения |
|---|---|---|
<ERROR_MESSAGE> |
Текст описания ошибки, отображаемый корпоративному клиенту в процессе встроенной регистрации. Список распространенных ошибок см. в разделе «Ошибки процесса встроенной регистрации» |
Ваше подтвержденное имя нарушает правила WhatsApp. Пожалуйста, измените свое подтвержденное имя и попробуйте снова. |
<ERROR_CODE> |
Код ошибки. Укажите это значение при обращении в службу поддержки. |
524126 |
<SESSION_ID> |
Уникальный идентификатор сессии, генерируемый встроенной системой регистрации. Укажите этот идентификатор при обращении в службу поддержки. |
f34b51dab5e0498 |
<TIMESTAMP> |
Временная метка Unix, указывающая, когда корпоративный клиент использовал встроенную регистрацию для сообщения об ошибке. Укажите это значение, если вы обращаетесь в службу поддержки. |
1746041036 |
Проанализируйте этот объект на своем сервере, чтобы извлечь и получить идентификатор номера телефона клиента и идентификатор WABA, или определить, какой экран он пропустил. Список возможных экранов см. в разделе « Пропущенные экраны».
Обратите внимание, что блок try-catch в приведенном выше коде содержит два оператора, которые можно использовать для целей тестирования:
console.log('message event: ', data); // удалить после тестирования console.log('message event: ', event.data); // удалить после тестирования
Эти операторы просто выводят в консоль JavaScript возвращенный номер телефона и идентификаторы WABA, или строку с экрана, на котором был сделан отказ. Вы можете оставить этот код и держать консоль открытой, чтобы легко видеть, что возвращается при тестировании процесса, но после завершения тестирования их следует удалить.
Ответный обратный вызов
Всякий раз, когда корпоративный клиент успешно завершает встроенную процедуру регистрации, мы отправляем обмениваемый токен-код в ответе JavaScript на окно, запустившее эту процедуру .
// Коллбэк ответа const fbLoginCallback = (response) => { if (response.authResponse) { const code = response.authResponse.code; console.log('response: ', code); // удалить после тестирования // ваш код здесь } else { console.log('response: ', response); // удалить после тестирования // ваш код здесь } }
Функция обратного вызова присваивает обмениваемый код токена
кода .Добавьте свой собственный код в оператор if-else, который отправит этот код на ваш сервер, чтобы вы могли позже обменять его на бизнес-токен клиента при регистрации бизнес-клиента .
Обратите внимание, что оператор if-else в приведенном выше коде содержит два оператора, которые можно использовать для целей тестирования:
console.log('response: ', code); // удалить после тестирования console.log('response: ', response); // удалить после тестирования
Эти операторы просто выводят код или необработанный ответ в консоль JavaScript. Вы можете оставить этот код на месте и держать консоль открытой, чтобы легко видеть, что возвращается при тестировании процесса, но после завершения тестирования их следует удалить.
Регистрация метода запуска и функции обратного вызова
Этот фрагмент кода определяет метод, который может быть вызван
onclick , регистрирующим ответ из предыдущего шага и запускающим встроенный процесс регистрации.Укажите здесь свой идентификатор конфигурации.
// Регистрация метода запуска и обратного вызова const launchWhatsAppSignup = () => { FB.login(fbLoginCallback, { config_id: '<CONFIGURATION_ID> ', // Здесь указывается ваш идентификатор конфигурации response_type: 'code', override_default_response_type: true, extras: { setup: {}, } }); }
Этот фрагмент кода определяет кнопку, которая при нажатии бизнес-клиентом вызывает метод запуска из предыдущего шага.
<!-- Launch button --><button onclick="launchWhatsAppSignup()" style="background-color: #1877f2; border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; height: 40px; padding: 0 24px;">Войти через Facebook</button>
Тестирование
После выполнения всех описанных выше шагов внедрения вы сможете протестировать процесс, имитируя действия бизнес-клиента и используя свои собственные учетные данные Meta. Любой пользователь, добавленный вами в качестве администратора или разработчика в ваше приложение (в панели управления приложением > Роли приложения > Роли ), также может начать тестирование процесса, используя свои собственные учетные данные Meta.
Привлечение корпоративных клиентов
Встроенная регистрация генерирует ресурсы для ваших бизнес-клиентов и предоставляет вашему приложению доступ к этим ресурсам. Однако вам все равно потребуется выполнить ряд вызовов API для полной регистрации новых бизнес-клиентов, завершивших процедуру.
Для подключения клиентов необходимы разные API-запросы, которые следует выполнять для партнеров по решениям и поставщиков/технологических партнеров.
Привлечение клиентов в качестве партнеров по решениямПривлечение клиентов в качестве поставщика технологических услуг
Комментарии отсутствуют
Комментарии отсутствуют