WebCaptcha уже доступна: подключение за пять минут
Как работает проверка «человек или бот», чем отличаются режимы и как встроить виджет одним тегом.
WebCaptcha — наша проверка «человек или бот» для форм входа, регистрации, восстановления доступа и других чувствительных действий. Она входит во все тарифы и подключается одним тегом на страницу.
Три режима и один челлендж
Режим выбирается для каждого ключа сайта в рабочем пространстве:
- Автоматический — виджет сам оценивает сессию и решает, показывать ли проверку. Большинство посетителей проходит без лишних действий.
- Чекбокс — классический «Я не робот» одним кликом, когда проверка должна быть заметной.
- Невидимый — никакого интерфейса: проверка идёт в фоне по поведенческим сигналам.
Челлендж — не отдельный режим, а дополнительная проверка. Он появляется только когда запрос выглядит подозрительно, и обычные посетители его не видят.
Подключение
Добавьте загрузчик и контейнер виджета внутрь формы:
<script src="https://webcaptcha.mitelis.net/api.js" defer></script>
<form method="post" action="/login">
<div class="mitelis-captcha" data-sitekey="YOUR_SITE_KEY" data-action="login"></div>
<button type="submit">Войти</button>
</form>
После успешной проверки виджет добавит в форму скрытое поле mitelis-captcha-response с токеном. Отправьте его на свой сервер вместе с остальными данными и проверьте запросом к API WebCaptcha с секретным ключом — секрет никогда не должен попадать в браузер.
Если нужен полный контроль над жизненным циклом виджета, используйте JavaScript API:
const id = window.mitelisCaptcha.render("#captcha", {
sitekey: "YOUR_SITE_KEY",
action: "login",
callback: (token) => console.log("token", token),
expiredCallback: () => console.log("token expired"),
});
// Показать новую проверку, например после ошибки формы
window.mitelisCaptcha.reset(id);
Оформление
Цвета, скругление и рамка задаются для каждого ключа — виджет можно подобрать под тёмную или светлую тему сайта. Живую демонстрацию можно посмотреть на главной странице.