пожалуйста заполните поле recaptcha
Подключение Google reCAPTCHA на Vue и валидация ответа на сервере
В этой статье я покажу как подключить капчу от Google (reCAPTCHA) на Vue JS и валидировать ответ на сервере (я использую бекенд на Laravel/Lumen в качестве примера, но принцип валидации одинаковый для всех технологий).
Предисловие
Мы будем использовать Invisible reCAPTCHA.
Это невидимая* капча, которую не нужно проходить до тех пор, пока система не посчитает это нужным. Администратор сайта может установить пороговый уровень (Security Preference), при котором система будет требовать от пользователя пройти дополнительную проверку.
*- значок reCAPTCHA все же должен присутствовать на странице.
Невидимая капча на сайте.
Вопрос / Ответ
Перед началом работы я хотел бы ответить на вопросы, которые возникли у меня, когда я начинал работу с Google reCAPTCHA.
В: Сколько стоит использование reCAPTCHA?
О: ReCAPTCHA от Google — это бесплатный инструмент.
В: Зачем нужно еще раз проверять ответ пользователя на бекенде, если он уже прошел капчу на сайте?
О: Когда вы делаете запрос на сервер, вы отправляете что-то наподобие этого:
Если не проверять токен капчи на бекенде, боты могут просто спамить запросами БЕЗ этого токена или подменять его на фиктивный.
В: У меня реакт, что мне делать?
О: React JS — отличная вещь. Если вы используете его для разработки сайтов, советую обратить внимание на https://github.com/appleboy/react-recaptcha. Принцип работы очень похож на пример с Vue.
Приступаем к работе
Итак, прежде чем начать готовить, нам нужен список ингредиентов:
Шаг №1: Получаем ключи для использования reCAPTCHA на своем сайте
В поле label можете писать что угодно.
Далее выберите тип — Invisible reCAPTCHA badge.
Вы можете указать несколько доменов, на которых будете использовать капчу.
В качестве примера я указал yourawesomedomain.com и localhost.
Принимаем условия использования и двигаемся дальше.
Вам выдали два ключа, сохраните их в надежном месте. Мы вернемся к ним позже.
Шаг №2: Фронтенд. Установка и подключение капчи к нашим формам
Для начала, нам нужно добавить этот код в секцию head:
Свойство onload сообщит нашему компоненту, что капча готова к использованию.
Дальше я покажу готовый компонент и мы разберем его по частям:
Начнем с того, что мы имортировали Vue-Recaptcha в наш компонент:
Дальше мы обьявили свойство sitekey в data() компонента:
Добавляем компонент Vue-Recaptcha в нашу форму:
Метод register будет вызван при успешном прохождении капчи, в то время как expired вызывается при истечении срока действия капчи.
Метод onCaptchaExpired перезапускает капчу:
Самой форме мы добавляем событие @submit.prevent=»validate», которое запускает метод validate при отправке формы.
Процес можно описать так:
В методе register мы получаем recaptchaToken, который мы должны отправить на сервер вместе с данными, которые ввел пользователь:
На этом наша работа с фронтендом закончена. ReCAPTCHA успешно установлена и работает.
P.S. Если вы собираетесь использовать капчу в нескольких компонентах, лучше всего вынести sitekey в .env файл и получать его с помощью process.env:
Шаг №3: Валидация на бекенде. Пример валидации на Laravel и Lumen
Сделать валидацию ответа на сервере очень просто. Начнем с примера на Laravel.
1) В папке config создайте файл recaptcha.php с таким содержимым:
2) После этого, добавьте переменные в .env файл:
3) Установите GuzzleHttp, чтобы иметь возможность отправлять запросы на API гугла:
4) В контроллере добавьте метод checkRecaptcha:
В этом методе мы отправляем наш токен (который мы получили с фронтенда) методом POST на https://www.google.com/recaptcha/api/siteverify
5) В методе register (в вашем случае название может отличатся, это метод на который вы отправляли POST запрос с фронтенда) добавьте следующий код:
Все готово к использованию!
Путешествие токена. Визуальное представление.
Полный код контроллера будет выглядеть так:
Валидация ответа на Lumen
На Lumen все делаем так же, как в примере с Laravel, за исключением того, что нам нужно зарегистрировать наш конфиг (recaptcha.php) в bootstrap/app.php:
Заключение
Итак, в этой статье вы научились использовать Google reCAPTCHA в своем проекте на Vue.
ReCAPTCHA — отличный бесплатный инструмент для защиты своего ресурса от ботов.
С невидимой капчой можно проверять посетителей, не требуя от них никаких действий.
Защита форм от спама «невидимой» Google reCAPTCHA v3 без потери баллов по PageSpeed Insight
Периодически возникал вопрос по защите от ботов различных форм на сайте: регистрация, авторизация, подписка на рассылку, обратная связь, комментирование и т.д.
Стандартная капча — бесполезная, ботами она проходится «на раз», а пользователям создает проблемы.
Оптимальное решение это использовать Google reCAPTCHA v2 или v3. Обе версии Google reCAPTCHA — отличный вариант. Это лучшее, что сейчас доступно на рынке из понятных и надежных решений к тому же бесплатных.
Основная проблема у обеих версий — при подключении значительно снижаются баллы по PageSpeed Insight на 20-30.
Пример reCAPTCHA v2 — требует угадывать картинки
 |
