Главная страница » Что такое токен google recaptcha

Что такое токен google recaptcha

  • автор:

Использование 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:

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

How to integrate Google ReCaptcha v3 correctly in 2022?

Google Recaptcha is one of the industry-standard methods that solve the email spamming problem.

What is Email Spamming?

Email spam a.k.a junk emails refers to uninvited emails, usually sent to a large list of recipient email users. This recipient’s email addresses are stolen or purchased by attackers for money theft or commercial purpose depending on what attackers want.

These emails most of the time have hidden malware that was not supposed to open and if someone opens their mail and clicks the links will become a victim of these attackers.

e.g.

the places which is the source of the email spam –

  1. Login, signup and reset password forms on the site
  2. Comment and contact us section in a blog

There are 4 types of Google ReCaptcha

Google Recaptcha

In this article, we are going to integrate the google ReCaptcha v3 which is the latest.

If you’re already using Google Recaptcha v2 and you want to move to Google Recaptcha v3, you can read the Google documentation for the same, it is pretty straightforward.

Steps to Integrate Google Recaptcha V3

Step 1. Register your website on recaptcha admin

First of all, we need to register the website on the ReCaptcha admin console.

It looks like this –

Recpatcha Dashboard

Step 2. Client-Side Integration

After registering the website on the admin console, note down the reCAPTCHA keys.

e.g.

In the above image, you must be seeing the reCaptcha Keys.

ReCaptcha gives 2 keys –

  1. Site Key – this is the public key and is used in client-side integration.
  2. Secret Key – this is the private key and can’t be exposed to anyone. This should be safely stored in your backend server.

Let’s start with the client-side integration –

1. Load the JavaScript API with your site key

Exit fullscreen mode

in the above, you will pass the actual Recaptcha Site Key in the place of <site_key>

e.g if the Recaptcha Site Key is sdfjhjk124jkhk

you will pass it as ?render=sdfjhjk124jkhk

2. Call grecaptcha.execute on each action you wish to protect

Exit fullscreen mode

Whichever input box you wish to protect, it could be your signup, login or some other field , you need to update the click handler for that, similar to above.

You can see the above code, we pass the actual Recaptcha site key and one callback function to the grecaptcha.execute function.

When the callback is executed, we get the token in it. And this token immediately needs to be passed to the backend server for fetching the user score.

3. Send the token immediately to your backend with the request to verify

This will trigger the server-side flow.

Step 3. Server-Side Integration

With the token passed by the client and with the Recaptcha Secret Key that was already stored at the server-side, the backend will make the call to google site-verify api .

The google site-verify API returns a score that is between 0.0 to 1.0 . We also set one threshold score default of 0.5 up to which score we will allow users to make requests.

Новая reCAPTCHA от Google 3 версии: возможности и установка на сайт

google-recaptcha-v3

Доброго времени суток ��

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

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

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

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

Думаю, знакомая ситуация ��

Но, в то же время Google не собирается полностью отказываться от технологии CAPTCHA, т.к. польза её применения многократно превышает периодические неудобства конечных пользователей Интернет.

Компромиссным вариантом стала модификация данного продукта и выпуск Google reCAPTCHA v3, о которой мы сегодня и поговорим.

Особенности Google reCAPTCHA v3

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

Если вкратце, то первая версия Google капча представляла собой текстовое поле для ввода символов с картинки, которую теоретически мог распознать только человек.

При разработке второй версии Google рекапча разработчики применили другой подход, призванный устранить главную проблему первой версии — невозможность её прохождения людям с проблемами со зрениям и дисплексией. Кроме этого, компанию критиковали за бесплатное использование человеческого труда, т.к. тексты с картинок, которые нужно было вводить для прохождения Google CAPTCHA, представляли собой не что иное, как сканы выпусков New York Times с 1851 года, которые Google использовала в своих целях.

Google reCAPTCHA v2 была лишена данного недостатка, т.к. при её прохождении учитывались поведенческие факторы, а для её разгадывания нужно было всего лишь поставить галочку в поле Я не робот. Подозрительным с точки зрения алгоритма пользователям предоставлялась дополнительная проверка в виде выбора подходящих по смыслу картинок, а благонадёжных же система пропускала дальше.

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

Да и у обычных пользователей, желающих получить доступ к информации, защищённой Google CAPTCHA, частенько возникали проблемы с корректным выбором картинок, а также данная технология критиковалась за использование куков браузеров клиента, что затрудняло её прохождение в анонимном режиме и при очистке cookies при завершении сессии.

Всё это послужило стимулом для разработки reCAPTCHA v3, бета-версия которой официально была презентована в мае этого года на конференции Google I/O 2018. А с октября 2018 года данный продукт находится в открытом доступе и воспользоваться ей может любой желающий.

Особенности алгоритма Google reCAPTCHA v3, естественно, никто не раскрывает, чтобы не давать лазейку хакерам для её взлома, но в ходе публичного бета-тестирования пользователи обратили внимание на следующие особенности новой капчи:

  • Она является бесконтактной и для её прохождения пользователям не нужно ничего делать. Данная версия капча от Google невидимая для посетителей сайта.
  • Для прохождения Google CAPTCHA 3 нужно вести себя естественно, т.к. в основу алгоритма заложен анализ действий пользователя на сайте — advanced risk analysis, который применяется Google с 2013 года ещё с самого начала ввода reCAPTCHA v2.
  • Участники тестирования предполагают, что reCAPTCHA v3 отслеживает положение курсора мыши на экране, а также клики мышкой.
  • Оценка действий пользователя происходит на сервере Google reCAPTCHA, который возвращает JSON-ответ с оценкой пользователя в баллах от 0.0 до 1.0, где максимальный балл соответствует человеку, а минимальный — роботу.

Как видите, для того, чтобы преодолеть Google reCAPTCHA v3, нужно просто оставаться человеком, как это ни банально звучит �� Больше ничего не нужно никому доказывать — система сделает выводы сама.

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

