Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Wordpress шаблоны
Wordpress шаблоны
Главная » Web разработка » Как установить Google Recaptcha на сайт (с WP, CMS и без)

Как установить Google Recaptcha на любой сайт — теория, практика и примеры кода

Google RecaptchaПросматривая недавно биржу фриланса Freelancehunt, я нашел интересное задание по интеграции Google Recaptcha на сайт. Фишка была в том, что клиентский проект хоть и использовал движок WordPress, формы в нем были реализованы и подключены к Битрикс через обычный PHP код. То есть стандартные WP-модули мне не подходили. Поэтому пришлось разбираться как добавить Google Recaptcha для формы на любом сайте, в том числе для CMS без базы данных или вообще без какой-либо админки. Но для начала небольшое лирическое отступление…

Кратко про Google Recaptcha и ее версии

Каптча от Google является полностью бесплатной и при этом весьма эффективной. Создать ее для своего сайта вы можете тут. В итоге получите 2 ключа (секретный и для сайта), которые надо будет использовать при интеграции на своем ресурсе.

На данный момент все еще актуальны обе ее версии:

  • Recaptcha v2 – видимая форма на сайте, где надо поставить флажок “я не робот”.
  • Recaptcha v3 – невидимый скрипт, который автоматически отсеивает роботов.

У каждого из методов есть свои плюсы и недостатки. Мне лично всегда больше импонировала вторая версия – т.к. ты четко видишь капчту на сайте и заполняешь ее самостоятельно. Если что-то идет не так, то появляются дополнительные картинки для проверки. Да, в этом случае иногда приходится разгадывать задачки несколько раз подряд, но любой человек точно это сможет сделать.

С другой стороны – третья версия Google Recaptcha вообще не отвлекает пользователя от его дел, а проверка происходит в фоновом режиме автоматически без его участия. Но что будет, если по тем или иным причинам Гугл посчитает вас ботом? – я лично не знаю.

При тесте формы после интеграции через VPN и при быстром заполнении полей, пару раз каптча меня не пропускала. Кроме того, на результаты может влиять в том числе и статистика посещаемости (активность) пользователей – чем их будет больше, тем лучше и точнее окажется срабатывание проверки.

Google Recaptcha + WordPress

Отдельного внимание заслуживает интеграция Google каптчи с Вордпресс. По этой теме достаточно много решений, но тут важно понимать зачем именно вам нужна каптча и где она будет применяться.

Например, если хотите защитить форму комментариев от спама, то тут лучше варианта чем Akismet не отыскать. Разгадывание любой каптчи в таком случае будет только раздражать пользователей. Чаще ее делают именно для почтовых форм. В WP самый популярный плагин для ее создания это Contact Form 7. В нем есть встроенная интеграция Google Recaptcha, хотя для подключения Recaptcha v2 нужно немножко пошаманить (через плагин Contact Form 7 – reCaptcha v2).

Google Recaptcha

В целом для этой системы есть и другие плагины WordPress капчи, но многие со временем перестают поддерживаться + проигрывают конкуренцию крупным решениям. Тут есть смысл подключать разве что какие-то специализированные решения, например, каптча с математическими уравнениями или графическая. Во всех остальных случаях лучше справится решение от Гугла.

Добавление Google Recaptcha v3 на сайт

Итак, вернемся к нашей основной задаче. Первым делом переходим на сайте Google Recaptcha в Admin Console (синяя кнопка в правом верхнем углу). На открывшейся странице в этом же месте будет иконка “+” для добавления нового проекта (под каждый домен нужны свои ключи):

Настройка Google Recaptcha v3

В форме вводите название для ресурса, выбираете третью версию каптчи, указываете домен своей площадки и соглашаетесь с правилами. Затем переходите на следующий шаг и получаете ключи для внедрения антиспам-проверки.

Интеграция Google Recaptcha v3

Напротив каждого ключа есть инструкция по его интеграции. Весь процесс состоит из двух этапов:

  1. Настройка на стороне клиента – то есть в HTML коде вашего вебсайта.
  2. Интеграция на стороне сервера – обработка запроса от пользователя, его верификация и получения ответа сервера.

1. Интеграция для вебсайта

Краткую инструкцию по этой части можно найти по ссылкам из предыдущего скриншота. Она включает в себя несколько простых шагов. Я опишу свой личный опыт.

1.1 Первым делом добавляем в HEAD область кода строку, в которой предварительно вместо reCAPTCHA_site_key поставьте выданный вам ключ сайта.

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

1.2. Затем в форму FORM на странице где-то перед кнопкой submit добавляете скрытое поле:

<input type="hidden" name="recaptcha_response" id="recaptchaResponse1">

