Как установить капчу на сайт

Капчей (captcha) называется автоматизированный тест для различения человека и робота, который используется в качестве защиты от спама на сайтах и в приложениях. За время своего развития этот инструмент претерпевал немало изменений. Если раньше капча представляла собой проверку в виде изображения с искаженными символами, которые требовалось ввести перед отправкой данных на сервер, то сейчас для ее прохождения пользователям даже не нужно предпринимать никаких дополнительных действий. Добавление капчи на веб-сайт поможет вам защититься от ботов. В статье мы расскажем об известных сервисах, позволяющих это сделать, и объясним, как установить капчу на сайт, используя самый популярный из них.

Популярные сервисы для капчи

В сети есть множество сервисов, которые поставляют собственные реализации технологии CAPTCHA. Большая часть сайтов (по некоторым данным, до 98%), использующих капчу, выбирают для этого reCAPTCHA от компании Google. Это обусловлено ее эффективностью и тем фактом, что долгое время сервис оставался лидером в разработке передовых решений для спам-защиты. Сейчас главным конкурентом рекапчи является hCAPTCHA, ориентированная на сохранение конфиденциальности интернет-пользователей. В отличие от Гугл-капчи, она не только успешно блокирует запросы от ботов и отражает спам-атаки через формы, но и более щепетильно относится к данным посетителей: сервис не собирает и не хранит сведения об их поведении и т. п.

Также существует отечественный аналог reCaptcha, разработанный Яндексом: SmartCAPTCHA. В целом, алгоритм тестирования повторяется, но вместо поиска картинок с указанными предметами, как в рекапче, здесь используют задания по распознаванию текста. То, с чего капча начиналась, но в более продвинутой форме.

Как добавить reCaptcha на сайт: инструкция

Подключить капчу от Google можно вручную, если сайт самописный, или посредством расширений в системе управления контентом (CMS), если проект построен на ней. Мы разберем оба варианта и подскажем, как ставить разные версии рекапчи (v2 и v3).

Регистрация и получение ключей

Чтобы установить капчу на website, нужно вносить изменения в код — очевидно. Но перед этим нам потребуется получить ключи от Google. Для этого обязательно иметь аккаунт в его экосистеме. Если вы пользуетесь YouTube, Gmail, Google Drive или другим гугл-сервисом, скорее всего, он у вас уже есть. Если нет, завести его нетрудно.

Пройдите по этой ссылке и авторизуйтесь. Далее откроется панель администратора, где нужно будет зарегистрировать ваш сайт и выбрать предпочтительный вид рекапчи. О различиях между v2 и v3 мы расскажем ниже.

В поле «Ярлык» можно вставить любое понятное вам обозначение, оно нужно лишь для опознания веб-сайта в списке. Непосредственно адрес проекта указывается в блоке «Домены» (без www, http/https и пути к странице). Все поддомены будут зарегистрированы автоматически. Также здесь нужно указать email-адрес владельца и проставить галочки в чекбоксах с соглашениями. Мы рекомендуем не отказываться от функции отправки оповещений о проблемах.

Заполнив все поля, нажмите кнопку «Отправить». Откроется страница с вашими ключами. Скопируйте их в отдельный файл, не забыв пометить, какой к чему относится. Теперь приступим к установке.

Руководство по reCaptcha v2

При выборе второй версии рекапчи появится небольшой список. Первый пункт подразумевает внедрение уже знаменитого флажка «Я не робот» в какие-либо формы на сайте (регистрация, обратная связь, комментарии и пр.). При «Невидимом значке» проверка начинается только после нажатия определенной кнопки на странице или если трафик выглядит подозрительно. Третий пункт выбирают, если нужно установить капчу на Android-приложение. Нам подходят лишь первые два варианта.

Итак, чтобы добавить 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, вам понадобятся лишь полученные ключи и специальный плагин. Мы подобрали несколько расширений для разных систем, которые можно использовать с этой целью:

1. «No Captcha ReCaptcha» для WordPress. Позволяет установить проверку в любые формы, а также стилизовать сам виджет reCaptcha под дизайн сайта.
2. «reCAPTCHA» для Joomla!. Можно выбрать светлый или темный стиль капчи.
3. «Google reCAPTCHA» для 1С-Битрикс. В настройках можно указать допустимую оценку, добавить сообщение в случае ошибки.

Заключение

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

Назад