Создание Google reCAPTCHA 3 версии и генерация API ключей

Процесс установки Google рекапчи 3 версии, как и предыдущих двух, начинается с этой страницы. Для доступа к ней нужно иметь зарегистрированный Google аккаунт (почту на Gmail-домене) и быть авторизованным через него в браузере.

На данной странице имеется список всех создаваемых вами Google CAPTCHA, а также форма добавления новых:

spisok-dostupnykh-google-recaptcha-v2-v3

На форме добавления новой капчи вам нужно будет выбрать её версию (сейчас доступны v3 и v2, до недавнего времени была доступна ещё и v1), ввести доменное имя сайта, на котором она будет располагаться (можно несколько, если у вас есть тестовый домен или вы ведёте разработку локально) и название для капчи с целью её идентификации в списке (можно хоть «111» назвать).

В качестве демо Google reCAPTCHA v3 я решил использовать свой тестовый локальный сайт, который я создавал для демонстрации reCAPTCHA v2, состоящей из одной-единственной формы добавления комментариев, защищённой капчей. Доступен он у меня будет на локальном компьютере по адресу http://recaptcha.v3, поэтому при создании reCAPTCHA я ввёл следующие данные:

dobavlenie-novoj-recaptcha-ot-google-3-versii

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

В нижней части формы добавления новой Google CAPTCHA находятся подписи соглашений с условиями использования данного продукта, которые включают в себя обязательное уведомление конечных пользователей об использовании reCAPTCHA v3 у себя на сайте (т.к. она невидимая), согласие на обработку персональных данных:

soglashenie-ob-ispolzovanii-google-recaptcha-v3

Интересным пунктом соглашения является запрет использования капчи для определения платежеспособности, финансового статуса и страховых возможностей — интересно, каким образом? ��

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

Если вы будете использовать капчу на реальном сайте, я лично настоятельно рекомендую выбрать данную возможность, т.к. она поможет зафиксировать Вам попытки атак на Ваш сайт и заблокировать злоумышленников по IP (если они, конечно же, не будут атаковать с разных).

После ввода данных и нажатия на кнопку Регистрация вы попадёте на страницу со сгенерированными API ключами для клиентской и серверной части сайта:

sozdanie-novoj-google-recaptcha-v3

Также моё внимание привлекло сообщение в самом верху страницы о том, что при недостаточном количестве пользователей результаты проверки reCAPTCHA могут быть неточными. Из этого косвенно следует то, что алгоритм определения «человечности» пользователей будет вычислять показатель на основании средней активности пользователей сайта.

Т.е. шкала от 0 до 1 не будет универсальной для всех сайтов. И, нужно сказать, что это правильно, т.к. активность пользователей на странице сайта-казино и блога будет совершенно различной.

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

Правда, я проигнорирую свою же рекомендацию, т.к. мой демо-сайт будет одновременно являться и live/production, поэтому просто продолжу установку.

Установка Google reCAPTCHA v3 на PHP сайт

Шаги установки Google reCAPTCHA v3 очень подробно описаны на финальном экране создания Google reCAPTCHA v3 с API ключами, поэтому я просто их выполню.

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

demo-google-recaptcha-v3

Backend сайта разработан на моём любимом PHP и для данного примера он будет состоять из 2 файлов. Первый из них, index.php, является точкой входа и содержит всего одну строчку рендеринга HTML файла с вёрсткой формы комментариев form.html.

index.php:

form.html:

Первым этапом добавления Google reCAPTCHA на сайт является добавление JavaScript кода, содержащего клиентский API-ключ, в HTML код сайта. Клиентский код состоит из двух скриптов: общего скрипта библиотеки, предоставляющего объект grecaptcha, который мы должны разместить в шапке сайта между тэгами head, и скрипта отправки запроса на сервер reCAPTCHA.

После добавления кода Google reCAPTCHA v3 код формы стал выглядеть следующим образом:

При этом на странице в правом нижнем угле появилась иконка Google reCAPTCHA, которая предусмотрена Пользовательским соглашением и служит для информирования пользователей о применении данного продукта. Так что удалять или скрывать её я вам настоятельно не рекомендую, а если это потребует сделать заказчик — можете смело приводить предыдущее предложение в качестве аргумента ��

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

Официальная документация Google никаких чётких указаний и примеров не даёт, поэтому пришлось находить решение самостоятельно ��

Google reCAPTCHA v3 в этом плане отличается от предыдущей версии, для интеграции которой нужно было встраивать в защищаемую от спама HTML форму скрытое поле с клиентским API ключом. В итоге, на сервере данный ключ подтверждался отправкой повторного запроса на Google сервер — и вся магия происходила на стороне PHP бэкэнда.

Из кода же рекапчи 3 версии напрашивается решение, что нужно делать ajax запрос на сервер к PHP скрипту, внутри которого проверять, является ли человек роботом или нет.

Отправку AJAX запроса из JavaScript на бэкэнд я реализовал следующей модификацией кода формы:

Как видите, отправку HTTP запроса из JavaScript кода я реализовал с помощью JS метода fetch(), запуская на бэке скрипт verify_captcha.php, передавая в него генерируемый на стороне Google reCAPTCHA сервера токен и action, который будет использоваться для дополнительной верификации запроса на нашем сервере.

Если отправителем запроса будет робот, я прописал код, который будет скрывать форму комментариев. Данную логику я реализовал исключительно в качестве примера, т.к. при автоматической отправке запросов хакеров вряд ли остановит скрытая форма ��

Скрипт verify_captcha.php, проверяющий данные, пришедшие с фронта, в данном случае будет выглядеть следующим образом:

В итоге, при отправке запроса на сервер рекапчи с нашего бэкэнда я получил ответ в следующем формате:

На основе полученных данных я и организовал финальную проверку перед обратной отправкой данных на сторону клиента, где проверяются название action, статус операции и оценка действий пользователя, определяющая «человечность» пользователя.

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

