Меню

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

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

В Аспро: Оптимус начиная с версии 1.5.0, вы можете выбрать, какую капчу использовать на своем сайте: стандартную от 1С-Битрикс или Google reCAPTCHA.

Google reCAPTCHA — инструмент от Google, который анализирует поведение пользователей и в зависимости от него предлагает пройти проверку по различным сценариям: от простейшего клика по квадрату «Я не робот» (в большинстве случаев) до расшифровки надписей и выбора определенных картинок (если есть подозрение, что с формой взаимодействует бот, а не реальный человек). Подключайте Google reCAPTCHA, чтобы снизить количество спамных обращений на сайте.

Форма с Google reCaptcha v2.

Форма с Google reCaptcha v3.

Форма с Google reCaptcha v3, если пользователь не прошел проверку.

Форма и капча 1С-Битрикс.

В административной части сайта перейдите в Аспро → Аспро: Optimus → Настройки.

Найдите блок «Google reCaptcha» и активируйте соответствующее поле. После активации поля на странице отобразятся дополнительные поля.

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

  • В поле «Название» (1) укажите название сайта, его раздела или формы обратной связи, на которой устанавливаете капчу. Эта метка для вас, чтобы потом было проще ориентироваться в статистике по зарегистрированным на сервисе сайтах;
  • В «Типе reCAPTCHA» (2) выберите один из видов капчи;
  • В поле «Домены» (3) можно указать несколько доменов, по одному в строке. Вместе с доменом капча подключится и ко всем поддоменам;
  • Далее следует ознакомится с условиями использования reCAPTCHA. Для продолжения регистрации, необходимо их принять — установить соответствующую галку (4);
  • Также рекомендуется поставить галку у пункта «Отправлять владельцам оповещения» (5). Данная опция будет держать вас в курсе о проблемах сайта, связанных с трафиком.
  • Сохраните настройки (6).

После успешной регистрации вам будет предоставлена инструкция подключения капчи к своему сайту. Из нее потребуется публичный (1) и секретный (2) ключи. Публичный ключ необходим для отображения блока капчи. Секретный — для проверки правильности отправки каптчи.

Скопируйте их в одноименные поля в решении от Аспро.

Сохраните изменения. В форме обратной связи появится соответствующий блок.
В группе настроек Google reCAPTCHA v2 также можно настроить внешний вид блока, отображаемого с формой обратной связи (2). И задать маски исключения (1) — адреса тех страниц, на которых не будет работать reCAPTCHA в формах. Действует только на статических страницах.

Блоки могут быть:

  • светлыми и темными;

  • обычными, компактными и скрытыми.

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

В группе настроек Google reCAPTCHA v3 также можно задать маски исключения (1) и минимальную допустимую оценку пользователя (2).

Внимание!

При верификации капчи сервис Google reCAPTCHA возвращает рейтинг человечности текущего пользователя — число от 0.0 (бот) до 1.0 (человек). Эта оценка неоднозначна и может меняться со временем. Так как при ее расчете анализируются собранные поведенческие характеристики пользователя и другие параметры на разных сайтах.

Заполнение формы пользователем считается подозрительным, если оценка меньше заданного минимального значения. При его снижении увеличивается вероятность пропуска спама, а при повышении значения — увеличивается вероятность отклонения настоящего человека.

Примечание:

При генерации публичного и секретного ключей будьте внимательны! Если вы сгенерируете ключи для reCAPTCHA v3, а в админке выберете reCAPTCHA v2 они будут не рабочими и наоборот.

Источник

Установка 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 в форме.

Читайте также:  Как настроить dvr 227

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

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

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

Замените «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.

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

Недавно просматривая логи заметил ошибку верификации сертификата при соединении своего smtp сервера с.

Источник



Установка и настройка 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 стала одним из самых популярных решений, когда речь идет о предотвращении отправки.

Читайте также:  Как настроить автозапуск starline s96

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

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

Недавно просматривая логи заметил ошибку верификации сертификата при соединении своего smtp сервера с.

Источник

Как установить Google Recaptcha на любой сайт — теория, практика и примеры кода

Просматривая недавно биржу фриланса Freelancehunt, я нашел интересное задание по интеграции Google Recaptcha на сайт. Фишка была в том, что клиентский проект хоть и использовал движок WordPress, формы в нем были реализованы и подключены к Битрикс через обычный PHP код. То есть стандартные WP-модули мне не подходили. Поэтому пришлось разбираться как добавить Google Recaptcha для формы на любом сайте, в том числе для CMS без базы данных или вообще без какой-либо админки. Но для начала небольшое лирическое отступление…

Кратко про Google Recaptcha и ее версии

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

На данный момент все еще актуальны обе ее версии:

  • Recaptcha v2 – видимая форма на сайте, где надо поставить флажок “я не робот”.
  • Recaptcha v3 – невидимый скрипт, который автоматически отсеивает роботов.

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

С другой стороны – третья версия Google Recaptcha вообще не отвлекает пользователя от его дел, а проверка происходит в фоновом режиме автоматически без его участия. Но что будет, если по тем или иным причинам Гугл посчитает вас ботом? – я лично не знаю.

При тесте формы после интеграции через VPN и при быстром заполнении полей, пару раз каптча меня не пропускала. Кроме того, на результаты может влиять в том числе и статистика посещаемости (активность) пользователей – чем их будет больше, тем лучше и точнее окажется срабатывание проверки.

Google Recaptcha + WordPress

Отдельного внимание заслуживает интеграция Google каптчи с Вордпресс. По этой теме достаточно много решений, но тут важно понимать зачем именно вам нужна каптча и где она будет применяться.

Например, если хотите защитить форму комментариев от спама, то тут лучше варианта чем Akismet не отыскать. Разгадывание любой каптчи в таком случае будет только раздражать пользователей. Чаще ее делают именно для почтовых форм. В WP самый популярный плагин для ее создания это Contact Form 7. В нем есть встроенная интеграция Google Recaptcha, хотя для подключения Recaptcha v2 нужно немножко пошаманить (через плагин Contact Form 7 – reCaptcha v2).

В целом для этой системы есть и другие плагины WordPress капчи, но многие со временем перестают поддерживаться + проигрывают конкуренцию крупным решениям. Тут есть смысл подключать разве что какие-то специализированные решения, например, каптча с математическими уравнениями или графическая. Во всех остальных случаях лучше справится решение от Гугла.

Добавление Google Recaptcha v3 на сайт

Итак, вернемся к нашей основной задаче. Первым делом переходим на сайте Google Recaptcha в Admin Console (синяя кнопка в правом верхнем углу). На открывшейся странице в этом же месте будет иконка “+” для добавления нового проекта (под каждый домен нужны свои ключи):

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

Напротив каждого ключа есть инструкция по его интеграции. Весь процесс состоит из двух этапов:

  1. Настройка на стороне клиента – то есть в HTML коде вашего вебсайта.
  2. Интеграция на стороне сервера – обработка запроса от пользователя, его верификация и получения ответа сервера.

1. Интеграция для вебсайта

Краткую инструкцию по этой части можно найти по ссылкам из предыдущего скриншота. Она включает в себя несколько простых шагов. Я опишу свой личный опыт.

1.1 Первым делом добавляем в HEAD область кода строку, в которой предварительно вместо reCAPTCHA_site_key поставьте выданный вам ключ сайта.

1.2. Затем в форму FORM на странице где-то перед кнопкой submit добавляете скрытое поле:

После этого она приблизительно будет иметь следующий вид:

Источник