Подключение 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 — отличный бесплатный инструмент для защиты своего ресурса от ботов.
С невидимой капчой можно проверять посетителей, не требуя от них никаких действий.
Что значит: «Вы не прошли валидацию reCaptcha»?
Валидация означает что вы всё сделали правильно(простым языком). То что Вы не прошли валидацию во время решения «капчи», означает что Вы неправильно решили задание предусмотренное в Captcha.
Во первых если войти в том же браузере где не хотите решать ReCaptcha от Google под своим аккаунтом в Google то показывать картинки будет меньше, автоматически иногда будет ставить галочку.
А во вторых есть сервисы для решения капч например Anti Captcha и RuCaptcha, и программы например XEvil и CapMonster, но они платные(есть демо версия XEvil бесплатная, но разгадывает слабее чем платная) и ещё придётся настраивать отправку капчи на решение в сервис или программу, а так же получение результата.
Эта проблема возникает наверное у всех, кто пользуется хромом от гугла. Наверняка могу сказать одно-на форуме гугл и хрома, они валят на сторонние сайты. И совершенно не дают вразумительного ответа. Пишут какую нибудь ерунду и приписывают: это моё личное мнение и не относится к компании гугл. На самом форуме рекапча тоже нет объяснений и говорят якобы сайты меняют наши ай-пи адреса и поэтоиу ответ приходит уже с другого. Всё конечно можно объяснить всякими причинами и особенно если человек не программист. На форумах гугловцам перемыли все кости и проклинают направо-налево. А те всё отнекиваются и не объясняют причин. А причина проста: каждый новый запрос-ответ является трафиком. А на нём как понятно и зарабатывают.
В общем на некоторое время помогут такие действия: заходить на сайты инкогнито, очищать кеш и куки, чистить историю. Сами понимаете, потом вновь мучения с паролями и т.д. Чтобы избежать этого, проделайте нижеследующее. В хроме зайдите в настройки и смените поисковую систему на яндекс(или ещё какую). Затем просто перед входом на сайты, выходите из аккаунта гугл. Влдадки, пороли и история будут на месте и рекапча работать с первого запроса.
Это просто обновленная ReCaptcha.Вообще она нужна для того чтобы отсеять ботов при регистрации.Так же когда вы вводите символы с картинки то помогаете оцифровать электронные книги которые были отсканированы но неправильно распознаны. Вот эти символы и есть отсканированные части книг. Разработчик создал сервис чтобы заработать деньги и помочь в оцифровке книг по всему миру.
Вот не так все, батенька. Отвечают на бонусные. И очень здорово отвечают на бонусные вопросы. Загляни, Серёжа в мой профиль. Ответов очень много.Есть и с малым количеством ответов, но там их мало, потому что к тем, что уже имеются добавить нечего, а синонимизированные я стараюсь удалять ( и об этом тоже знают). А что особенно радует, многие, зная мою приверженность к широкоформатным, обоснованным, аргументированным ответам дают именно таковые.
Моя большая и глубочайшая признательность всем отвечающим в моих вопросах!
Первые вопросы конечно страдали от качества ответов. Сейчас такового практически нет. Даже новенькие (если не первые ответили) отвечают так искустно, как это на своём примере показывают те, кто не впервые у меня отвечают. Тяжело было вначале, сейчас почти все ответы приносят радость и удовлетворение.
Отвечают на бонусные. Отвечаю много. Отвечают достойно. Спасибо всем.
P.S.Бонусные вопросы задавала, задаю и буду задавать, в каких бы меня мошеннических манипуляциях не обвиняли. Жду весенних доказательств в счастливом предвкушении.
Вы удачно затронули одну из сторон необъективности: страстное желание сделать свою оценку публичной.
Видите ли, в чём дело. Каждый человек, фотографируясь, надеется на удачное фото. Верно это или нет, но мы упорно воспринимаем фотоаппарат, как глаз некоего волшебника, который сделает из нас Мисс и Мистеров Вселенной.
Щёлкнумшись, человек осознаёт, что получилось почти как в зеркале. Может быть и ещё даже похуже. Видит, что фотографию можно назвать неудавшейся. Но вдруг кто-то из близких и друзей говорит: «Ух ты, как ты замечательно выглядишь! А где фоткалась? А когда? А кто фотограф? А где платье покупала? А за сколько? А помада какая?». Человек понимает: «Это всего лишь для утешения». Но ему всё равно становится приятно. Не всем, а тем, кто любит лесть.
Ведь все мы знаем, как неприятно обижать человека. Да и зачем это нужно? И мы очень понимаем, когда объективная оценка может повредить психику «модели». А интернет (хоть и помойкой называют) имеет одно ценное качество: успокаивать и вылавливать «поклонников» из воздуха.
Например, я прекрасно знаю, что если я прямо сейчас выложу сюда фото Винни-Пуха или Карлсона и спрошу: «Ну как я Вам? Кстати, у меня 100 поклонников!». То подавляющая часть зрителей (понимающе усмехнувшись в густые усы) ответит: «О, да вы ничего, интересная девушка. А пропеллер-то какой замечательный»!
Поэтому, я прекрасно понимаю очень и очень многих людей. Они не ждут искреннего признания, может быть. Но, понимаете, ждут чуда. Ждут праздника комплиментов. Той самой, щадящей пустоты, о которой я говорила.
Которых так мало в нашей унылой и нетактичной реальности.:)
Verifying the user’s response
This page explains how to verify a user’s response to a reCAPTCHA challenge from your application’s backend.
For web users, you can get the user’s response token in one of three ways:
For Android library users, you can call the SafetyNetApi.RecaptchaTokenResult.getTokenResult() method to get response token if the status returns successful.
Token Restrictions
Each reCAPTCHA user response token is valid for two minutes, and can only be verified once to prevent replay attacks. If you need a new token, you can re-run the reCAPTCHA verification.
After you get the response token, you need to verify it within two minutes with reCAPTCHA using the following API to ensure the token is valid.
API Request
URL: https://www.google.com/recaptcha/api/siteverify METHOD: POST
| POST Parameter | Description |
|---|---|
| secret | Required. The shared key between your site and reCAPTCHA. |
| response | Required. The user response token provided by the reCAPTCHA client-side integration on your site. |
| remoteip | Optional. The user’s IP address. |
API Response
The response is a JSON object:
For reCAPTCHA Android:
Error code reference
| Error code | Description |
|---|---|
| missing-input-secret | The secret parameter is missing. |
| invalid-input-secret | The secret parameter is invalid or malformed. |
| missing-input-response | The response parameter is missing. |
| invalid-input-response | The response parameter is invalid or malformed. |
| bad-request | The request is invalid or malformed. |
| timeout-or-duplicate | The response is no longer valid: either is too old or has been used previously. |
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Ошибка ReCAPTCHA: как избежать этой проблемы при просмотре
Что такое reCAPTCHA
Во многих случаях при доступе к веб-странице появляется сообщение убедитесь, что мы настоящий пользователь а не бот. Это позволяет предлагать правильные услуги без ущерба для самого веб-сайта или любого пользователя.
Использование пользователями очень простое. Интернет-пользователь входит на страницу, и появляется поле, в котором он должен отметить, что он не бот, и тем самым подтвердить, что он человек. Это похоже на другие варианты, которые мы видим, в которых вы должны отметить серию цифр, изображений и т. Д. Однако в этом случае процесс выполняется быстрее и проще.
Однако бывают случаи, когда появляется ошибка и reCAPTCHA не работает в Chrome или любом браузере. Появится сообщение о том, что проверка не удалась. Это помешает нам открыть веб-сайт или войти в систему.
Почему в браузере не работает reCAPTCHA
Важно знать основные причины, по которым reCAPTCHA вылетает в браузере. Нет конкретной причины, но есть ряд возможностей, которые необходимо принять во внимание, а затем решить эту проблему для правильной навигации.
Мы просматриваем через VPN или прокси
Иметь VPN или просматривая полномочие очень распространено. В нашем распоряжении много таких услуг. Они позволяют нам избегать возможных географических блоков, которые могут существовать, а также сохранять личную информацию, если мы подключаемся из общедоступной сети.
Однако это может быть причиной того, что reCAPTCHA не работает в браузере. Это может привести к конфликту с сетью и лишить нас возможности проверить, действительно ли мы являемся законным пользователем, а не ботом.
Браузер устарел
Эта ошибка возникает в браузере, поэтому одна из причин, которая также может вызывать эту проблему, заключается в том, что он не обновлен. Имея устаревшее программное обеспечение может быть источником множества ошибок при подключении к сети и использовании наших устройств.
Вредоносное ПО в системе
Мы уже знаем, что хакеры используют множество стратегий, чтобы подвергнуть риску наши компьютеры. Многие атаки могут повлиять на правильное функционирование браузера и привести к сбоям, подобным тому, что мы описываем в этой статье.
Мы подключены с подозрительного IP
В таких случаях это очень частая причина. Веб-сайт интерпретирует, что мы подключены к подозрительный IP и считает, что мы можем быть ботом. Это может произойти, если мы просматриваем общедоступный Wi-Fi, например, где внутри много пользователей. Также в случае доступа к сети из VPN.
Что делать для устранения неполадок с reCAPTCHA
Мы увидели, каковы основные причины появления ошибки reCAPTCHA в браузере. Теперь мы собираемся объяснить некоторые проблемы, которые необходимо принять во внимание, чтобы это не превратилось в проблему и чтобы иметь возможность нормально перемещаться.
Держите оборудование в безопасности
Конечно, один из самых важных вопросов избежать сбоя reCAPTCHA и другие подобные сообщения, которые могут появиться в браузере, предназначены для обеспечения безопасности компьютера. Для этого мы можем использовать множество инструментов, доступных для всех типов операционных систем.
Мы можем использовать антивирус, а также брандмауэр и даже расширения для браузера. Все это поможет нам избежать проникновения вредоносных программ, которые могут повлиять на нас. Мы должны поддерживать безопасность на всех уровнях и, таким образом, уменьшать проблемы.
Обновите систему и браузер
Это означает, что у нас всегда должны быть все патчи и обновления которые доступны. Но особенно вы должны принять во внимание важность наличия последней версии браузера, чтобы предотвратить его устаревание и появление ошибок такого типа.
Контроль использования VPN и прокси
Если мы собираемся перемещаться через VPN или прокси и замечаем, что это может создавать проблемы такого типа, мы должны контролировать использование. Мы можем взглянуть на конфигурацию, посмотреть, может ли это быть ошибка с сервера мы подключены и в конечном итоге пытаемся использовать другой сервис.
Перезагрузите IP
Перезагрузите роутер
Таким образом, это некоторые из основных проблем, которые мы должны учитывать, чтобы избежать проблемы reCAPTCHA в браузере. Мы рассмотрели основные причины возникновения подобных сбоев, а также несколько основных советов по их устранению.
Капча — что это такое, какая она бывает и как правильно её выбирать
Что такое капча
Капча (англ. captcha) — аббревиатура от «Completely Automatic Public Turing Test to Tell Computers and Humans Apart» (полностью автоматический тест Тьюринга для отличния компьютеров от людей). По сути, это защита от заполнения и отправки любых форм ботами и спамерами в автоматическом режиме, будь то запрос в поисковой системе или регистрация в каком-либо сервисе, отправка комментария под статьёй или заполнение анкеты на сайте. Как правило, представляет собой картинку с со случайным текстом, цифрами, буквами, значение которой нужно записать в специальную форму.
Пример капчи во Вконтакте
Эффект рассчитан на то, что боты картинку не распознают, а человек — сможет. Соответственно, спамеры в автоматическом режиме и боты проверку не пройдут, и спам тоже.
Виды капчи, какая она бывает
Как было сказано выше, как правило, капча — это картинка с цифрами и буквами. Однако, это не единственная её форма, ведь всё зависит от вашей фантазии.
Самая простая капча представляет собой чекбокс, куда надо поставить галочку в подтверждение о том, что вы — не робот.
Капча на сайте МТС при отправке бесплатных sms
Бывают такие, что приходится выбирать картинки по какому-то признаку. Например, подобная схема реализована на сайте МТС в разделе отправки бесплатных сообщений SMS.
Собственно, видов превеликое множество. Как же выбрать то, что нужно? Лично я рекомендую пользоваться самописными вариантами, ибо тут всё будет зависеть от фантазии вашей или ваших программистов. Если капча получится оригинальной, то такую вещь обойти спамерам будет намного сложнее. Но, так как это довольно накладно либо по времени, либо по деньгам, советую воспользоваться сервисом Google reCAPTCHA
Google ReCaptcha — как установить и настроить
Google reCAPTCHA — это сервис, который предоставляет бесплатную капчу для защиты различных форм ввода данных на сайте от спамеров и ботов.
На изображении вы видите промо Google reCAPTCHA Invisible — нового вида рекапчи (невидимая), который только проходит бета-тестирование. Соответственно, пока что пользоваться им я не рекомендую, лучше отдать предпочтение классической проверенной рекапче.
Нужно авторизоваться или завести новый аккаунт. Если у Вас уже есть аккаунт от почты Gmail, можно авторизоваться с его помощью.
После авторизации регистрируем сайт, получаем ключи доступа.
Регистрируем сайт для Google Recaptcha
Если их прописать неверно, увидите ошибку Error: Invalid domain key или Ошибка: неверный домен ключа
Публичный и секретный ключи Google Recaptcha
Они понадобятся в дальнейшем:
Я приведу пример с последним вариантом.
В ней мы разместили нашу рекапчу над кнопкой отправки формы. Теперь нужно подключить обработчик. Над этой формой разместим следующий код:
Здесь мы подключили PHP библиотеку для обработки рекапчи, а также верифицировали капчу на сервере Google.
Я подготовил специальную страницу для проверки рекапчи: http://recaptcha.sheensay.ru — код полностью копирует источник выше.
В случае, если форма будет успешно отправлена, вы увидите соответствующее сообщение:
Форма успешно отправлена
Если же, капча не пройдёт проверку, вы увидите сообщение об ошибке:
Проверка капчи не пройдена
Всё, теперь каждая форма комментариев защищена капчей.
Иерархия файлов в подобном проекте:
index.php в корне — тут располагается основной код, рядом располагается каталог recaptcha — в нём все файлы из PHP-библиотеки
Приведу полный код страницы http://recaptcha.sheensay.ru. Вы можете поменять логику вывода ошибок на свою:
Как установить Google Recaptcha в WordPress
Чтобы установить Google Recaptcha в WordPress, самым удобным будет сделать это через плагин Google Captcha (reCAPTCHA) by BestWebSoft
Устанавливаете плагин, в поля вводите ключи для домена, которые мы приготовили по инструкции выше — и готово.
Далее, переходите к настройкам плагина, вводите публичный и секретный ключи в соответствующие поля:
Страница настроек плагина Google Captcha (reCAPTCHA) by BestWebSoft
Как защитить комментарии от спама без капчи
Если морока с собственными комментариями ни к чему, трудно установить капчу, она Вам почему-то не нравится или просто нет такой возможности, то можно воспользоваться готовой системой комментирования Disqus. Как выглядит Disqus, можно увидеть под этой статьёй, на этом сайте интегрирована и используется эта система комментирования. Из плюсов — очень удобная система модерирования, отсутствие спама как такового, приятный внешний вид.
Как обойти капчу
Как говорилось выше, боты картинку капчи не распознают, а человек — сможет. Однако, и на старуху найдётся проруха, потому появились сервисы автоматического распознавания капчи. Одним из них является anti-captcha.com (бывший Antigate). 
Суть сервиса заключается в том, что он за небольшую плату предоставляет сервис распознавания капчи. Капчу распознают люди, готовые это делать за копейки.
Такой сервис может пригодиться, скажем, для парсера поисковой выдачи (например, KeyCollector). Поисковые системы Google или Yandex при слишком частых запросах к ним начнут подозревать автоматические запросы и будут просить вводить капчу. Тут и пригодится сервис автоматического распознавания капчи. Сам сервис предоставляет API для взаимодействия с ним. Многие программы — парсеры, имеют встроенный функционал для взаимодействия с антикапчей (тот же KeyCollector имеет его), вам будет достаточно только пополнить баланс и прописать ключи API сервиса в программе, остальное — дело техники.