Однако у данного подхода есть несколько минусов:

  • Поскольку алгоритм работы Google reCAPTCHA v3 засекречен и неясно, как происходит выставление баллов пользователям, есть велика вероятность, что данная проверка не будет работать корректно из-за недостатка данных.
  • Страница долго грузится, т.к. на этапе её загрузки оправляется 3 лишних запроса на сервер рекапчи и наш собственный.

Чтобы устранить данные недостатки я решил реализовать проверку действий пользователя не на этапе загрузки страницы с отправкой AJAX запроса на наш сервер, а непосредственно при оправке данных формы, прикрепляя к ней action и токен, сгенерированный на reCAPTCHA сервере.

Таким образом мне удалось снизить количество запросов на этапе загрузки страницы с 3 до 1 и сделать проверку более естественной.

При этом код формы у меня принял следующий вид:

Код серверной проверки валидности капчи в этом случае останется без изменений.

Как видите, в данном варианте я, по сути, совместил две версии Google reCAPTCHA в одну: капча является скрытой и токен является генерируемым, как в рекапче v3, но при этом серверная валидация происходит на сервере по запросу с фронта, а не при загрузке страницы.

Достигается это за счёт добавления скрытых полей в форму, значения которым задаются при получении ответа от Google reCAPTCHA сервера.

Кстати, хотел сделать одно важное замечание по поводу использования Google reCAPTCHA v3, о котором мне сообщил один из читателей в комментариях.

В официальной документации reCAPTCHA v3 сказано, что каждый reCAPTCHA response token считается действительным в течении 2 минут после его генерации, и может быть проверен только один раз для предотвращения атак повторной отправки. Если вам нужен новый токен, вы можете перезапустить верификацию капчи.

После того, как вы получили response token, вам необходимо проверить его в течении двух минут с помощью reCAPTCHA API, чтобы убедиться, что токен является действительным.

Простым языком, если вы генерируете reCAPTCHA response token для бэкэнда на фронте во время загрузки страницы, вам нужно генерировать его повторно перед отправкой запроса через форму, т.к. чисто теоретически пользователь может отправить на бэк данные, которые нужно проверять на спамность, и через 2, и через 5, и через 30 минут после открытия страницы в браузере.

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

Думаю, что такую ситуацию имел в виду и автор вышеупомянутого комментария, который сказал, что потерял деньги из-за этой особенности Google reCAPTCHA, о которой он был не в курсе. Скорее всего, у него произошла та ситуация, которую я предположил выше: клиент отправил заявку через сайт, но капча её не пропустила, т.к. он отправил её тогда, когда срок жизни токена истёк.

Поэтому данный нюанс очень важен. Не повторяйте чужие ошибки �� И ещё раз спасибо автору комментария.

Мои впечатления от Google reCAPTCHA v3

Что я могу сказать в итоге о новой Google reCAPTCHA v3? С точки зрения пользователя данный продукт однозначно намного удобнее своих предшественников за счёт того, что теперь не нужно вводить никаких трудноразличимых символов и выбирать непонятные картинки. А всё это время и раздражение посетителей, что может привести к тому, что они попросту передумают вводить информацию, а может и вовсе отказаться от использования ресурса в целом.

Теперь же, когда капча стала полностью невидимой, все эти проблемы остались в прошлом, т.к. решение о том, является ли пользователь роботом или нет, будет приниматься в фоновом режиме на основании его поведения на сайте. Главное только, чтобы данный алгоритм действительно защищал ресурсы от автоматизированных атак, т.к. его детали засекречены и всё, что нам остаётся — это верить на слово «Корпорации добра» ��

В плане интеграции Google reCAPTCHA 3 на сайт я лично никаких существенных изменений не заметил. Так же, как и раньше, валидация действий пользователя происходит на сервере и клиенте. Серверная часть вообще осталась без изменений — для серверной проверки я использовал код, разрабатываемый для Google reCAPTCHA 2.

На клиенте механизм же слегка изменился и теперь позволяет производить проверку пользователя на «человечность» как при загрузке страницы, отправляя на бэкэнд AJAX запрос, так и по запросу, т.е. при оправке данных каких-либо форм и, возможно, даже при произведении иных действий с DOM деревом элементов.

Одним словом, теперь при интеграции клиентской части кода Google reCAPTCHA v3 появилось ещё больше гибкости, вследствие чего появится ещё больше вариантов реализации капчи на сайтах.

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

Ну, и в завершение хочу сказать, что представленный в статье код вы можете найти на Github в репозитории, который создавался для статьи о разработке капчи на PHP, ссылку на которую я приводил ранее в статье.

Демо версию Google reCAPTCHA v3 вы сможете найти внутри репы в каталоге google_captcha_v3. Буду рад любым предложениям по улучшению кода и активному участию в виде pull-requests.

P.S.: если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.

Более 5 лет опыта профессиональной разработки сайтов. Работа с PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular и другими технологиями web-разработки.

Опыт разработки проектов различного уровня: лендинги, корпоративные сайты, Интернет-магазины, CRM, порталы. В том числе поддержка и разработка HighLoad проектов. Присылайте ваши заявки на email cccpblogcom@gmail.com.

И с друзьями не забудьте поделиться ��

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

59 комментариев к статье «Новая reCAPTCHA от Google 3 версии: возможности и установка на сайт»

Спасибо за подробный обзор с примерами кода, 2 версия капчи действительно парила мозги, иногда тратил по 2-3 минуты, щелкая по картинкам)

Пожалуйста. Спасибо Вам за отзыв ��

Спасибо за статью! Очень вовремя для меня.

Пожалуйста. Спасибо Вам за отзыв ��

Наконец-то первая содержательная статья про новую капчу. Хочу внедрить на сайт ее. Есть пару вопросов, ответы на которые не могу найти.

1. Что мне делать при регистрации если у пользователя будет оценка, к примеру, ниже 0.5?
Блокируем регистрацию для такого пользователя? Навсегда? На час или другой промежуток времени?
2. Может ли данная капча защитить от автоматической регистрации пользователей? Если да, то какой механизм защиты вы видите?
3. Может ли данная капча защитить от брутфорс атак формы авторизации?