|
Важный для меня момент — не создавать проблемы реальным пользователям, т.к. я сам не большой любитель угадывать транспортные средства в reCAPTCHA v2, поэтому мой выбор v3.
Итак две проблемы Google reCAPTCHA v3, которые необходимо решить:
В лицензионном соглашении 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 дополнения:
|
2. Добавляем в javascript-файл сайта или компонента инициализацию reCAPTCHA при клике по полям формы (в этом примере я предполагаю, что вы используете jQuery):
3. Добавляем отслеживание клика по кнопке button в форме. Далее внутри, используем пример описанный в документации Google. Он заполняет поле g_recaptcha_response, которое мы будет использовать на последнем шаге для валидации пользователя.
4. Отслеживаем event onBeforeResultAdd в init.php
Перед отправкой результатов формы делаем обращение на сервер Google с вашим
, и значением из hidden поля g_recaptcha_response из формы.
В ответ получаем баллы данного пользователя:
В заключение
Данную методику можно использовать на любых сайтах и формах вне зависимости от CMS. Я привёл общие методики работы, которые можно применять в своём проекте.
Подобным образом можно поступить и с Google reCAPTCHA v2, инициализировать по клику на форме и просить пользователя установить галочку «Я не робот» и отгадать картинки, если потребуется. В данном случае это также сэкономит баллы по PageSpeed Insight и даст пользователю инструмент (выбирать картинки), чтобы доказать, что он не робот. Но как я уже говорил выше для меня самое важное, это не создавать пользователю преград.
Captcha и reCAPTCHA для WordPress — защита сайта от спама
Как добавить Captcha или Google reCAPTCHA в WordPress
Защита от спама с помощью Captcha или Google reCAPTCHA на веб-сайте WordPress. Лучшие плагины CAPTCHA для вашего сайта WordPress. Остановите спам уже сейчас!
Captcha by BestWebSoft плагин WordPress
Плагин Captcha — это лучшее решение для безопасности, которое защищает формы вашего сайта WordPress от спама. Совместимый с последней версией WordPress.
Плагин Captcha WordPress можно использовать для формы логина, регистрации, восстановления пароля, комментариев и многого другого.
Эффективный, простой в использовании и управлении, этот плагин всегда защитит формы вашего сайта. Можно выбирать тип капчи:
Улучшайте защиту с помощью капчи путем добавления: Букв, Чисел, Изображений. Скрывайте капчу для зарегистрированных пользователей в форме комментариев.
Невероятно простые настройки для быстрой установки без изменения кода. Установили и активировали плагин. Настройки плагина находятся в разделе Captcha:
Плагин полностью на русском языке. Настроили, сохранили и смотрим результат. Например, в форме комментариев WordPress установлена Captcha:
Форма входа в консоль с Captcha, простые математические действия:
Используйте супер простой плагин, который легко настроить. А следующий плагин добавляет в формы ВордПресс reCaptcha от Google. Плагин reCaptcha также от BestWebSoft.
Плагин reCaptcha by BestWebSoft
Самый популярный плагин reCaptcha для сайтов WordPress! Защищайте формы вашего сайта WordPress от спама с помощью Google reCAPTCHA. reCAPTCHA Version 3, Version 2, Invisible включены. 3 125 382 активных установок.
Пользователям нужно подтвердить, что они не роботы, прежде чем форма будет отправлена. Это легко для людей и сложно для ботов. В бесплатной версии плагина собраны основные и базовые функции, которые могут быть полезны для вашего сайта WordPress.
Вы можете легко добавить защиту reCaptcha в свой WordPress. Добавьте reCaptcha в:
Установите и активируйте плагин в меню Плагины WordPress.
Настройки плагина находятся в меню reCaptcha. Невероятно простые настройки для быстрой установки без изменения кода.
Как получить ключи reCaptcha?
Выполните следующие шаги, чтобы получить и включить защиту reCaptcha с помощью официальных ключей Google Captcha:
1. Откройте панель администратора WordPress.
2. Перейдите на страницу настроек плагина.
3. Нажмите ссылку «Получить ключи API».
4. На сайте Google dведите имя домена и нажмите кнопку Создать ключ.
5. Вы увидите ваш открытый и закрытый ключи. Скопируйте их и вставьте в соответствующие поля на странице настроек плагина.
6. Сохранить изменения.
Google Captcha не будет отображаться пока вы не заполните поля с ключами.
Подключение и установка Google reCAPTCHA на сайт
В консоли администратора Google ReCaptcha заполните регистрационную форму. Зарегистрируйте свое доменное имя в сервисе Google reCaptcha:
Обратите внимание, что вы сможете выбирать между reCAPTCHA v2 или v3, то есть, можете использовать флажок или невидимый тест. Говорят флажок Я не робот будет понадёжней.
Получение секретных ключей для новой Google reCAPTCHA:
Вам нужно будет ввести оба ключа в настройках плагина CAPTCHA на вашем сайте WordPress:
Тип reCAPTCHA: версии v3 2018 г. будет выглядеть так, в правом нижнем углу страницы сайтаWordPress.
reCAPTCHA v3 проверяет запросы с оценкой и дает вам возможность действовать в контексте вашего сайта.
Так называемая не видимая CAPTCHA, которая может обнаруживать ботов, не требуя каких-либо преднамеренных действий со стороны пользователей.
При наведение мышкой она раскрывается:
Версия 2 флажок 2012 г. будет встроена непосредственно в форму комментариев и в стандартные формы WordPress которые вы выберите при настройках плагина.
Защита от взлома: Форма входа в админ панель WordPress с Google reCAPTCHA v2:
А это у меня в форме комментариев защита от спама установлена. Пользователю предлагается просто поставить галочку в чекбоксе, после нажатия на чекбокс посетителю могут предложить выбрать все картинки, которые попадают под заранее установленные условия — например, выбрать все светофоры. Оставьте коммент и заодно проверьте работу капчи от Гугле:
Кстати, дополнительно можно убрать поле сайт в комментариях от не добросовестных комментаторов.
Вы также можете добавить в закладки страницу консоли администратора Google reCAPTCHA и регулярно ее проверять. После того, как ваш сайт посетит достаточный объем реального трафика, вы сможете просматривать ценную аналитику, связанную с запросами на отправку форм.
А кроме плагина reCaptcha by BestWebSoft, что можно использовать? Как альтернативу модулю от BestWebSoft можно взять Simple Google reCAPTCHA.
Simple Google reCAPTCHA
Простая reCAPTCHA защитит ваш WordPress! Лекко защитите свой WordPress от спам-комментариев и атак методом перебора с помощью Google reCAPTCHA.
Проверка Google reCAPTCHA потребуется только для не авторизованных пользователей.
Что защищает Simple Google reCAPTCHA:
Плагин очень прост в настройке и отлично работает. Преимущество плагина:
Установка и активация плагина стандартная. Настройки такие же как сказано выше:
Надеюсь, друзья, пост был полезен для вас. Всего доброго и удачи.
Пожалуйста заполните поле 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) и секретный (2) ключи. Публичный ключ необходим для отображения блока капчи. Секретный — для проверки правильности отправки каптчи.
Скопируйте их в одноименные поля в решении от Аспро.
Сохраните изменения. В форме обратной связи появится соответствующий блок.
В группе настроек Google reCAPTCHA v2 также можно настроить внешний вид блока, отображаемого с формой обратной связи (2). И задать маски исключения (1) — адреса тех страниц, на которых не будет работать reCAPTCHA в формах. Действует только на статических страницах.
Выбрав скрытый размер, блок можно убрать из формы обратной связи. При этом он может отображаться в правом или левом нижнем углу.
В группе настроек Google reCAPTCHA v3 также можно задать маски исключения (1) и минимальную допустимую оценку пользователя (2).
Внимание!
При верификации капчи сервис Google reCAPTCHA возвращает рейтинг человечности текущего пользователя — число от 0.0 (бот) до 1.0 (человек). Эта оценка неоднозначна и может меняться со временем. Так как при ее расчете анализируются собранные поведенческие характеристики пользователя и другие параметры на разных сайтах.
Заполнение формы пользователем считается подозрительным, если оценка меньше заданного минимального значения. При его снижении увеличивается вероятность пропуска спама, а при повышении значения — увеличивается вероятность отклонения настоящего человека.
Примечание:
При генерации публичного и секретного ключей будьте внимательны! Если вы сгенерируете ключи для reCAPTCHA v3, а в админке выберете reCAPTCHA v2 они будут не рабочими и наоборот.
Пожалуйста заполните поле recaptcha
В Аспро: Маркет 1.5.0 появился выбор – какую капчу использовать на своем сайте: стандартную от 1С-Битрикс или Google reCAPTCHA.
Переключение осуществляется в административной части сайта. Раскройте вкладку Аспро: Market и выберите пункт «Настройки».
 |
