Подключение к веб-приложению

1. Загрузите VK Капча SDK:

   npm

   yarn

   pnpm

   JS-скрипт

    
   npm install @vkid/captcha

    
   yarn add @vkid/captcha

    
   pnpm add @vkid/captcha

    
   <script src="https://static.vk.ru/captchaSDK/loader/1/umd/index.js"></script>

   После загрузки скрипта VK Капча SDK будет доступен в объекте window.vkidCaptcha, здесь vkidCaptcha — promise-объект.

2. Добавьте во фронтенд получение класса captchaWidget:

   npm, yarn, pnpm

   JS-скрипт

    
   import { CaptchaWidget } from "@vkid/captcha";

    
   const { CaptchaWidget } = await window.vkidCaptcha;

3. Убедитесь, что при локальной разработке используются стандартные порты 80 для HTTP и 443 для HTTPS.

4. Получите от бэкенда ссылку для запуска виджета капчи.

5. Отобразите капчу пользователю. Воспользуйтесь методом SDK captchaWidget.show().

   Метод вернет promise-объект с результатом прохождения капчи: токен успешного прохождения капчи, если пользователь прошел капчу, или ошибку, если пользователь закрыл капчу.

6. Обработайте результат прохождения капчи:

   • Если promise-объект содержит токен успешного прохождения капчи, отправьте его бэкенду для валидации.
   • Если пользователь закрыл капчу, бэкенду ничего не отправляется. Определите, что будет происходить во фронтенде в этом случае.

Пример кода на TypeScript:

 
const API_ERROR_CODE_CAPTCHA = <КОД_ОШИБКИ>; //Код ошибки, который бэкенд сервиса отправляет, если для действия пользователя нужна капчаinterface ApiCaptchaError {   error_code: number;   error_msg: string;   captcha_sid: string; // Идентификатор сессии капчи   redirect_uri: string; // Ссылка для запуска виджета капчи, полученная от бэкенда, содержит сессионный токен}const handleCaptchaError = async (captchaUrl: string) => { // Обработчик капчи   try {      const captchaWidget = new CaptchaWidget();      const success_token = await captchaWidget.show({ // Метод show() возвращает promise-объект с токеном success_token при успешном прохождении капчи         container: document.body, // HTML-элемент, в котором будет отображаться виджет капчи         iframeSrc: captchaUrl, // Ссылка для запуска виджета капчи из параметра redirect_uri         captchaType: 'type_1', // Тип капчи: 'type_1'         view: 'popup',  // Вид капчи: 'popup' или 'block'      });      fetch('url'); // Повторный запрос на действие пользователя + полученный success_token   } catch (error) {      if (error === 'close') {         // Обработка закрытия капчи пользователем      }   }};fetch('url') // Пользователь выполняет действие        .then((response) => response.json())        .then((data) => { // Проверка кода ошибки           const error = data.error;           if (error?.error_code === API_ERROR_CODE_CAPTCHA) { // Если вернулся код ошибки API_ERROR_CODE_CAPTCHA, вызывается обработчик капчи с redirect_uri              handleCaptchaError(error.redirect_uri);           }        });