Встроенная регистрация

Используйте свое приложение Meta и партнерское решение для подключения клиентов к WhatsApp через ваше программное обеспечение. Перед выполнением этих шагов завершите онбординг технического партнера по разработке. Сведения о варианте интеграции TP Lite см. в разделе Прямая партнерская ссылка (Partner Direct Link).

Шаг 1: Добавление разрешенных доменов

Войдите в панель приложений Meta for Developers и перейдите в Вход через Facebook для бизнеса > Настройки > Настройки OAuth клиента:

Установите следующие переключатели в положение Да:

Вход через OAuth клиента
Вход через OAuth для веб-приложений
Принудительное использование HTTPS
Вход через встроенный браузер OAuth
Использовать строгий режим для URI перенаправления
Вход с помощью JavaScript SDK

⚠️ Примечания:

Embedded Signup работает на основе JavaScript SDK.
Когда корпоративные клиенты завершают процесс Embedded Signup, их WABA ID, ID рабочего номера телефона и обмениваемый код токена возвращаются в окно, инициировавшее процесс, но только в том случае, если домен этой страницы был добавлен как в Разрешенные домены , так и в Действительные URI перенаправления OAuth.
Добавьте все домены, на которых вы планируете развернуть Embedded Signup (включая тестовые домены в средах разработки).
Поддерживаются только домены с поддержкой HTTPS.

Конфигурация Facebook Login for Business определяет, какие разрешения запрашивать и какую дополнительную информацию собирать при использовании Embedded Signup корпоративными клиентами. В консоли перейдите в раздел Вход через Facebook для бизнеса > Конфигурации.

Нажмите Создать из шаблона и выберите WhatsApp Embedded Signup Configuration With 60 Expiration Token , чтобы создать конфигурацию. Этот шаблон генерирует конфигурацию с наиболее часто используемыми разрешениями и уровнями доступа.

После завершения настройки сохраните ID конфигурации — он понадобится на следующем шаге.

Добавьте следующий код HTML и JavaScript на свой сайт. Это полный код, необходимый для реализации Embedded Signup. Мы рекомендуем настраивать различные сценарии Embedded Signup в зависимости от вашего решения или потребностей клиентов:

<html>
  <head>
    <meta charset="utf-8" />
    <script>
      window.fbAsyncInit = function () {
        FB.init({
          appId: '{YOUR-FACEBOOK-APP-ID}', // Facebook App ID
          cookie: true,
          xfbml: true,
          version: 'v22.0', // Graph API version
        })
      }

      ;(function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0]
        if (d.getElementById(id)) return
        js = d.createElement(s)
        js.id = id
        js.setAttribute('defer', true)
        js.src = 'https://connect.facebook.net/en_US/sdk.js'
        fjs.parentNode.insertBefore(js, fjs)
      })(document, 'script', 'facebook-jssdk')

      function launchWhatsAppSignup() {
        FB.login(
          function (response) {
            if (response.status === 'connected' && response.authResponse) {
              const code = response.authResponse.code
              console.log('User authResponse code:', code)
              // Send the code to your backend to exchange for a System User access token
            } else {
              console.log('User cancelled login or did not fully authorize.')
            }
          },
          {
            config_id: '{YOUR-CONFIGURATION-ID}',
            response_type: 'code',
            override_default_response_type: true,
            extras: {
              features: [{ name: 'marketing_messages_lite' }],
              setup: { solutionID: '{YOUR-SOLUTION-ID}' },
              sessionInfoVersion: '3',
            },
          },
        )
      }

      const sessionInfoListener = (event) => {
        if (!event.origin?.endsWith('facebook.com')) return
        try {
          const data = JSON.parse(event.data)
          if (data.type === 'WA_EMBEDDED_SIGNUP') {
            if (data.event === 'FINISH') {
              const { phone_number_id, waba_id, businessId } = data.data
              console.log(
                'Business ID ', businessId,
                'Phone number ID ', phone_number_id,
                'WABA ID ', waba_id
              )
            } else if (data.event === 'ERROR') {
              console.error('error ', data.data.error_message)
            } else {
              console.warn('Cancel at ', data.data.current_step)
            }
          }
        } catch {
          console.log('Non JSON Response', event.data)
        }
      }

      window.addEventListener('message', sessionInfoListener)
    </script>
  </head>
  <body>
    <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;">
      Launch Embedded Signup
    </button>
  </body>