Здравствуйте. Спасибо за комментарий �� По поводу Ваших вопросов:

1. Хороший вопрос, на самом деле �� Самое интересное, что сам Google не даёт чёткого определения, какая оценка соответствует роботу, а какая — человеку. Вот, что говорится в официальной документации Google reCAPTCHA v3: reCAPTCHA v3 returns a score (1.0 is very likely a good interaction, 0.0 is very likely a bot). Т.е. если балл 1.0 — это очень похоже на хорошее взаимодействие (реального пользователя), 0.0 очень похоже на бота. На этой же странице Google рекомендует брать в качестве граничного значения 0.5. Т.е. опять всё основано на рекомендациях и чрезмерной гибкости — решать в итоге всё равно Вам и устанавливать предел для роботов тоже Вам. Следовательно, если reCAPTCHA v3 покажет меньше установленной границы — пользователя можно считать роботом и его действие не засчитывать. По поводу постоянной или временной блокировки — также решать Вам. На практике используются оба подхода.

2. Да, может. С этой целью все капчи, собственно говоря, и разрабатываются �� Механизм описан выше — выбираете граничное для робота значение и если рекапча покажет меньшее число — пользователь является роботом и его действие должно не учитываться. Как вариант, можно генерировать исключение или отдавать какой-то специфический HTTP код ошибки с обязательной записью попытки в лог сайта, чтобы в дальнейшем можно было проанализировать ситуацию и активность атакующих. Также будет хорошо блокировать пользователя, как Вы и сами предложили ранее, по его IP и внутреннему id пользователя, если атака производилась авторизованным пользователем (а при атаке с разных IP адресов данный параметр будет являться единственной зацепкой для блокировки).

3. Да, может. С помощью той же временной или постоянной блокировки по IP (внутренний id пользователя здесь не поможет, т.к. пользователь не авторизовался). Поскольку брутфорс-атаки — это разновидность автоматизированных атак, то reCAPTCHA с большой долей вероятности определит частые попытки авторизации как действия робота. А Вам останется только заблокировать данного пользователя. Для уверенности всё же я порекомендовал сделать на бэке дополнительную проверку на частоту запросов с одного IP. Если частота попыток входа с одного адреса будет больше 1 запроса в 2-3 секунды (быстрее реальный человек вряд ли введёт), то это — робот и смело можете банить его. Для начала можно временно (на час, например). Если пользователь получит несколько временных банов — можно банить постоянно.

Кстати, капча может спасти даже при атаке с разных IP (если каждая атака производится с разных IP), при которых бан по IP будет малоэффективен.

Здравствуйте, мне кажется, что в Вашем втором варианте при валидации капчи может вернуться ошибка: «timeout-or-duplicate» если пользователь затянул с отправкой формы после входа на страницу.
А вообще статься очень помогла, спасибо!

Спасибо за отзыв �� Почему Вы думаете, что может возникнуть ошибка валидации CAPTCHA timeout-or-duplicate? Не замечал у себя при реализации. Можете подробнее кейс её возникновения описать?

У меня как раз возникает эта ошибка, если форсу отправить 2 раза.

Спасает обновление страницы.

Это большой косяк, если пользователь ошибся в номере телефона, отправил… и решил повторно отправить с правильным номером ��

Как лечить, пока не понятно…

А в чём косяк? Запрос с формы был отправлен. Логично, что для повторной отправки нужно будет вернуться обратно или перезагрузить страницу, если отправка с помощью AJAX без перезагрузки происходила.

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

Да — форма отправляется через ajax без перезагрузки.

В итоге решил так.

На генерация токена назначил jquery функция.
1) Первый токен генерируется — по запросу формы.
2) Новый токен генерируется после отправки формы.

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

Что скажите, корректно это или есть подводные камни в таком способе?
Спасибо.

Да, вполне себе рабочий вариант в плане юзабилити. Да и в плане безопасности не должно быть каких-то дыр, т.к. по сути все действия происходят на стороне Google серверов. Даже если хакер начнёт делать DDOS или брутфорс атаки, то Гугл должен будет его развернуть.

Как реализовали это? Код не подскажете?

День добрый. Есть вопрос по гугл капча 3. Установил по вашей статье, есть один вопрос. Как назначать действие, после определения оценки?

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

Спасибо за комментарий. Отвечаю ��

Оценка действий пользователя прилетает с сервера Google рекапчи уже при втором запросе с бэкэнда, т.е. из PHP скрипта, как в моём примере, C#, Ruby, Python, Node.js или другого серверного языка программирования.

Поэтому без сабмита формы не обойтись, потому что именно так данные с клиентской части приходят на наш сервер. Не знаю особенности вашей ситуации, но при неудовлетворительной оценке действий пользователя действие объявлять нужно здесь:

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

Добавил комментарии и обновил код статьи для предотвращения заблуждений у других. Спасибо за идею ��

Спасибо за ответ.
Рассказываю свой кейс.

Коммерческие сайты — форма заявки на услуги, данные уходят на почту операторам, те в свою очередь звонят и т/д
Бывает или летит куча заявок — ну это сразу видно спам, а бывают заявки — по которым или не могут дозвонится или там люди в шоке и ничего не оставляли. Тут момент — или это боты или уже конкуренты пакостят. Сайты на WP, за форму отвечает CF7.

Сейчас я значит сделал следующую схему.

Отказался от CF. Теперь за отправку отвечает Ajax + PHP обработчик + Google Form + reCaptca 3

Форма через Ajax уходит на обработчик, тот в свою очередь получает ответ от капчи. Если оценка ок — то отправляет в Google таблицу, дальше дело операторов.

Если оценка низкая, то обработчик отправляет письмо с пометкой бот, где есть IP, User Agent и прочая инфа по которой можно оценить адекватность заявки. И в Google таблицы ничего не заносится, что б не портить статистику.

Такой вот кейс, надо допилить и выкатывать в свет.

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

