Как установить Google recaptcha
Google reCAPTCHA помогает защитить формы на сайте от спама и автоматических ботов. Ниже мы пошагово разберём, как быстро подключить Google reCAPTCHA v2: от получения ключей в консоли до вставки кода в форму обратной связи.
Всем понятно, зачем нужна капча: её часто просят установить и хостинг-провайдеры, чтобы с сервера не отправлялся спам. В этой статье мы собрали простой и понятный способ установки капчи от Google без лишних сложностей для начинающих разработчиков и владельцев сайтов.
Установка капчи от Google
Для начала нужно получить ключи reCAPTCHA в консоли Google.
- Переходим на официальный сайт Google reCAPTCHA: https://www.google.com/recaptcha/.
- В правом верхнем углу нажимаем кнопку Admin Console (Админ-консоль).
В админ-панели справа будет кнопка (+), которая означает «Добавить сайт». Нажимаем её и переходим к заполнению формы регистрации нового сайта.
Далее заполняем основные пункты:
- Label — любое удобное название сайта, чтобы вы его узнавали в списке.
- reCAPTCHA type — выбираем версию. На конец 2019 года стандартной была reCAPTCHA v2 (классическая «Я не робот»). Сейчас доступна и v3, о которой мы планируем рассказать отдельно.
- Domains — указываем домены, на которых будет использоваться капча (без протокола, например
example.com).
После сохранения настроек Google сгенерирует два ключа:
- Site key (ключ сайта) — используется в разметке формы на странице.
- Secret key (секретный ключ) — используется на сервере для проверки ответа reCAPTCHA.
На этом первый шаг завершён: у вас есть ключи, которые нужно вставить в код сайта.
Установка reCAPTCHA на сайт
Теперь подключим reCAPTCHA к форме на сайте. Рассмотрим базовый пример для reCAPTCHA v2.
- Добавляем виджет reCAPTCHA в форму.
Скопируйте строку кода:
<div class=”g-recaptcha” data-sitekey=”ВАШ_SITE_KEY”></div>
и вместоВАШ_SITE_KEYвставьте Site key, который вы получили в предыдущем шаге. - Вставляем код перед кнопкой отправки.
Разместите этот блок в HTML-коде формы перед кнопкой «Отправить» (или другой кнопкой отправки формы). Например:<form action="" method="post"> ...поля формы... <div class="g-recaptcha" data-sitekey="ВАШ_SITE_KEY"></div> <button type="submit">Отправить</button> </form> - Подключаем скрипт reCAPTCHA в <head>.
В секции<head>страницы (или в шаблоне сайта) добавляем строку:
<script src=’https://www.google.com/recaptcha/api.js’></script>
Лучше размещать её после других скриптов, но до закрывающего тега</head>.
После этого на странице формы появится виджет Google reCAPTCHA.
Надеемся, на установку у вас ушло не более 5–10 минут. Если вы используете популярные CMS (например, WordPress), часть шагов можно упростить с помощью плагинов, но принцип остаётся тем же: получить ключи, подключить скрипт и добавить виджет в форму.
Полезно знать при работе с reCAPTCHA
- Проверьте, что домен в консоли Google reCAPTCHA совпадает с доменом сайта.
- После установки протестируйте форму в разных браузерах и в режиме инкогнито.
- Если на сайте несколько форм, убедитесь, что reCAPTCHA корректно подключена ко всем нужным формам.
Если вы планируете доработку формы или комплексное обновление сайта, в нашей практике мы часто совмещаем настройку защиты от спама с общей разработкой и доработкой сайтов, а также с технической оптимизацией под SEO. Результаты таких работ можно увидеть в нашем портфолио IS-ART. А для уже работающих проектов важна не только защита форм, но и видимость в поиске — здесь помогает поисковое продвижение сайта.
