> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ycloud.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Интегрируйте WhatsApp Embedded Signup с вашим приложением Meta и партнерским решением.

Используйте свое приложение Meta и партнерское решение для подключения клиентов к WhatsApp через ваше программное обеспечение. Перед выполнением этих шагов завершите [онбординг технического партнера по разработке](/ru/partner-center/technical-development-partners/technical-development-partner-onboarding).

Сведения о варианте интеграции TP Lite см. в разделе [Прямая партнерская ссылка (Partner Direct Link)](/ru/partner-center/technical-development-partners/partner-direct-link-tp-lite).

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

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

<img src="https://mintcdn.com/lchnan/JjW3MxuDG9tQSlvR/product-assets/2db12bf6fa-image.webp?fit=max&auto=format&n=JjW3MxuDG9tQSlvR&q=85&s=de153316146021c3fab7ed456c5d662c" alt="Скриншот продукта YCloud" width="1520" height="1069" data-path="product-assets/2db12bf6fa-image.webp" />

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

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

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

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

***

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

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

В консоли перейдите в раздел **Вход через Facebook для бизнеса > Конфигурации**.

<img src="https://mintcdn.com/lchnan/oG46AChNAYXnQdzq/product-assets/afc8d47fd5-image-1.webp?fit=max&auto=format&n=oG46AChNAYXnQdzq&q=85&s=baa074846297cfdaab2649005eeda6e0" alt="Скриншот продукта YCloud" width="950" height="490" data-path="product-assets/afc8d47fd5-image-1.webp" />

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

Этот шаблон генерирует конфигурацию с наиболее часто используемыми разрешениями и уровнями доступа.

<img src="https://mintcdn.com/lchnan/hZV5AyihgANeW21k/product-assets/e35025f36c-image-2.webp?fit=max&auto=format&n=hZV5AyihgANeW21k&q=85&s=aafb45acb0699cd656b9276a81a6e352" alt="Скриншот продукта YCloud" width="615" height="1186" data-path="product-assets/e35025f36c-image-2.webp" />

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

***

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

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

Мы рекомендуем настраивать различные сценарии Embedded Signup в зависимости от вашего решения или потребностей клиентов:

* [**Создание аккаунта WhatsApp API**](https://www.ycloud.com/whatsapp-business-api)
* [**Сосуществование с приложением WhatsApp Business**](https://www.ycloud.com/whatsapp-business-app-coexistence)

***

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

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<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](https://developers.facebook.com/docs/whatsapp/embedded-signup/implementation?utm_source=chatgpt.com)

**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 для решения проблемы**.

**Регистрация номера телефона**

```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
curl -XPOST 'https://api.ycloud.com/v2/whatsapp/phoneNumbers/{{waba_id}}/{{phone_number_id}}/register' \
  -H 'X-API-Key: {{YOUR-API-KEY}}'
```

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

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "phoneNumber": "{{phonenumber}}",
  "wabaId": "{{waba_id}}",
  "verifiedName": "Phone number name",
  "qualityRating": "GREEN",
  "messagingLimit": "TIER_250",
  "status": "CONNECTED"
}
```

***

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

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<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 с аккаунтом клиента в вашей системе.

```bash theme={"theme":{"light":"github-light","dark":"github-dark"}}
curl 'POST /v2/whatsapp/businessAccounts/{wabaId}/smb/bind' \
  -H 'X-API-Key: {{YOUR-API-KEY}}'
```

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

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "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"
}
```

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

<Accordion title="Как проверить правильность настройки Embedded Signup?">
  Если вы правильно настроили **solutionID** , клиенты увидят реальное имя Solution Partner во время авторизации через Facebook.\
  Если имя не отображается, конфигурация не вступила в силу.

  Пожалуйста, убедитесь, что **проверка приложения (App Review)** завершена.

  <img src="https://mintcdn.com/lchnan/E6i1SuAMcpDKZGUZ/product-assets/43ddcba7a7-image-5.webp?fit=max&auto=format&n=E6i1SuAMcpDKZGUZ&q=85&s=9701655d6e7b3ebc57ff0530c591431c" alt="Скриншот продукта YCloud" width="534" height="679" data-path="product-assets/43ddcba7a7-image-5.webp" />
</Accordion>

<Accordion title="В каких случаях YCloud не может привязать способ оплаты к WABA?">
  Это может произойти, если пользователь выбирает **существующий WABA** вместо создания нового.\
  У существующего WABA уже может быть привязан способ оплаты, который не был удален.
</Accordion>

<Accordion title="Ошибка Embedded Signup: Приложение не активно">
  При открытии страницы Embedded Signup может появиться следующее сообщение:

  **Приложение не активно**\
  *Это приложение сейчас недоступно, разработчик приложения осведомлен об этой проблеме. Вы сможете войти, когда приложение будет повторно активировано.*

  Это происходит, когда приложение находится в режиме **В разработке** , при котором доступ есть только у тестовых пользователей (см. **Панель управления приложениями > Роли приложения > Роли / Тестовые пользователи**).

  **Решение**:\
  Переключите режим приложения на **Активно** через [Meta Apps](https://developers.facebook.com/apps), открыв соответствующее приложение в панели управления.\
  Либо предоставьте доступ текущему пользователю. См.: [Назначение объектов компании людям из вашего бизнес-портфолио](https://www.facebook.com/business/help/325571851329683?id=2190812977867143).
</Accordion>

<Accordion title="Ошибка Embedded Signup: Функция недоступна">
  При открытии страницы Embedded Signup может появиться следующее сообщение:

  **Функция недоступна**\
  *Вход через Facebook в настоящее время недоступен для этого приложения, так как мы обновляем дополнительные сведения о нем. Пожалуйста, повторите попытку позже.*

  **Решение**:\
  Перейдите в **Панель управления приложениями > Проверка приложения > Разрешения и функции** и запросите расширенный доступ к **public\_profile** .
</Accordion>

##


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.