Раньше капча выглядела как набор картинок с числами, или как решение примеров а-ля “2 + 2”. С ботами, конечно, она отлично справляется, но уж слишком раздражает нормальных пользователей. Порой вместо нормального входа требует жмакать на кучу картинок с машинами или дорожными знаками.
В нынешнее время технологии дошли до невиданных высот. Спасибо Google за попытку исправить вселенскую несправедливость. Представляю вашему вниманию: reCAPTCHA v3.
Новая версия, в общем, та же история, только теперь она старается меньше напрягать юзеров. Она следит за тем, что ты там на сайте делаешь, и выставляет тебе баллы. Потом, в зависимости от этого балла, ты как владелец сайта можешь что-то сделать: блокировать отправку, требовать проверку вручную или вообще всё разрешать.
Здесь я покажу как подключить её на примере HTML + JS + PHP.
Регистрация
Для начала заходим на сайт https://www.google.com/recaptcha/admin/, логинимся под аккаунтом Гугла, выбираем “Зарегистрировать новый сайт”, даём имя, выбираем “reCAPTCHA v3”, добавляем свои домены и заканчивает кликом на “Зарегистрироваться”. После нехитрых манипуляций тебе дадут два ключа – “Ключ сайта” и “Секретный ключ”.
Интеграция на стороне клиента
Дальше мы встраиваем эту штуку на свой сайт. Заменяем “YOUR_RECAPTCHA_SITE_KEY” на “Ключ сайта” из админки reCAPTCHA.
Смысл кода такой: после инициализации гугловских скриптов уже наш скрипт перебирает все формы, создаёт скрытое поле “recResponse” и прописывает туда токен.
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_RECAPTCHA_SITE_KEY"></script>
<script>
grecaptcha.ready(function () {
grecaptcha.execute('YOUR_RECAPTCHA_SITE_KEY', { action: 'send_form' }).then(function (token) {
let recResponse = document.querySelectorAll('form');
if (recResponse.length){
recResponse.forEach((form) => {
let input = document.createElement("input");
input.setAttribute('type', 'hidden');
input.setAttribute('name', 'recResponse');
input.setAttribute('value', token);
form.appendChild(input);
})
}
});
});
</script>Далее просто отправляем любым удобным способом форму на файл /send.php (или любое другое название и/или путь файла).
Интеграция на стороне сервера
На серверной стороне пишем код, который проверяет этот токен.
Для этого заменяем “YOUR_RECAPTCHA_SECRET_KEY” в коде на тот, что нам дали в админке reCAPTCHA.
<?php
$_POST['server'] = $_SERVER['HTTP_HOST'];
if (isset($_POST['recResponse'])){
// Создаем POST запрос
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY';
$recaptcha_response = $_POST['recResponse'];
// Отправляем POST запрос и декодируем результаты ответа
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
$recaptcha = json_decode($recaptcha);
// Здесь можно поменять score от 0.1 до 1.0
if ($recaptcha->score >= 0.4) {
// Отправляем форму куда нам нужно
}
}
?>И вы снова великолепны!
Итог
Теперь, в зависимости от балла который получит пользователь при отправке формы, можем что-то предпринять. Если уверены, что это человек, то отправляем сообщение, а если что-то не так – показываем ошибку.
После долгих опытах на более 30-ти сайтах могу посоветовать не делать “score” ниже 0.3. Иначе совсем загадят вашу CRM, или куда вы там хотите отправлять формы.