Как настроить рекапчу гугл

Установка и настройка reCAPTCHA 2.0 от Google

В этой статье рассмотрим установку и настройку новой версии reCaptcha API от Google в которой обновлен дизайн и внедрены новые механизмы проверки. Этот инструмент поможет защитить формы вашего сайта от спама и роботов.

Для начала работы с reCAPTCHA API нам необходимо получить ключ от Google и создать приложение для работы. Переходим по ссылке для получения ключа. Вам необходимо иметь учетную запись в службах Google.

Установка reCaptcha 2, получение ключей, регистрация сайта

После добавления сайта вам будет выдано два ключа Публичный ключ – нужен для отображения блока reCAPTCHA на странице с формой. Секретный ключ – нужен для соединения с серверами Google и проверке правильности отправки reCAPTCHA. Секретный ключ должен хранится только на сервере и не должен быть доступен пользователям.

Далее проделываем операции как указано в инструкции. Размещаем код библиотеку reCAPTCHA 2.0 на нужной нам странице перед закрывающим тегом head в HTML-коде: А сам div блок вставляем в конце объекта form в том месте, где вы хотите видеть блок reCAPTCHA: Теперь переходим на нашу страницу, если код библиотеки и блок вызова reCAPTCHA с ключом установлены верно, то мы увидим нашу форму и блок проверки для роботов.

reCaptcha отображается на странице, но пока не выполняет никаких функций защиты от спама, форму можно просто отправить не ставя галочку в чекбоксе reCAPTCHA. Для проверки формы нам необходимо выполнить настройку на стороне сервера в скрипте формы.

Интеграция reCAPTCHA 2.0 на стороне сервера

Как видно из кода выше, элемент массива g-recaptcha-response имеет значение, а это значит что сервер проверки ответил нам на запрос и проверка пройдена удачно.

Далее нам необходимо отправить POST запрос на сервер Google reCAPTCHA по адресу google.com/recaptcha/api/siteverify и передамть ему переменные:

• secret — секретный ключ полученный при регистрации сайта
• response — код полученный при установке галочки «Я не робот» из элемента массива [g-recaptcha-response]
• remoteip – IP адрес пользователя, который заполняет форму и проходит проверку

Готовим функцию подключения к серверу. В PHP должно быть активировано расширение CURL.

После выполнения запроса, сервер Google reCAPTCHA 2.0 отдаст ответ в формате JSON с полем success. Если его значение TRUE, то значит проверка пройдена и форму заполняет человек, а не робот. Если success равно FALSE, то форму заполняет спам-робот.