</html>

⚠️ Примечания:

Замените appId, config_id и solutionID на реальные значения.
Фронтенд должен передать waba_id и phone_number_id на ваш бэкенд для получения WABA и регистрации номера (см. ниже).

Подробнее: https://developers.facebook.com/docs/whatsapp/embedded-signup/implementation 2. Привязка WABA и зарегистрированного номера После того как клиент завершит процесс Embedded Signup, ваш фронтенд получит waba_id и phone_number_id и передаст их на ваш бэкенд для последующих вызовов API. Привязка WABA Вызовите API привязки WABA в YCloud, затем свяжите его с соответствующим аккаунтом клиента в вашей системе. Пример запроса:

curl -X POST -H 'X-API-Key: {{YOUR_API_KEY}}' \
    'https://api.ycloud.com/v2/whatsapp/businessAccounts/{wabaId}/tp/bind'

Пример успешного ответа:

{
    "id": "{{waba_id}}",
    "name": "WABA name",
    "accountReviewStatus": "APPROVED",
    "paymentMethodAttached": true,
    "currency": "AUD",
    "timezoneId": "1"
}

Примечание: если в поле ответа paymentMethodAttached указано значение true, это означает, что YCloud успешно привязал способ оплаты к этому WABA. В противном случае обратитесь к команде YCloud для решения проблемы. Регистрация номера телефона

curl -XPOST 'https://api.ycloud.com/v2/whatsapp/phoneNumbers/{{waba_id}}/{{phone_number_id}}/register' \
  -H 'X-API-Key: {{YOUR-API-KEY}}'

Пример ответа

{
  "phoneNumber": "{{phonenumber}}",
  "wabaId": "{{waba_id}}",
  "verifiedName": "Phone number name",
  "qualityRating": "GREEN",
  "messagingLimit": "TIER_250",
  "status": "CONNECTED"
}

<html>
  <head>
    <meta charset="utf-8" />
    <script>
      window.fbAsyncInit = function () {
        FB.init({
          appId: '{YOUR-FACEBOOK-APP-ID}',
          cookie: true,
          xfbml: true,
          version: 'v22.0',
        });
      };
      (function (d, s, id) {
        var js,
          fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.setAttribute('defer', true);
        js.src = 'https://connect.facebook.net/en_US/sdk.js';
        fjs.parentNode.insertBefore(js, fjs);
      })(document, 'script', 'facebook-jssdk');

      function launchWhatsAppSignup() {
        FB.login(
          function (response) {
            if (response.status === 'connected' && response.authResponse) {
              const code = response.authResponse.code;
              console.log('User authResponse code:', code);
            } else {
              console.log('User cancelled login or did not fully authorize.');
            }
          },
          {
            config_id: '{YOUR-CONFIGURATION-ID}',
            response_type: 'code',
            override_default_response_type: true,
            extras: {
              setup: { solutionID: '{YOUR-SOLUTION-ID}' },
              sessionInfoVersion: 3,
              featureType: 'whatsapp_business_app_onboarding',
            },
          },
        );
      }

      const sessionInfoListener = (event) => {
        if (!event.origin?.endsWith('facebook.com')) return;
        try {
          const data = JSON.parse(event.data);
          if (data.type === 'WA_EMBEDDED_SIGNUP') {
            if (data.event === 'FINISH_WHATSAPP_BUSINESS_APP_ONBOARDING' || (data.event === 'FINISH' && data.data.is_wa_login_user)) {
              const { business_id, waba_id, phone_number_id } = data.data;
              console.log('Business ID ', business_id, 'WABA ID ', waba_id, 'Phone number ID ', phone_number_id);
            } else if (data.event === 'ERROR') {
              console.error('error ', data.data.error_message);
            } else {
              console.warn('Cancel at ', data.data.current_step);
            }
          }
        } catch {
          console.log('Non JSON Response', event.data);
        }
      };

      window.addEventListener('message', sessionInfoListener);
    </script>
  </head>
  <body>
    <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"
    >
      Launch Embedded Signup
    </button>
  </body>