Главная цель — это не бесить людей «Я не робот» или неведимкой и «выберете светофоры» ��

Уже позже посмотрим как это все работает. Я кстати правильно понимаю, что в идеале ставить одну капчу на все сайты, что б статистика собиралась более полной!?

И последний вопрос, а почему в комментариях у вас капча 2й версии!? ��

Для Вашего кейса данная капча подойдёт идельно. В принципе, Вы описали стандартный случай её использования.

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

По поводу reCAPTCHA 2 на данном сайте — это, что называется, «сапожник без сапог» �� На самом деле просто руки не дойдут поменять. У меня и до текущей реализации руки наверное с год доходили. И решился её установить только после того, как пользователи в комментариях стали жаловаться. До этого стояла стандартная WordPress CAPTCHA.

С этой пока всё в порядке, спама в комментах не очень много, да и пользователи сильно не жалуются. Но есть ещё нюанс — для reCAPTCHA v3 придётся немного пересматривать дизайн, потому что она сама по себе скрытая, но сбоку экрана появится иконка о том, что она установлена (как на превьюшке к статье). Придётся подвёрстывать кнопку «Вверх», на месте которой плашка вылезет.

В общем, как-то соберусь ��

А на коммерческие сайты я ставлю новую рекапчу, собственно говоря, необходимость её установки и подвигла меня на написание этой статьи ��

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

Вечер добрый �� Можно, в статье есть вариант html кода страницы для отправки запроса на валидацию капчи сразу после загрузки страницы с помощью AJAX запроса на сервер приложения. Если будут проблемы с установкой — обращайтесь, будем разбираться вместе ��

Не, у вас там слишком сложно — форма какая-то, ответ от 0 до 1, скрипт php без закрытия кода ?>
Нам, не программистам, нужно тыкнуть чего и куда прописать, чтобы любой человек, зашедший на сайт, проходил проверку капчей.

Ну, чего прописать, я всем желающим даю. А уж куда — тут уж извините, всё индивидуально �� Могу и с этим, конечно, помочь, но это уже за деньги.

Спасибо, что напомнили про деньги, иначе не раскачался бы, а так посидел и сделал.
Хороший пример, но добавьте, что библиотеки для php, которые обрабатывают json и curl, могут быть не установлены по умолчанию. Я наткнулся на эти грабли.

Мне вот нравится, когда проверка идет в фоне, а пользователь смотрит на неактивную кнопку «отправить».
Может у вас есть подобный пример?

Готового примера у меня нет, но Вы сами можете его сделать на основании кода из статьи �� Просто в данном фрагменте укажите идентификатор кнопки и изменения её стиля (в примере происходит полное скрытие элемента):

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

Пока сложно что-то сказать, технология новая. Но оснований не доверять Гуглу, как по мне, нет ��

Знаете, нужен какой-то тест на робота. Как вот к ней подойти, чтобы она не пропустила?
Меня со всех компьютеров и всех телефонов пропускает. Может она вообще всех любит? ��

Попробуйте потестировать в режиме инкогнито браузера. Это самое простое. Плюс, самый верный способ — автоматизация процесса тестирования для имитации DDOS, BruteForce и другие видов атак с помощью специальных инструментов.

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

Из самых доступных инструментов могу посоветовать Postman и другие REST клиенты, позволяющие делать массовую отправку GET/POST запросов. Запросы отправлять на url сабмита формы.

Знаете, первое что я делал — это тестировал в режиме «инкогнито» — проходит. Думаю, прикрутить себе лог с оценкой, которую выдала рекапча.

Скажите, а можно на бэкенде обойтись без функции CURL? У нас библиотека php-curl конфликтует с другими, и от неё приходится отказываться.
Есть идея поставить другой обработчик php именно на этот скрипт, но это какие-то костыли

Как альтернативу можете попробовать отправить POST запрос с помощью PHP file_get_contents().

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

И маленький вопрос, что такое у вас там «add_comment»?

День добрый. Ситуация с перезагрузкой страницы и неработающей капчей уже обсуждалась в комментариях. Это вполне нормальное поведение для reCAPTCHA и никак не её недостаток �� По поводу отправки письма при не пройденной капче — это уже проблемы реализации. Код отправки письма должен быть внутри условия успешного решения Google reCAPTCHA:

По поводу add_comment — это название действия, защищаемого с помощью reCAPTCHA. И данная информация участвует в формировании токена капчи на сервере reCAPTCHA. По сути, у вас здесь может быть любая строка. Главное, чтобы она была одинаковой в клиентском коде перед отправкой запроса на бэкенд и в коде проверки параметров запроса на сервере.

Приветствую.
Есть идеи как прикрутить капчу на форму входа\регистрации wordpress?

Пока вижу только способ, править файл wp-login.php где сама html форма идет.

Но это путь в никуда ибо после обновления, велика вероятность перезаписи файла и прощай вся настройка.

Ну и даже это у меня только в теории, тк не совсем понятно как корректно все это дело подружить ��

Добрый вечер! �� Ход мыслей по поводу «пути в никуда» у вас верный. В WP никто стандартные элементы руками не правит. Для этого в API WordPress существуют хуки — методы, позволяющие добавлять кастомный код в стандартные блоки кода движка.

Для формы входа можете воспользоваться хуком login_form, примеры использования которого и описание можете найти по приведённой ссылке.

Для формы регистрации можете воспользоваться хуком register_form.

В качестве подробного мануала для кастомизации формы регистрации WordPress можете воспользоваться данной статьёй.

Мне кажется или теперь машины проводят тест Тьюринга на людях??

Ну, в чём-то Вы правы �� Изначально CAPTCHA — это и есть автоматизированный тест Тьюринга.

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

