Google предоставляет замечательное средство для борьбы со спамом — reCaptcha

Обычно это просто галочка «Я не робот»

Однако есть возможность не делать даже этого — Invisible reCAPTCHA проверяет пользователя в фоне и только если возникли сомнения отображает окно с дополнительным подтверждением

Подключить невидимую рекапчу очень просто:

Создаем контейнер и подключаем скрипт

1
2
3

<div id="recaptcha"></div>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadReCaptchaInvisible&render=explicit"
        async defer></script>

Настраиваем и пару функций для удобной работы

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var g_cfg = {
  'sitekey': 'your-api-code',
  'theme': 'dark',
  'size': 'invisible',
  'callback': 'grecaptcha_callback',
};

// храним идентификатор
var recaptcha_id;

// функция которую мы вызовим что бы проверить
function gcaptcha_check(callback) {
  window.grecaptcha_callback = callback;
  window.grecaptcha.execute(recaptcha_id);
}

// если требуется обновить рекапчу, например для еще одной проверки пользователя
function gcaptcha_reset() {
  window.grecaptcha.reset(recaptcha_id);
}

// колбек для самой рекапчи
window.onloadReCaptchaInvisible = function () {
  recaptcha_id = grecaptcha.render('recaptcha', g_cfg)
};

Изначально reCaptcha отображает свой логотип в правом нижнем углу страницы

Что бы ее скрыть достаточно добавить в стили

1
2
3

.grecaptcha-badge {
  display: none;
}

Однако, по условиям использования, если вы скрываете этот значек, вам необходимо самим уведомить пользователя что используется reCaptcha, показав текст

1
2
3

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

Подробнее на https://developers.google.com/recaptcha/docs/faq