Как установить капчу на сайт
Капчей (captcha) называется автоматизированный тест для различения человека и робота, который используется в качестве защиты от спама на сайтах и в приложениях. За время своего развития этот инструмент претерпевал немало изменений. Если раньше капча представляла собой проверку в виде изображения с искаженными символами, которые требовалось ввести перед отправкой данных на сервер, то сейчас для ее прохождения пользователям даже не нужно предпринимать никаких дополнительных действий. Добавление капчи на веб-сайт поможет вам защититься от ботов. В статье мы расскажем об известных сервисах, позволяющих это сделать, и объясним, как установить капчу на сайт, используя самый популярный из них.
Популярные сервисы для капчи
В сети есть множество сервисов, которые поставляют собственные реализации технологии CAPTCHA. Большая часть сайтов (по некоторым данным, до 98%), использующих капчу, выбирают для этого reCAPTCHA от компании Google. Это обусловлено ее эффективностью и тем фактом, что долгое время сервис оставался лидером в разработке передовых решений для спам-защиты. Сейчас главным конкурентом рекапчи является hCAPTCHA, ориентированная на сохранение конфиденциальности интернет-пользователей. В отличие от Гугл-капчи, она не только успешно блокирует запросы от ботов и отражает спам-атаки через формы, но и более щепетильно относится к данным посетителей: сервис не собирает и не хранит сведения об их поведении и т. п.
Также существует отечественный аналог reCaptcha, разработанный Яндексом: SmartCAPTCHA. В целом, алгоритм тестирования повторяется, но вместо поиска картинок с указанными предметами, как в рекапче, здесь используют задания по распознаванию текста. То, с чего капча начиналась, но в более продвинутой форме.
Как добавить reCaptcha на сайт: инструкция
Подключить капчу от Google можно вручную, если сайт самописный, или посредством расширений в системе управления контентом (CMS), если проект построен на ней. Мы разберем оба варианта и подскажем, как ставить разные версии рекапчи (v2 и v3).
Регистрация и получение ключей
Чтобы установить капчу на website, нужно вносить изменения в код — очевидно. Но перед этим нам потребуется получить ключи от Google. Для этого обязательно иметь аккаунт в его экосистеме. Если вы пользуетесь YouTube, Gmail, Google Drive или другим гугл-сервисом, скорее всего, он у вас уже есть. Если нет, завести его нетрудно.
Пройдите по этой ссылке и авторизуйтесь. Далее откроется панель администратора, где нужно будет зарегистрировать ваш сайт и выбрать предпочтительный вид рекапчи. О различиях между v2 и v3 мы расскажем ниже.
![Как добавить reCaptcha на сайт: инструкция.](../img/articles/loading.gif)
В поле «Ярлык» можно вставить любое понятное вам обозначение, оно нужно лишь для опознания веб-сайта в списке. Непосредственно адрес проекта указывается в блоке «Домены» (без www, http/https и пути к странице). Все поддомены будут зарегистрированы автоматически. Также здесь нужно указать email-адрес владельца и проставить галочки в чекбоксах с соглашениями. Мы рекомендуем не отказываться от функции отправки оповещений о проблемах.
Заполнив все поля, нажмите кнопку «Отправить». Откроется страница с вашими ключами. Скопируйте их в отдельный файл, не забыв пометить, какой к чему относится. Теперь приступим к установке.
![Ключи reCAPTCHA.](../img/articles/loading.gif)
Руководство по reCaptcha v2
При выборе второй версии рекапчи появится небольшой список. Первый пункт подразумевает внедрение уже знаменитого флажка «Я не робот» в какие-либо формы на сайте (регистрация, обратная связь, комментарии и пр.). При «Невидимом значке» проверка начинается только после нажатия определенной кнопки на странице или если трафик выглядит подозрительно. Третий пункт выбирают, если нужно установить капчу на Android-приложение. Нам подходят лишь первые два варианта.
![Руководство по reCaptcha v2.](../img/articles/loading.gif)
Итак, чтобы добавить reCaptcha, понадобится интегрировать ее на клиентской и на серверной стороне. Для начала откройте файл с вашим HTML-кодом. Перед закрывающим тегом </head> вставьте строчку:
<script src="https://www.google.com/recaptcha/api.js"></script>
Если что, требование не обязательное, поскольку скрипт можно подключить в любом месте. Теперь найдите блок с формой, где планируется делать проверку (установить виджет с флажком), и внедрите туда фрагмент такого вида:
<div class="g-recaptcha" data-sitekey="ВАШ_КЛЮЧ"></div>
Вместо «ВАШ_КЛЮЧ» подставьте значение из первого поля на странице с выданными ключами. Клиентская часть готова.
Чтобы провести интеграцию с сервером, нужно прописать код проверки там, где у вас проверяются данные, присланные с фронта. На PHP это может выглядеть следующим образом (вариант на curl, через POST):
$error = true;
$secret = 'СЕКРЕТНЫЙ_КЛЮЧ';
if (!empty($_POST['g-recaptcha-response'])) {
$curl = curl_init('https://www.google.com/recaptcha/api/siteverify');
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, 'secret=' . $secret . '&response=' . $_POST['g-recaptcha-response']);
$out = curl_exec($curl);
curl_close($curl);
$out = json_decode($out);
if ($out->success == true) {
$error = false;
}
}
if ($error) {
echo 'Ошибка заполнения капчи.';
}
Вместо «СЕКРЕТНЫЙ_КЛЮЧ» подставьте значение из второго поля на странице с ключами. После этого капча должна заработать.
Руководство по reCaptcha v3
Капчу третьей версии также называют невидимой. Суть проверки заключается не в выполнении заданий пользователем, а в анализе его поведения на сайте. Капча работает в фоновом режиме: буквально оценивает те или иные действия, и на основе этих оценок делается вывод о том, кем является посетитель (человеком или ботом).
Чтобы поставить такую рекапчу, для начала добавьте в вашу форму скрытое поле «token». Результат может выглядеть примерно так:
<form action="#" method="post">
<input type="text" name="name" placeholder="Введите имя">
<input type="email" name="email" placeholder="Введите email">
<input type="hidden" id="token" name="token">
<button type="submit" name="post">Отправить</button>
</form>
Имейте в виду, что генерируемый токен действует только в течение двух минут. Если создать его при загрузке страницы, он может истечь до момента нажатия пользователем кнопки отправки формы, и тогда человека примут за бота. Google рекомендует вызывать капчу при выполнении действия. Подробную информацию можно прочитать здесь. На странице подробно расписано, какие фрагменты кода использовать для подключения reCaptcha в разных вариациях.
С помощью CMS
Чтобы внедрить капчу при помощи CMS, вам понадобятся лишь полученные ключи и специальный плагин. Мы подобрали несколько расширений для разных систем, которые можно использовать с этой целью:
- «No Captcha ReCaptcha» для WordPress. Позволяет установить проверку в любые формы, а также стилизовать сам виджет reCaptcha под дизайн сайта.
- «reCAPTCHA» для Joomla!. Можно выбрать светлый или темный стиль капчи.
- «Google reCAPTCHA» для 1С-Битрикс. В настройках можно указать допустимую оценку, добавить сообщение в случае ошибки.
Заключение
Установка капчи на сайт существенно сокращает количество спам-атак. Этот инструмент давно стал необходимостью, так что, надеемся, вы сумеете защитить свой сайт при помощи рекомендаций из нашей статьи. Можете установить один простой плагин или вписать код самостоятельно — главное, чтобы сервис работал.