После этого она приблизительно будет иметь следующий вид:

<form name="requestF" id="requestF" method="post" action="feedback.php">
    ... поля для заполнения ...
    <input type="hidden" name="recaptcha_response" id="recaptchaResponse1">
    <input type="submit" class="button" value="Отправить" />
</form>

1.3. Сразу после формы я добавил скрипт:

<script>
    grecaptcha.ready(function () {
        grecaptcha.execute('reCAPTCHA_site_key', { action: 'requestf_action' }).then(function (token) {
            var recaptchaResponse = document.getElementById('recaptchaResponse1');
            recaptchaResponse.value = token;
        });
    });
</script>

Важные нюансы:

  • Тут в коде также надо будет заменить переменную reCAPTCHA_site_key на свой ключ сайта.
  • В качестве параметра для getElementById должно быть ID скрытого input-поля (в моем случае это ‘recaptchaResponse1’).
  • По сути, скрипт разрешается разместить и в шапке сайта, и в футере – мне просто было удобнее именно рядом с формой.
  • В качестве значения action я использую название/name формы, но видел и другие варианты, например action: ‘submit’.

Данный скрипт сгенерирует значение токена каптчи и добавит его в скрытое поле в Form.

2. Интеграция на стороне сервера

Если вы внимательно посмотрите на код моей формы выше, то увидите, что для ее обработки используется файл feedback.php. Именно в нем выполняется отправка письма на почту через sendMail и другие доп.функции. Наша задача в данном случае – перед отправкой сообщения проверить является ли текущий пользователь ботом.

Соответствующий код состоит из двух блоков. Первый я добавил в начало PHP-файла. Здесь важно вместо значения reCAPTCHA_secret_key подставить свой секретный ключ (Внимание! Это значение второго ключа, не сайтового).

// Смотрим сработали ли форма на отправку сообщения
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['recaptcha_response'])) {
    // Формируем запрос проверки
    $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
    $recaptcha_secret = 'reCAPTCHA_secret_key';
    $recaptcha_response = $_POST['recaptcha_response'];
 
    // Выполняем запрос и расшифровываем результат проверки
    $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
    $recaptcha = json_decode($recaptcha);
}

После выполнения этого кода в переменной $recaptcha у вас будет результат проверки каптчи от Google Recaptcha v3. Это числовое значение от 0 до 1, где 0 – «точно бот», а 1 – «точно человек». Теперь надо добавить условный IF-оператор перед отправкой данных формы по типу такого:

if (($recaptcha->score >= 0.5) && ($recaptcha->success == true)) {
    // Все ок, можно отправлять Email
} else {
    // Ошибка, пользователь бот
}

Значение 0.5 — среднее. Вполне вероятно его нужно будет “подгонять” по ваш сайт. Как я уже сказал выше, точность результата зависит от количества пользователей и их активности. Видимо, каптча постепенно учится распознавать ботов, поэтому чем больше “статистической информации для исследования”, тем лучше ответ.

При тесте формы на своем же компе я стабильно получал $recaptcha->score = 0.9, а когда попробовал тестировать через VPN, то периодически срабатывала ошибка. Плюс, по словам клиента, сообщения не всегда отправлялись. Решили снизить порог с 0.5 до 0.3, и ситуация улучшилась.

Несколько форм. Если вам нужно реализовать проверку парочки форм, то я поступал следующим образом:

  • В формах делал оригинальный ID для скрытого поля — recaptchaResponse1, recaptchaResponse2, recaptchaResponse3. Имя (name) одинаковое.
  • Соответственно, под каждой из них располагался свой скрипт grecaptcha.execute, для которого обязательно нужно указывать уникальные значения в getElementById и action.
  • Фактически изменения вносятся только в первый шаг интеграции (для сайта), серверная часть остается неизменной.

Дисклеймер. Я не то чтобы прям спец во всех эти “программистских” штуках, а практикующий вебмастер – пришел к текущему решению с помощью определенной литературы, метода проб/ошибок, и у меня все отлично работает! Я не даю гарантию, что все будет также идеально в вашей ситуации, с вашей формой, спустя года 2-3 после публикации этой статьи. Но, как минимум, вы будете знать логику работы и куда копать.

Повторюсь еще раз, рассматривал только установку Recaptcha v3, а со второй версией пока что не сталкивался. Вполне вероятно, что в будущем дополню статью и этой задачей. Если есть что подсказать/спросить – пишем ниже.

01.06.20

Категории: Google, Web разработка, Сервисы и сайты.

Теги: , , , , , , , ,

Добавить комментарий

Ваш e-mail не публикуется. Обязательные поля помечены *
Если вы комментируете впервые, то текст будет отправлен на модерацию.