Пролистайте список параметров до блока «Google reCaptcha» и установите галку у соответствующего параметра, чтобы активировать использование альтернативной капчи. Выберите тип reCaptcha. Начиная с версии решения 1.7.0, появился тип reCaptcha v3. Третья версия использует искусственный интеллект, чтобы отличить человека от бота. Во время посещения сайта система в фоновом режиме проводит мониторинг поведения пользователя, что с большей вероятностью позволяет выявить робота.
Подключение капчи от google потребует дополнительной регистрации вашего сайта на сервисе. Перейдите по ссылке и заполните форму следующего вида:
В поле «Название» (1) укажите название сайта, его раздела или формы обратной связи, на которой устанавливаете капчу. Эта метка для вас, чтобы потом было проще ориентироваться в статистике по зарегистрированным на сервисе сайтах.
В «Типе reCAPTCHA» (2) выберите один из видов капчи. Чтобы использовать скрытую капчу, выберите invisible reCAPTCHA.
В поле «Домены» (3) можно указать несколько доменов, по одному в строке. Вместе с доменом капча подключится и ко всем поддоменам.
Далее следует ознакомится с условиями использования reCAPTCHA. Для продолжения регистрации, необходимо их принять – установить соответствующую галку (4).
Также рекомендуется поставить галку у пункта «Отправлять владельцам оповещения» (5). Данная опция будет держать вас в курсе о проблемах сайта, связанных с трафиком.
После успешной регистрации вам будет предоставлена инструкция подключения капчи к своему сайту. Из нее потребуется публичный и секретный ключи. Публичный ключ необходим для отображения блока капчи. Секретный – для проверки правильности отправки капчи.
Скопируйте их в одноименные поля в используемом вами решении от Аспро.
Сохраните изменения кнопкой «Применить». В форме обратной связи появится соответствующий блок.
Форма с Google reCaptcha v2.
Форма с Google reCaptcha v3. ReCaptcha отобразится в правом нижнем углу страницы. В форме обратной связи она появится только если система заподозрит, что посетитель — робот.
В группе настроек Google reCAPTCHA также можно настроить внешний вид блока, отображаемого с формой обратной связи (2), и задать маски исключения (1).
светлыми и темными;
Выбрав скрытый размер, блок можно убрать из формы обратной связи. При этом он может отображаться в правом или левом нижнем углу.
Внимание!
При верификации капчи сервис Google reCAPTCHA возвращает рейтинг человечности текущего пользователя — число от 0.0 (бот) до 1.0 (человек). Эта оценка неоднозначна и может меняться со временем. Так как при ее расчете анализируются собранные поведенческие характеристики пользователя и другие параметры на разных сайтах.
Примечание:
При генерации публичного и секретного ключей будьте внимательны! Если вы сгенерируете ключи для reCAPTCHA v3, а в админке выберете reCAPTCHA v2 они будут не рабочими и наоборот.