Google recaptcha как настроить

Установка Google reCaptcha v3 на сайт 2019. Как установить невидимую капчу на сайт.

Всем привет сегодня я покажу вам как устанавливать Google Recaptcha v3 на сайт. Это новый тип капчи, которая не требует выполнения заданий, а сама определяет пользователя по действиям которые он совершает на сайте. Это невидимая капча, нового типа, которая сейчас очень часто используется на различных сайтах.

Первым делом вам нужно зарегистрировать google почту и авторизоваться.

Далее переходим по данной ссылке https://www.google.com/recaptcha/intro/v3.html и нажимаем на кнопку «Admin console»

Если вы впервые создаете капчу то у вас появится окно с создание капчи. Здесь вам нужно заполнить поля.

В первом поле вы указываете название по которому вы будете определять нужную капчу. В это поле можно прописать свое название, так как это не на что не влияет.

Далее вы выбираете тип капчи. Сегодня мы рассматриваем капчу версии 3, поэтому выбирайте её.

После это прописываем доменные имена. Если вы пользуетесь локальным сервером, то прописывайте localhost или название папки, если это OpenServer.

. Внимание при работе с локальным сервером могут возникнуть проблемы в аутентификации пользователей. Google Recaptcha может работать некорректно, поэтому лучше тестировать на реальных хостингах.

После того как вы прописали домены, вы принимаете условия использования reCaptcha и нажимаете на кнопку отправить.

После этого вы попадаете на страницу с ключами. Вам нужно скопировать данные ключи.

Нажав на кнопку «Перейти в google аналитику» вы попадаете на страницу статистики, где показаны все выполнения и блокировки представленной капчи.

На данной странице вы можете посмотреть статистику по каждой капче, добавить новую капчу, изменить старую.

Код для Google reCaptcha

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

Весь код выглядит так…

Давайте начнем разбор с HTML. Здесь я создал простую форму которая состоит из двух полей и кнопки. Каждому полю необходимо прописать значение для атрибута name . Одно из полей мы будем использовать для капчи, поэтому зададим ему специальный идентификатор — g-recaptcha-response .

Данные из формы будут отправляться методом POST , обработку я буду проводить в этом же файле, поэтому в атрибуте action ставлю значение / .

JavaScript

Забегая немного в перед скажу… в самом верху я добавил ключи от капчи в константы, чтобы с ними было проще работать.

Ниже я прописываю JavaScript код. Здесь мы подключаем API от Google и прописываем основной скрипт который подключает капчу. Здесь в качестве параметра нужно передать значение ключа который вы получали при создании капчи. Вы можете передать значение целиком или как я передать значение из константы в которой находится данный ключ.

Раскомментируйте функцию console.log(token) , чтобы увидеть токен в консоли. Данный токен мы будем передавать в качестве значения для поля #g-recaptcha-response .

Теперь рассмотрим PHP. Вначале я занес ключи в константы, чтобы с ними было удобнее работать(одну из них я уже прописывал в js скрипте).

Ниже мы прописываем проверку что массив POST не пустой и данные из формы записываются.

Далее мы создаем функцию которая будет делать запрос на google сервис и возвращать нам данные этого запроса.

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

В документации написано, что если значение параметра score ниже 0.5 то скорее всего это бот, а если выше то это человек. Исходя из этого мы создаем данное условия и плюсом проверяем что проверка прошла успешно.

Источник

Установка и настройка 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. Имеет достаточно большое количество настроек, прост в.

Источник

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

Источник