Реализация | Документация для разработчиков
Выполнение
Обновлено: 25 марта 2026 г
В этом документе объясняется, как внедрить встроенную регистрацию версии 4 и собирать генерируемые ею данные для регистрации бизнес-клиентов на платформе WhatsApp Business.
Прежде чем начать
Шаг 1: Добавьте разрешенные домены
Загрузите приложение на панель управления приложениями и перейдите в раздел «Вход через Facebook для бизнеса» > «Настройки» > «Настройки OAuth клиента» :
Установите следующие переключатели в положение «Да» :
Встроенная регистрация основана на JavaScript SDK. Когда корпоративный клиент завершает процесс встроенной регистрации, клиент'клиент'Идентификатор WABA, идентификатор номера телефона компании и обмениваемый токен будут возвращены в окно, запустившее процесс, но только если домен страницы, запустившей процесс, указан в списке Разрешенные домены и Допустимые URI перенаправления OAuth поля.
Добавьте в эти поля все домены, где вы планируете размещать встроенную форму регистрации, включая любые домены для разработки, где вы будете тестировать процесс. Поддерживаются HTTPS
Шаг 2: Создание конфигурации входа через Facebook для бизнеса
Настройки функции Facebook Login for Business определяют, какие разрешения запрашивать и какую дополнительную информацию собирать у бизнес-клиентов, использующих встроенную форму регистрации.
Перейдите в раздел «Вход через Facebook для бизнеса» > «Настройки» :
Нажмите «Создать из шаблона» и создайте конфигурацию на основе Конфигурация встроенной регистрации WhatsApp с токеном истечения срока действия на 60 дней» . Это сгенерирует конфигурацию для наиболее часто используемых разрешений и уровней доступа.
В качестве альтернативы вы можете создать собственную конфигурацию. Для этого на «Конфигурации » нажмите «Создать конфигурацию» и укажите имя, которое поможет вам отличить эту пользовательскую конфигурацию от любых других, которые вы можете создать в будущем. При завершении процесса обязательно выберите через встроенную форму регистрации WhatsApp :
Выберите продукты, которые вы хотите подключить для этой конфигурации.
При выборе ресурсов и разрешений выбирайте только те ресурсы и разрешения, которые вам действительно понадобятся от ваших бизнес-клиентов. Уже выбранные ресурсы добавляются по умолчанию.
Например, если вы выберете Каталоги актив, но дон'дон'Если вам на самом деле не нужен доступ к каталогам клиентов, ваши клиенты, скорее всего, прервут процесс на экране выбора товаров из каталога и попросят вас уточнить.
После завершения процесса настройки зафиксируйте идентификатор конфигурации, поскольку он понадобится вам на следующем шаге.
Шаг 3: Добавьте встроенную форму регистрации на свой сайт
Добавьте следующий HTML-код и JavaScript на свой веб-сайт. Это полный код, необходимый для реализации встроенной регистрации. Каждая часть кода будет подробно объяснена ниже.
обработчик событий сообщения журнала сессии
Этот фрагмент кода создает обработчик событий сообщений, который собирает следующую важную информацию:
<!-- SDK loading --> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script> <script> // SDK initialization window.fbAsyncInit = function() { FB.init({ appId: '<APP_ID>', // your app ID goes here autoLogAppEvents: true, xfbml: true, version: '<GRAPH_API_VERSION>' // Graph API version goes here }); };// Обработчик событий сообщения сессии 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); // удалить после тестирования // ваш код здесь } });// Коллбэк ответа const fbLoginCallback = (response) => { if (response.authResponse) { const code = response.authResponse.code; console.log('response: ', code); // удалить после тестирования // ваш код здесь } else { console.log('response: ', response); // удалить после тестирования // ваш код здесь } } // Регистрация метода запуска и коллбэка const launchWhatsAppSignup = () => { FB.login(fbLoginCallback, { config_id: '<CONFIGURATION_ID> ', // Здесь указывается ваш идентификатор конфигурации response_type: 'code', override_default_response_type: true, extras: { setup: {}, } }); }</script><!-- 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>
Загрузка SDK
<!-- SDK loading --> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
Инициализация SDK
// Инициализация SDK window.fbAsyncInit = function() { FB.init({ appId: '<APP_ID> ', // Здесь указывается идентификатор вашего приложения autoLogAppEvents: true, xfbml: true, version: '<GRAPH_API_VERSION> ' // Версия Graph API здесь }); };
| | |
|
обработчик событий сообщения журнала сессии
// Обработчик событий сообщения сессии 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.
1749204838281942waba_ids )Включено только для потоков с несколькими WABA-серверами. Массив бизнес-процессов клиент'клиент'Идентификаторы бизнес-аккаунтов WhatsApp.
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, или для определения того, с какого экрана они сошли. См Заброшенные фильтры для фильтрации список возможных
<CURRENT_STEP> значения и соответствующие им экраны.Обратите внимание, что блок 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, который отправит этот код на ваш сервер чтобы позже вы могли обменять его на клиент'клиент'бизнес-токен, когда вы бортовой клиент бизнес-клиента.
Срок действия обмениваемого токена составляет 30 секунд, поэтому убедитесь, что вы можете обменять его на другой токен клиент'клиент'Если вы тестируете и просто выводите ответ в консоль JavaScript, а затем вручную обмениваете код с помощью другого приложения, например Postman, или терминала с помощью cURL, мы рекомендуем настроить запрос на обмен токенов до начала тестирования.
Обратите внимание, что оператор 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-запросы, которые следует выполнять для партнеров по решениям и поставщиков/технологических партнеров.