Web SDK

Web SDK поддерживает все современные браузеры с несколькими способами интеграции.

Посмотрите работу за 30 секунд

demo-v1.captcha.la — чистый HTML + PHP, лицензия MIT, исходный код доступен на каждой странице.

• popup.html — режим всплывающего окна
• float.html — плавающий виджет
• bind.html — привязка к кнопке
• inline.html — встраивание inline
• server-token.html — Token, выданный сервером (защита от повторов)

Быстрый старт

<!-- 1. Load via CDN (or npm install captchala) -->
<script src="https://cdn.captcha-cdn.net/captchala-loader.js"></script>

<button id="login-btn">Sign in</button>

<script>
loadCaptchala(function () {
  Captchala.init({
    appKey: 'YOUR_APP_KEY',
    product: 'bind',
    action: 'login',
    lang: 'auto',
  })
  .onSuccess(res => sendToBackend(res.token))
  .onError(err => console.error(err.message))
  .bindTo('#login-btn');
});
</script>

Установка

CDN

<!-- Recommended: auto-fallback loader, ~6 KB gzip -->
<script src="https://cdn.captcha-cdn.net/captchala-loader.js"></script>

NPM

npm install captchala
# or framework wrappers
npm install @captcha-la/vue
npm install @captcha-la/react

import Captchala from 'captchala';
import 'captchala/dist/captchala.css';

Режимы

Режим Popup

Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'popup', action: 'login' })
  .bindTo('#login-btn')
  .onSuccess(res => sendToBackend(res.token));

Режим Float

Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'float', action: 'browse' })
  .appendTo('#captcha-container')
  .onSuccess(res => sendToBackend(res.token));

Режим Bind

Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'bind', action: 'login' })
  .bindTo('#submit-button')
  .onSuccess(res => submitForm(res.token));   // fires only after challenge passes

Режим Embed

Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'embed', action: 'register' })
  .appendTo('#captcha-container')
  .onSuccess(res => sendToBackend(res.token));

Общие параметры

Параметр	Тип	По умолчанию	Описание
appKey	string	—	Ключ приложения (обязательно)
product	string	popup	Режим отображения: popup
action	string	default	Бизнес-сценарий (например login, register, pay). Сервер применяет разные политики безопасности для каждого сценария.
lang	string	auto	BCP-47 тег (например en, ja, pt-BR) или auto, чтобы следовать navigator.language. См. Поддерживаемые языки — 54 локали.
serverToken	string	—	Одноразовый Token (sct_xxx), выданный вашим сервером. Настоятельно рекомендуется в production — предотвращает неограниченное обновление запросов.
onServerTokenExpired	() => Promise<string>	—	Вызывается при истечении serverToken; верните новый, чтобы SDK мог продолжить без прерывания потока.
enableVoice	boolean	true	Показать пункт аудио-CAPTCHA (доступность для пользователей с нарушением зрения).

Серверная проверка

После onSuccess отправьте res.token (префикс pt_) на ваш backend, затем проверьте его на стороне сервера:

POST https://apiv1.captcha.la/v1/validate
X-App-Key: YOUR_APP_KEY
X-App-Secret: YOUR_APP_SECRET
Content-Type: application/json

{ "pass_token": "<token>", "client_ip": "<end-user IP>" }

См. Справочник API для полного endpoint проверки.