</html>

2. Получение WABA и привязка к YCloud

После того как клиенты завершат Embedded Signup, ваш фронтенд получит waba_id. Передайте его на свой бэкенд для дальнейших вызовов API. Вызовите SMB Bind API от YCloud. После успешного выполнения свяжите WABA с аккаунтом клиента в вашей системе.

curl 'POST /v2/whatsapp/businessAccounts/{wabaId}/smb/bind' \
  -H 'X-API-Key: {{YOUR-API-KEY}}'

Пример ответа

{
  "id": "{{phonenumber_id}}",
  "phoneNumber": "{{phonenumber}}",
  "wabaId": "{{waba_id}}",
  "qualityRating": "GREEN",
  "messagingLimit": "TIER_1K",
  "verifiedName": "John's Cake Shop",
  "codeVerificationStatus": "VERIFIED",
  "isOfficialBusinessAccount": true,
  "status": "PENDING",
  "nameStatus": "APPROVED",
  "newNameStatus": "APPROVED",
  "decision": "APPROVED",
  "requestedVerifiedName": "string",
  "rejectionReason": "string",
  "qualityUpdateEvent": "ONBOARDING"
}

Часто задаваемые вопросы

Если вы правильно настроили solutionID , клиенты увидят реальное имя Solution Partner во время авторизации через Facebook.
Если имя не отображается, конфигурация не вступила в силу.Пожалуйста, убедитесь, что проверка приложения (App Review) завершена.

В каких случаях YCloud не может привязать способ оплаты к WABA?

Это может произойти, если пользователь выбирает существующий WABA вместо создания нового.
У существующего WABA уже может быть привязан способ оплаты, который не был удален.

При открытии страницы Embedded Signup может появиться следующее сообщение:Приложение не активно
Это приложение сейчас недоступно, разработчик приложения осведомлен об этой проблеме. Вы сможете войти, когда приложение будет повторно активировано.Это происходит, когда приложение находится в режиме В разработке , при котором доступ есть только у тестовых пользователей (см. Панель управления приложениями > Роли приложения > Роли / Тестовые пользователи).Решение:
Переключите режим приложения на Активно через Meta Apps, открыв соответствующее приложение в панели управления.
Либо предоставьте доступ текущему пользователю. См.: Назначение объектов компании людям из вашего бизнес-портфолио.

При открытии страницы Embedded Signup может появиться следующее сообщение:Функция недоступна
Вход через Facebook в настоящее время недоступен для этого приложения, так как мы обновляем дополнительные сведения о нем. Пожалуйста, повторите попытку позже.Решение:
Перейдите в Панель управления приложениями > Проверка приложения > Разрешения и функции и запросите расширенный доступ к public_profile .

Обзор

Технические партнеры по разработке

Партнеры по решениям

Реферальные партнеры

Встроенная регистрация

Шаг 1: Добавление разрешенных доменов

2. Получение WABA и привязка к YCloud

Часто задаваемые вопросы

​Шаг 1: Добавление разрешенных доменов

​Шаг 2: Создание ID конфигурации Facebook Login for Business

​Шаг 3: Интеграция Embedded Signup на ваш сайт

​Embedded Signup – Создание аккаунта WhatsApp API

​1. Создание кнопки Embedded Signup

​Embedded Signup – Сосуществование с приложением WhatsApp Business

​1. Создание кнопки Embedded Signup

​2. Получение WABA и привязка к YCloud

​Часто задаваемые вопросы

​

Шаг 1: Добавление разрешенных доменов

Шаг 2: Создание ID конфигурации Facebook Login for Business

Шаг 3: Интеграция Embedded Signup на ваш сайт

Embedded Signup – Создание аккаунта WhatsApp API

1. Создание кнопки Embedded Signup

Embedded Signup – Сосуществование с приложением WhatsApp Business

1. Создание кнопки Embedded Signup

2. Получение WABA и привязка к YCloud

Часто задаваемые вопросы