Пример отрицтельного ответа (для его просмотра раскомментируйте в коде строку var_dump($res);

Проверка пройдена успешно:

Чтобы посмотреть какие данные передаются из формы, вставьте вот этот код в страницу: На этом настройка и установка reCAPTCHA 2.0 от Google завершена и спам больше не будет вас доставать!

Популярное

В этой статье рассмотрим установку и настройку новой версии reCaptcha API от Google в которой обновлен.

Google reCAPTCHA стала одним из самых популярных решений, когда речь идет о предотвращении отправки.

В этой статье мы рассмотрим настройку и установку новой версии адаптивного слайдера изображений Owl Carousel.

Invisible reCAPTCHA защищает ваш сайт от спама и других видов автоматических злоупотреблений, например.

Адаптивный слайдер изображений Owl Carousel Slider. Имеет достаточно большое количество настроек, прост в.

Источник

Установка и настройка Google reCAPTCHA 3

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

Хотя он отлично подходит для остановки ботов, он часто раздражает законных пользователей, прося их нажимать на несколько транспортных средств в квадрате или на дорожных знаках.

Рабочий пример проверки, представленный в этой статье http://useful-notes.ru/files/recaptcha3/

reCAPTCHA v3 направлена на то, чтобы предоставить те же возможности фильтрации спама, но при этом держаться подальше от пользователя. Это делается путем отслеживания действий пользователя и присвоения им баллов. Затем вы можете выполнить соответствующие действия в зависимости от этого показателя, например, заблокировать отправку, требовать проверки вручную или разрешить ее выполнение.

Регистрация

Первый шаг — перейти на страницу reCAPTCHA и войти в систему с учетной записью Google.

После входа перейдите в поле «Зарегистрировать новый сайт». Введите подходящий ярлык (имя веб-сайта), выберите «reCAPTCHA v3», добавьте все необходимые домены веб-сайта и нажмите «Зарегистрироваться»:

После регистрации вам будут предоставлены как «Ключ сайта», так и «Секретный ключ».

Они будут необходимы для настройки формы на доменах, представленных на предыдущем шаге.

Интеграция на стороне клиента

Для этого примера я использую очень простую контактную форму. Она содержит 3 поля (Имя, Адрес электронной почты, Сообщение) и кнопку «Отправить сообщение».

Я использую фреймворк Bulma CSS для быстрого и удобного оформления формы. Код PHP и JS, очевидно, можно разделить на внешние файлы, но я держу все это в одном файле, чтобы пример был коротким и простым.

Создайте файл с именем «index.php» и добавьте следующее:

Замените «YOUR_RECAPTCHA_SITE_KEY» на ключ, предоставленный вам в административной панели Google reCAPTCHA.

Функция grecaptcha.ready запустится, когда служба полностью загрузится и создаст токен для текущего пользователя.

«Действие» должно относиться к текущей странице или выполняемой операции. В этом случае я использую «contact», так как он применяется к форме обратной связи.

Я настроил функцию для захвата скрытого ввода формы и передачи токена до значения ввода.

Код ниже используется для создания самой формы контакта:

Это все, что нужно, чтобы сервис работал на стороне клиента. Теперь он анализирует пользователя, затем создает токен и назначает его скрытому полю recaptcha_response в форме.

Вы можете узнать больше о конфигурации на стороне клиента здесь.

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

Теперь пришло время написать немного кода для проверки пользователя.

Замените «YOUR_RECAPTCHA_SECRET_KEY» на Секретный ключ, предоставленный на панели инструментов и добавьте следующий код прямо над формой:

Этот код создает запрос POST и отправляет его в Google. В зависимости от полученного балла вы можете выполнять действия на странице. Согласно документации «1.0, скорее всего, это человек, 0.0, скорее всего бот».

Для простоты в приведенном выше примере я принимаю все заявки от любого пользователя с оценкой 0,5 или выше.

И вот пример возвращаемого объекта:

Исходный код скрипта проверки на ботов Google reCAPTCHA v3

Код скрипта со всеми проверками можно скачать по ссылке. Вам необходимо лишь заменить YOUR_RECAPTCHA_SITE_KEY и YOUR_RECAPTCHA_SECRET_KEY на свои данные.

Вы можете узнать больше о конфигурации на стороне сервера здесь.

Настройка Google reCAPTCHA 3 завершена

Как было сказано ранее это очень простой пример. При использовании в рабочей среде убедитесь, что используется строгая проверка вводимых данных на стороне клиента и сервера. Если вам требуется более сложная проверка, стоит взглянуть на библиотеку PHP.

Популярное

В этой статье рассмотрим установку и настройку новой версии reCaptcha API от Google в которой обновлен.

Google reCAPTCHA стала одним из самых популярных решений, когда речь идет о предотвращении отправки.

В этой статье мы рассмотрим настройку и установку новой версии адаптивного слайдера изображений Owl Carousel.

Invisible reCAPTCHA защищает ваш сайт от спама и других видов автоматических злоупотреблений, например.

Адаптивный слайдер изображений Owl Carousel Slider. Имеет достаточно большое количество настроек, прост в.

Источник

Использование Google reCAPTCHA v2 и v3 в одной форме

Введение

У Google появилась замечательная reCAPTCHA v3. Замечательна она тем, что освобождает пользователя от необходимости тыкать по картинкам в поисках светофоров и пожарных гидрантов, при этом вполне успешно анализирует его действия на сайте и оценивает их по шкале от 0 до 1. Чем выше балл, тем качественней наш бот выше вероятность, что пользователь реальный. Обычно выставляют порог равным 0.5.

А что делать, если хочется добра пользователям сайта, но есть у его владельца некая обеспокоенность, что не пропустит невидимая столь ценного реального пользователя, который может и ведет себя странно и подозрительно, но совсем не бот?

Ответ — последовательно использовать капчу обоих версий — не прошел невидимую проверку — появилась видимая капча!

Что делаем

Тут обозначу основные моменты. Весь код есть по ссылке на github. достаточно переименовать файл config.example.php в config.php и поменять в нем ключи доступа на настоящие.

Для подключения необходимо получить публичные (site key) и приватные (secret key) ключи от обеих версий Google reCAPTCHA на сайте.

Добавляем на страницу скрипт, указав в параметре публичный ключ версии 3

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

Форма у нас будет отправляться по ajax. Пишем обработчик для события подтверждения формы. Тут:

form — эта переменная содержит объект формы

captcha_key_site_v3 — открытый публичный ключ для капчи 3 версии

token — токен, присвоенный пользователю, по нему в дальнейшем будем обращаться в сервис Google и получать те самые баллы

— открытый который проверяет, что определена переменная grecaptcha из библиотеки Google, получает токен и записывает его в скрытое поле, после чего отправляем форму.

Для отправки ипользуется метод sendForm , в котором выполняется такая последовательность действий:

Отправляем ajax запрос с данными формы на сервер

Если на сервере проверка пройдена и данные формы приняты, получаем сообщение об успехе и выводим информацию об этом пользователю

Если произошла ошибка, связанная с версией 3 (не отчечает сервер или недостаточно баллов), то рендерим капчу версии 2

Методу render передаем первым параметром id блока, в который будет помещена капча, вторым — набор параметров:

sitekey — публичный ключ капчи версии 2

theme — цветовая схема капчи, может принимать значения dark / light

callback — имя функции, которая будет вызвана после проверки капчи версии 2

WidgetCaptcha — это переменная, в которой хранится идентификатор капчи, полезно использовать особенно когда на странице несколько форм, для сброса капчи используеся метод grecaptcha.reset(WidgetCaptcha)

В функции-коллбеке setTokenV2 передается токен от второй версии капчи, его мы записываем во второе скрытое поле

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

Код серверной части в файле ajax.php:

Надеюсь, кому-то пригодиться в работе, также буду рад комментариям и вопросам.

Источник

Защита форм от спама «невидимой» Google reCAPTCHA v3 без потери баллов по PageSpeed Insight

Периодически возникал вопрос по защите от ботов различных форм на сайте: регистрация, авторизация, подписка на рассылку, обратная связь, комментирование и т.д.

Стандартная капча — бесполезная, ботами она проходится «на раз», а пользователям создает проблемы.

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

Основная проблема у обеих версий — при подключении значительно снижаются баллы по PageSpeed Insight на 20-30.

Пример reCAPTCHA v2 — требует угадывать картинки

Важный для меня момент — не создавать проблемы реальным пользователям, т.к. я сам не большой любитель угадывать транспортные средства в reCAPTCHA v2, поэтому мой выбор v3.

Итак две проблемы Google reCAPTCHA v3, которые необходимо решить:

• висящий логотип в нижнем правом углу;
• потеря 20-30 баллов по Google PageSpeed Insight.

Висящий логотип

В лицензионном соглашении Google допускает убрать логотип, скрыв его через CSS.

Взамен под каждой формой написать «Защита от спама reCAPTCHA Конфиденциальность и Условия использования» со ссылками на соответствующие страницы Google.

Потеря баллов по Google PageSpeed Insight

При подключении javascript-файла от reCAPTCHA v3, сильно снижаются баллы по Google PageSpeed Insight. Для меня это было критично. Думаю, что это связано с анализом поведения пользователей (подобное снижение происходит при использовании вебвизора в Яндекс.Метрике).

На хорошо оптимизированных ресурсах можно потерять 20-30 баллов. Поэтому использовать её на отдельных страницах, где скорость не важна (например, контактов) можно и без модификаций. Для использования на всём сайте (например, для защиты сквозной формы авторизации или подписки на рассылку) желательно сделать модификацию.

Я придумал вариант инициализировать reCAPTCHA v3 по клику на поля формы. По умолчанию javascript-файл от reCAPTCHA v3 не загружаю, и только если пользователь поставил курсор на одно из полей формы выполняю его загрузку. Скорее всего данный метод снижает точность определения реальных пользователей, но проблем не возникало. Для моих задач данной точности хватает.

Данную методику начал применять сначала на веб-формах 1С-Битрикс, далее для сквозных форм авторизации и подписки на рассылку на сайтах без Битрикса.

Ввиду того, что 1С-Битрикс публичная CMS, расскажу в общих чертах на её примере — про методику и возможный вариант использования. Более тонкую настройку можно сделать под свои потребности.

Использование Google reCAPTCHA v3 в веб-формах 1С-Битрикс

1. Форму вызываем стандартным компонентом bitrix:form и делаем 2 дополнения:

• Заменяем кнопку button type=submit на обычный button type=button
• добавляем hidden поле name=g_recaptcha_response

2. Добавляем в javascript-файл сайта или компонента инициализацию reCAPTCHA при клике по полям формы (в этом примере я предполагаю, что вы используете jQuery):

3. Добавляем отслеживание клика по кнопке button в форме. Далее внутри, используем пример описанный в документации Google. Он заполняет поле g_recaptcha_response, которое мы будет использовать на последнем шаге для валидации пользователя.

4. Отслеживаем event onBeforeResultAdd в init.php

Перед отправкой результатов формы делаем обращение на сервер Google с вашим

, и значением из hidden поля g_recaptcha_response из формы.

В ответ получаем баллы данного пользователя:

• 1 это точно человек
• 0 точно робот
• Больше 0.5 можно считать человеком

В заключение

Данную методику можно использовать на любых сайтах и формах вне зависимости от CMS. Я привёл общие методики работы, которые можно применять в своём проекте.

Подобным образом можно поступить и с Google reCAPTCHA v2, инициализировать по клику на форме и просить пользователя установить галочку «Я не робот» и отгадать картинки, если потребуется. В данном случае это также сэкономит баллы по PageSpeed Insight и даст пользователю инструмент (выбирать картинки), чтобы доказать, что он не робот. Но как я уже говорил выше для меня самое важное, это не создавать пользователю преград.

Источник