Все записи
1 мин чтенияКоманда Mitelis

WebCaptcha уже доступна: подключение за пять минут

Как работает проверка «человек или бот», чем отличаются режимы и как встроить виджет одним тегом.

WebCaptcha — проверка посетителей от Mitelis

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);

Оформление

Цвета, скругление и рамка задаются для каждого ключа — виджет можно подобрать под тёмную или светлую тему сайта. Живую демонстрацию можно посмотреть на главной странице.