почему у меня на вот эту строку ругается?
$params = [
Parse error: syntax error, unexpected ‘[‘ in

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

Не срабатывает у меня и всё, полночи промучился, по трём разным статьям, по одному видео и ни как. Ключи и открытые и закрытый есть.
Даже не знаю что и спросить..
Как дебаггер включить? Чтоб увидеть в чём может быть загвоздка..

А где именно проблема? Что конкретно не работает?

Смысл в том, что всё по инструкциям, а сообщения отправляются!! Есть форма отправки на е-маил с прикреплением файла, так вот если давить на кнопу «Отправить» с периодичностью в секунду, то и количество писем на почту приходит сколько раз я нажал на кнопку «Отправить»!! И капча не срабатывает, куда копать, на что смотреть??

Дебажить код тогда нужно и смотреть, какие данные в итоге приходят на бэкэнд с сервера Google reCAPTCHA, а также какие данные передаются с фронтэнда на бэкэнд.

Для дебага в JS коде (фронтенд) используйте следующую функцию:

Для PHP я лично пользуюсь следующей конструкцией для читабельного результата:

Добрый день, очень полезная статья.
У меня только возник вопрос, у меня на сайте 2-3 формы на странице, и никак не могу реализовать работу всех форм, работает только первая, остальные не проходят проверку и выдает ошибку

Здравствуйте. Спасибо за отзыв ��

По Вашему вопросу — нужно убедиться, что у всех форм и элментов внутри них id уникальные. То поведение, которое Вы описываете, очень похоже на то, что id у всех один, тогда срабатывает только первая форма — остальные не воспринимаются.

И в JS-скрипте, соответственно, нужно будет блоки кода, где используются id, продублировать. Или заменить id классами вообще и завязываться на них. Класс просто можно один нескольким элементам повесить.

А бэкэнд код останется без изменений. Один скрипт для всех форм отработает. Единственное, для новой reCAPTCHA v3 нужно action посылать на бэкэнд — так вот их тоже нужно будет сделать разными для всех форм.

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

Не понял что значит «для новой reCAPTCHA v3 нужно action посылать на бэкэнд — так вот их тоже нужно будет сделать разными для всех форм.»
Это нужно action в js указывать или в теге form? У меня в теге form указан action везде одинаковый «/mail.php».

Изменить значение action при отправке на бэкенд — это поменять значение переменной captcha_action в JS-коде. Для всех трёх скриптов там должны быть разные данные.

И ещё не лишним будет подебажить ответ сервера reCAPTCHA при отправке ему запроса из PHP кода. Там обычно подробно описывается причина, по которой алгоритм считает пользователя роботом.

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

Из того кода, что у Вас вышел, я заметил только, что доступ к элементам форм для присвоения им значений токенов, возвращённых с сервера рекапчи, вы получаете по классам, а не по id. В остальном логика та же, что я и говорил.

Для красоты кода могу посоветовать следующий вариант:

В этом варианте и значения action, которые отправляются на сервер Google с фронта и участвуют в формировании токена, будут уникальными. О необходимости делать их уникальными я говорил ранее.

Добрый день. Может вы подскажете почему эта третья версия почти всех пользователей принимает за ботов ?
Там форма для отправки картинок на сайт, ее заполняют и нажимают отправить и капча выдает сообщение им что они боты. Они нажимают кнопку отправить еще раз, и картинка уходит на сайт. Как видно на картинке все действия люди делают дважды теперь.

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

У Вас указано в проверке (на сервер): если больше 0 (> 0), тогда делаем отправку формы.

Каково вероятность, что бот может и 0,3 и выше набрать?

Добрый день.
Заметил некий нюанс. У вас токен генерится при загрузке страницы, однако Google (https://developers.google.com/recaptcha/docs/verify) предупреждает, что время жизни токена ограничено двумя минутами.
«Each reCAPTCHA user response token is valid for two minutes…»
Поэтому имеет смысл получать токен непосредственно перед отправкой формы, навесив эту функцию на событие ‘submit’.

Да, действительно, есть смысл. Согласен. Реквест с формы, защищённой капчей, может отправляться и через час после открытия страницы. Как-то не долгядел это ограничение.

Здравствуйте, почему статья не учитывает временной отрезок жизни капчи в 2 минуты?
Я на этом прокололся и потерял деньги для компании. Т.к. капча подгружается при загрузке страницы, то по истечении 2 минут она аннулируется и проверка не проходит.
Для повторного использования токена, по истечению времени или для отправки повторной формы, необходимо его запросить заново посредством метода grecaptcha.execute.
Обязательно добавьте данную заметку.

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

Здравствуйте. Ответ на Ваш вопрос уже есть в комментариях под статьёй. Прочитайте их внимательно, пожалуйста �� Вы не первый, кто сталкивается с такой проблемой ��

Добрый вечер! Есть несколько форм на сайте, одна из которых скрыта и появляется при нажатиии кнопки. Отправку данных с несколькмх форм решил с помощью вышеуказанного комента, но все-таки есть трабл. Проблема заключается в чем — если убрать с сайта форму, которая скрыта, то формы работают корректно , но стоит её вернуть, то не одна форма не отрабатывает.. id не повторяются

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

Здравствуйте! подскажите! у меня есть свой аккаунт в гугле, я могу установить Google reCAPTCHA v3 на сайт, который не связан с моим аккаунтом.

How to implement reCAPTCHA in a React application

React Logo Over Purple Background

In this article, we’ll demonstrate how to implement reCAPTCHA v2 in a React application and how to verify user tokens in a Node.js backend.

Prerequisites

To follow along with the examples in the tutorial portion of this article, you should have a foundational knowledge of:

  • React and its concepts
  • Creating servers with Node.js and Express.js
  • HTTP requests

What is CAPTCHA?

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a type of challenge-response security measure designed to differentiate between real website users and automated users, such as bots.

Many web services use CAPTCHAs to help prevent unwarranted and illicit activities such as spamming and password decryptions. CAPTCHAs require users to complete a simple test to demonstrate they are human and not a bot before giving them access to sensitive information.

What is reCAPTCHA?

There are several types of CAPTCHA systems, but the most widely used system is reCAPTCHA, a tool from Google. Luis von Ahn, the co-founder of Duolingo, created the tool back in 2007 and is being used by more than six million websites, including BBC, Bloomberg, and Facebook.

The first version of reCAPTCHA was made up of randomly generated sequences of distorted alphabetic and numeric characters and a text box.

Recaptcha

To pass the test, a user needs to decypher the distorted characters and type them into the text box. Although computers are capable of creating images and generating responses, they can’t read or interpret information in the same way a person can to pass the test.

reCAPTCHA generates a response token for each request a user makes and sends it to Google’s API for verification. The API returns a score that determines if the user is human or an automated program.

reCAPTCHA currently has two working versions: v2 and v3. Although v3 is the most recent version of reCAPTCHA (released in 2018), most websites still use reCAPTCHA v2, which was released in 2014.

reCAPTCHA v2 has two variants: checkbox and invisible. The checkbox variant, which is also known as “I’m not a robot”, is the most popular. one option for this variant displays a checkbox widget that users can interact with to verify their identity.

The invisible variant displays a reCAPTCHA badge, indicating that the service is running in the background.

In some cases where a user’s behavior triggers suspicion, reCAPTCHA v2 will serve up a challenge that the user must pass to prove they’re not a bot.

Implementing reCAPTCHA in React

Now that we understand what reCAPTCHA is, let’s see how we can implement it in a React app. But first, we need to sign our app up for an API key in the Google reCAPTCHA console. The key pair consists of two keys: site key and secret key.

The site key invokes the reCAPTCHA service in our app. The secret key verifies the user’s response. It does this by authorizing the communication between our app’s backend and the reCAPTCHA server.

Go ahead and create your key pair here.

First, you’ll need to sign in with your Google account. Then, you’ll be redirected to the admin console. Next, you’ll fill out the registration form on the page to generate your site’s key pair.

Google Recaptcha

The registration is fairly straightforward, but for clarity, I’ll explain what each form field means and how to fill each field.

Key pair registration

Label

For the label field, provide a name to help you recognize the purpose of the key pair that you’re creating. If you have more than one key pair set up on your account, the labels will help you distinguish between them.

Over 200k developers use LogRocket to create better digital experiences

Learn more →

The type selector refers to the version of reCAPTCHA that you want to use on your site. You can choose either v3 or v2. Since this tutorial will only cover v2 implementation, go ahead and choose v2 and the “I am not a robot” variant.

Domains

The domains field is where you’ll set the domain names that will work with your reCAPTCHA. You can input a valid domain name or “localhost” if your project is still in development, and click + to add the domain.

Owner

The owner field is where you can provision access to your app’s reCAPTCHA to others. By default, you’ll be the owner, but you can add more individuals by providing their Google emails.

Once you’ve completed the form fields, check the necessary boxes and click Submit.

Now you should be able to see your site key and secret key. They will look similar to the ones shown here:

Recaptcha Keys

Next, we‘ll set up a React sample project and implement reCAPTCHA using the key pairs we just created.

Setting up a sample React project

To verify a user’s input with reCAPTCHA we require a server that’ll communicate with Google’s API. So we‘ll need to keep that in mind when setting up the project.

First, create a folder. For this sample project, I will name the folder react-node-app , but you can use a different name of your choosing.

More great articles from LogRocket:

  • Don’t miss a moment with The Replay, a curated newsletter from LogRocket how LogRocket’s Galileo cuts through the noise to proactively resolve issues in your app
  • Use React’s useEffect to optimize your application’s performance
  • Switch between multiple versions of Node your React app with AnimXYZ , a new framework for building binaries
  • Compare NestJS vs. Express.js

Next, open the folder in your preferred IDE and run the following command:

This will create a package.json file that will help us manage our dependencies and keep track of our scripts.

Go ahead and bootstrap a React app with create-react-app by typing the following command in your terminal:

This command will create a my-app folder inside the react-node-app folder and will install React inside the my-app folder.

After installation, open the my-app folder and clean up the unnecessary boilerplate codes and files in the project folder, then create a Form.js component within the src folder.

Next, add the following code into the form component and import it inside the App.js main component.

The above code is a simple login form with an input element and a Submit button.

Styling the form component isn’t necessary, but if you’d like to add a little flair, add the following CSS code inside the App.css file in the project folder.

Now, start the development server with the command npm start in the terminal.

You should see a form similar to this displayed on your browser:

Name Form

N.B., It is recommended to use a framework that has support for SSR (server-side-rendering), like Next.js or Remix, when creating something similar for production.

Installing react-google-recaptcha

The react-google-recaptcha library enables the integration of Google reCAPTCHA v2 in React. The package provides a component that simplifies the process of handling and rendering reCAPTCHA in React with the help of useful props.

To install react-google-recaptch a, type and run the following command:

Adding reCAPTCHA

After installing react-google-recaptcha , head over to the form.js component file and import it, like so:

Now add the reCAPTCHA component to the form, just before or after the Submit button. Your placement of the component is optional, the reCAPTCHA widget will appear wherever the reCAPTCHA component is placed in the form when rendered.

As mentioned previously, the reCAPTCHA component accepts several props. However, the sitekey prop is the only prop we need to render the component. This prop facilitates the connection between the site key we generated earlier from the reCAPTCHA key pair and the reCAPTCHA component.

Here are other optional props of the reCAPTCHA component:

  • theme : changes the widget’s theme to light or dark
  • size : changes the size or type of CAPTCHA
  • onErrored : fires a callback function if the test returns an error
  • badge : changes the position of the reCAPTCHA badge ( bottomright , bottomleft , or inline )
  • ref : used to access the component instance API

Here we add a sitekey prop to the reCAPTCHA component and pass it an environment variable with the reCAPTCHA site key.

To do the same in your project, create a .env file in the root folder of your project. Next, add the following code to the file:

This way, you can use your secret keys safely in your app by referencing the variable names where they’re needed.

Now, if save your code and go to the browser, a reCAPTCHA box should appear where the reCAPTCHA component is placed in your code. In this example, it appears before the submit button.

Name Captcha Form

After each verification, we need to reset the reCAPTCHA for subsequent checks. To accomplish this, we need to add a ref prop to the reCAPTCHA component.

To use the ref prop, first, import the useRef hook from React:

Next, store the ref value in a variable, like so:

Then, add the ref prop to the reCAPTCHA component and pass it the captchaRef variable:

Here’s the entire code in our Form component up to this point:

Now that we have a working widget, we just need to complete three steps to get reCAPTCHA functioning:

  1. Get the response token from the reCAPTCHA component
  2. Reset the reCAPTCHA component for subsequent checks
  3. Verify the response token in the backend

Getting the response token

We can also use the ref prop to get the generated token from our reCAPTCHA. All we have to do is get the value of the ref with the following code:

Resetting reCAPTCHA for subsequent checks

If we add the above code to the form component, it will actually cause an error. This is because the value of the ref is still null, since the reCAPTCHA is in an unchecked state. To solve this issue, we we’ll add an onSubmit event handler to the form with a function that encapsulates the code:

In the above code, we created a handleSubmit function. Inside this function, we added the token variable for getting the response token from reCAPTCHA, as well as a code that resets the reCAPTCHA each time the form is submitted.

This way, the getValue() method will only attempt to get the ref’s value, which is the response token, when the submit button is clicked.

Now if you log the token variable to the console, check the reCAPTCHA box, and submit the form, you should see a generated response token similar to the one below in your console:

Verifying the token in the Node.js backend

The token we generated in the previous section is only valid for two minutes, which means we need to verify it before it expires. To do so, we’ll need to set up our app’s backend and send the token to Google’s API to check the user’s score.

Setting up the Node.js backend

To set up a Node.js server, navigate back to the react-node-app folder, create a new folder, and name it server . Inside the server folder, create a new file and name it index.js . This file will serve as the entry point for our Node app.

Next, cd into the server folder and run the following command to install Express.js and Axios:

Now, add the following code inside the index.js file:

In the above code, we set up an Express server and created a POST API endpoint for the /post route. Inside the endpoint function, we destructured the request body to get the token data that will be sent from the client side.

Then we created an axios.post request to Google’s API with our SECRET_KEY passed in as an environment variable, as well as the token from the client side.

To set up an environment variable in Node.js, cd back to the react-node-app folder and run the following command:

After installation, create a .env file within the react-node-app folder, open the file, then add your site’s secret key.

Beneath the axios.post request is an if statement that checks the status of the response returned by the API and sends it to the client side.

Ok, let’s move on. Navigate back to the react-node-app folder, open the package.json file, and replace the script command with the following:

The above code will let us start our server using the npm start command when we run it in the terminal.

Save the project. Then, go to your terminal, open a new terminal tab, cd into the server folder, and start the server by running npm start .

Checking the user’s score

Next, we’ll send an axios.post request from the client side (React app) to our server, with the generated token as the data.

To do this, navigate back to your React app and paste the following code inside the handleSubmit function we created earlier:

This code is an axios.post request that sends the generated token from reCAPTCHA to the Node.js backend.

If you save your code and run the app, you should see a reCAPTCHA form similar to this:

Using the reaptcha wrapper

react.captcha (Reaptcha) is an alternative solution for implementing reCAPTCHA in React. The library shares similar features with react-google-recaptcha, but unlike the former, Reaptcha handles reCAPTCHA’s callbacks inside React components and automatically injects the reCAPTCHA script into the head DOM element.

This way, your applications would not have to depend on the library and directly communicate with the reCAPTCHA API when deployed.

To install Reaptcha, run the following command within your terminal:

After installation, go to the form.js file and import the Reaptcha component like so:

The Reaptcha component provides several props that can be used to customize the rendering. Here is a list of the available props:

  • sitekey : This prop accepts the client key (site key we generated in the previous sections)
  • theme : an optional prop for changing the widget’s appearance (light or dark)
  • onLoad : an optional callback function that gets called when the Google reCAPTCHA script has been loaded
  • onVerify : an optional callback function that gets called when a user completes the captcha
  • onExpire : an optional callback function that gets called when the challenge is expired and has to be redone
  • explicit : an optional prop that allows the widget to be rendered explicitly, i.e., invisible
  • size : an optional prop that allows you to change the size of the widget to either of these: compact, normal, invisible
  • ref : prop used for accessing the component’s instance methods

Although most of these props look similar to the ones exposed by the react-google-recaptcha’s component, not all of them work as you’d expect. The ref prop for one doesn’t have a method like getValue() for getting the response token. Instead, it uses a getResponse() instance method that returns the token with a promise.

Therefore, adding the component to the form component and retrieving the response token will be as follows:

Here, we created a verify function. Inside it, we’re fetching the response token from the ref variable using the getResponse() instance method. Since the method returns a promise, we chained a then method to it and pass the response to the captchaToken state variable.

We also pass the verify function to the onVerify prop on the component so that the function will only attempt to fetch the responses token when a user completes the captcha.

The component’s instance methods are utility functions that can be called to perform certain actions. Just as we used the getResponse method to grab the response token earlier, we can use other methods to perform different actions, like resetting the widget after every form submission. Here is a list of available instance methods:

  • reset
  • renderExplicitly
  • execute
  • getResponse

Visit the documentation to learn more about these methods and the Reapatcha library.

That’s it! You’ve successfully implemented a working Google reCAPTCHA and a backend server that verifies users’ responses in React.

Conclusion

In this article, we examined what reCAPTCHA is and how it works. We also walked through a tutorial to demonstrate how to implement reCAPTCHA in a React application and how to verify a user’s response token with a Node.js backend server.

I hope this article will help you build secure and bot-free React applications.

Cut through the noise of traditional React error reporting with LogRocket

LogRocket is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications. LogRocket Dashboard Free Trial Banner LogRocket automatically aggregates client side errors, React error boundaries, Redux state, slow component load times, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to notify you of the most impactful problems affecting the most users and provides the context you need to fix it.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *