Как подключить капчу Lockio

Как это работает

1. Посетитель видит на форме картинку с искажёнными буквами и цифрами и вводит их.
2. Виджет проверяет ответ и кладёт в форму скрытое одноразовое поле lockio-captcha-response.
3. Ваш бэкенд перед обработкой формы проверяет это поле запросом siteverify с секретным ключом.

Site Key — публичный, ставится в виджет. Secret Key — хранится на сервере, нужен для проверки. Получить оба: личный кабинет → Капча.

Быстрый старт (HTML)

<!-- 1. Подключите скрипт (один раз на странице) -->
<script src="https://lockio.ru/captcha.js" async defer></script>

<!-- 2. Поставьте контейнер внутри вашей формы -->
<form method="post" action="/submit">
  <input name="email" type="email" placeholder="Email">
  <textarea name="message"></textarea>

  <div class="lockio-captcha" data-sitekey="ВАШ_SITEKEY"></div>

  <button type="submit">Отправить</button>
</form>

После решения капчи в форму добавится скрытое поле lockio-captcha-response. Его значение проверяйте на сервере (см. ниже).

Автовставка в формы

Если не хотите править разметку каждой формы — скрипт сам найдёт формы и вставит капчу, блокируя отправку без решения.

<!-- Скрипт сам найдёт формы и вставит капчу + заблокирует отправку -->
<script src="https://lockio.ru/captcha.js"
        data-sitekey="ВАШ_SITEKEY"
        data-auto="contact"  <!-- contact | all | selector | server -->
        data-forms="#contact-form, .feedback"  <!-- для data-auto="selector" -->
        data-pages="/contacts, /checkout*"     <!-- маски страниц, пусто = все -->
        async defer></script>

• contact — формы с email / телефоном / textarea (по умолчанию).
• all — все формы на странице.
• selector — только формы по CSS-селектору из data-forms.
• server — взять режим, селектор и страницы из настроек в дашборде.

data-pages ограничивает страницы (маски с *). Виджет следит за динамически добавленными формами (AJAX/SPA). Важно: автовставка блокирует отправку в браузере — серверную проверку всё равно делайте на бэкенде (для CMS это берут на себя модули ниже).

Готовые модули для CMS

Внешний вид (под стиль сайта)

По умолчанию (тема auto) рамка виджета сама подстраивается под сайт: берёт фон ближайшей секции, цвет текста, шрифт и акцент (из CSS-переменных бренда --accent / --primary / --brand или цвета ссылок). Один проход при отрисовке — без запросов к сети. Если контраст текста к фону низкий, цвет автоматически правится, чтобы оставаться читаемым.

Можно зафиксировать цвета вручную атрибутами на контейнере:

<script src="https://lockio.ru/captcha.js" async defer></script>

<!-- авто (по умолчанию): рамка подстроится под фон, текст и акцент сайта -->
<div class="lockio-captcha" data-sitekey="ВАШ_SITEKEY"></div>

<!-- или зафиксировать цвета вручную -->
<div class="lockio-captcha"
     data-sitekey="ВАШ_SITEKEY"
     data-theme="auto"        <!-- auto | light | dark -->
     data-bg="#0b1020"        <!-- фон рамки -->
     data-fg="#e6e8ee"        <!-- цвет текста -->
     data-accent="#ff7a59"></div>  <!-- акцент -->

• data-theme — auto (по сайту, по умолчанию) · light · dark.
• data-bg / data-fg / data-accent — свои цвета рамки, текста и акцента (#hex или rgb(...)).
• Картинка капчи настраивается отдельно — пресет и цвет фона в дашборде.

Серверная проверка (siteverify)

POST https://lockio.ru/api/captcha/siteverify с полями secret и response. Ответ: { "success": true | false, "error-codes": [...] }. Токен одноразовый.

PHP

<?php
// Серверная проверка (PHP). Делайте ДО обработки формы.
$response = $_POST['lockio-captcha-response'] ?? '';
$ch = curl_init('https://lockio.ru/api/captcha/siteverify');
curl_setopt_array($ch, [
  CURLOPT_POST => true,
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_POSTFIELDS => http_build_query([
    'secret'   => getenv('LOCKIO_CAPTCHA_SECRET'),
    'response' => $response,
  ]),
]);
$result = json_decode(curl_exec($ch), true);
if (empty($result['success'])) {
  http_response_code(400);
  exit('Капча не пройдена');
}
// ... обрабатываем форму

Node.js

// Серверная проверка (Node.js / Express)
const r = await fetch('https://lockio.ru/api/captcha/siteverify', {
  method: 'POST',
  headers: { 'content-type': 'application/json' },
  body: JSON.stringify({
    secret: process.env.LOCKIO_CAPTCHA_SECRET,
    response: req.body['lockio-captcha-response'],
  }),
}).then((x) => x.json());

if (!r.success) return res.status(400).send('Капча не пройдена');

Python

# Серверная проверка (Python / Django / Flask)
import os, requests

resp = request.form.get('lockio-captcha-response', '')
r = requests.post('https://lockio.ru/api/captcha/siteverify', json={
    'secret': os.environ['LOCKIO_CAPTCHA_SECRET'],
    'response': resp,
}, timeout=10).json()

if not r.get('success'):
    return 'Капча не пройдена', 400

JavaScript API виджета

// JS API виджета
window.lockioCaptcha.render();              // отрисовать новые контейнеры
window.lockioCaptcha.reset(0);              // сбросить виджет №0
window.lockioCaptcha.getResponse(0);        // получить verify-токен
window.lockioCaptcha.auto();                // запустить автовставку вручную

// Колбэк при успешном решении:
// <div class="lockio-captcha" data-sitekey="..." data-callback="onSolved"></div>
function onSolved(token) { console.log('решено', token); }

Коды ошибок siteverify