Подключение google recaptcha на vue и валидация ответа на сервере / хабр

Стандартная каптча битрикс

Чего только не придумывали разработчики, чтобы защитить формы. Были текстовые проверки, выбор картинок и даже проверка скрытым полем.

Одним из решений с текстовым заданием является встроенная каптча битрикса.

Встроенная каптча в 1С-Битрикс

У нее есть ряд настроек (ссылка в админ.панели /bitrix/admin/captcha.php?lang=ru), которыми можно регулировать внешний вид и сложность прохождения для ботов, а как следствие и для пользователей.

Настройки встроенной каптчи в 1С-Битрикс

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

Что делать для устранения неполадок с reCAPTCHA

Мы увидели, каковы основные причины появления ошибки reCAPTCHA в браузере

Теперь мы собираемся объяснить некоторые проблемы, которые необходимо принять во внимание, чтобы это не превратилось в проблему и чтобы иметь возможность нормально перемещаться

Держите оборудование в безопасности

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

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

Обновите систему и браузер

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

Это означает, что у нас всегда должны быть все патчи и обновления которые доступны

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

Контроль использования VPN и прокси

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

Перезагрузите IP

In Windows мы можем легко сбросить IP из командной строки. Для этого нам нужно перейти в Пуск, получить доступ к командной строке в режиме администратора и выполнить ipconfig / обновить . Это могло бы помочь исправить этот сбой, если это было причиной.

Перезагрузите роутер

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

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

Configuration

JavaScript resource (api.js) parameters

Parameter	Value	Description
onload		Optional. The name of your callback function to be executed once all the dependencies have loaded.
render	explicitonload	Optional. Whether to render the widget explicitly. Defaults to onload, which will render the widget in the first tag it finds.
hl	See language codes	Optional. Forces the widget to render in a specific language. Auto-detects the user’s language if unspecified.

g-recaptcha tag attributes and grecaptcha.render parameters

g-recaptcha tag attribute	grecaptcha.render parameter	Value	Default	Description
data-sitekey	sitekey			Your sitekey.
data-badge	badge	bottomright bottomleft inline	bottomright	Optional. Reposition the reCAPTCHA badge. ‘inline’ lets you position it with CSS.
data-size	size	invisible		Optional. Used to create an invisible widget bound to a div and programmatically executed.
data-tabindex	tabindex		Optional. The tabindex of the challenge. If other elements in your page use tabindex, it should be set to make user navigation easier.
data-callback	callback			Optional. The name of your callback function, executed when the user submits a successful response. The token is passed to your callback.
data-expired-callback	expired-callback			Optional. The name of your callback function, executed when the reCAPTCHA response expires and the user needs to re-verify.
data-error-callback	error-callback			Optional. The name of your callback function, executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry.
	isolated		false	Optional. For plugin owners to not interfere with existing reCAPTCHA installations on a page. If true, this reCAPTCHA instance will be part of a separate ID space.

Как отправить капчу на rucaptcha.com и получить решение

Всё очень просто. Вам нужно сделать лишь 3 GET или POST запроса:

1. Загрузка капчи URL для запроса:
В теле запроса необходимо передать следующие параметры:

Параметр	Значение	Описание
key		Ваш APIKEY
method	userrecaptcha	Тип капчи, указывает, что это Google reCAPTCHA
version	V3	Указание версии reCAPTCHA
googlekey		reCAPTCHA ключ, взятый со страницей с капчей
pageurl		Адрес страницы, где грузится капча. Если капча грузится в Iframe — адрес Iframe страницы
min_score		Минимальный score, необходимый для прохождения капчи от 0.1 до 0.9
action		Необязательный параметр. Action капчи, если он используется на странице с капчей
json	1	Необязательный параметр. Указание нашему серверу вернуть ответ в формате JSON. По умолчанию ответ возвращается текстом.

В ответ вы получите ID капчи:

Либо, если что-то пошло не так, API вернёт ошибку. Список и описание ошибок можно найти в документации API: .

2. Получение ответа на капчу
Подождите 5 секунд и отправьте запрос на получение токена
URL для запроса:
В теле запроса необходимо передать следующие параметры:

Параметр	Значение	Описание
key		Ваш APIKEY
action	get	Указание, что вы хотите получить результат решения капчи
id		ID капчи, полученный на прошлом шаге
json	1	Необязательный параметр. Указание нашему серверу вернуть ответ в формате JSON. По умолчанию ответ возвращается текстом.

В ответ, если капча уже решена, и запрос корректен, вы получите примерно такой ответ:

Где в поле request содержится токен, являющийся решением капчи. Его нужно использовать на странице с капчей.

Если капча ещё не решена, вы получите

В таком случае нужно подождать 3-5 секунд и повторить запрос. В настоящий момент 90% reCAPTCHA V3 на нашем сервере решаются в течение 5 секунд, максимальное время — 120 секунд. Пожалуйста, делайте как минимум трёхсекундный таймаут между запросами к res.php по одному id. Желательно — 5 секунд. Идеально — 10 секунд.

3. Уведомление о качестве токена

Это необязательный параметр. Однако мы настоятельно рекомендуем его использовать. Его использование позволит вам тратить меньше денег и получать больший процент рабочих токенов.
Мы используем уникальные для каждого заказчика AllowList и BlockList компьютеров, где решаются reCAPTCHA V3. Чтобы их заполнить, вам нужно после использования ответа прислать нам сообщение reportbad или reportgood, в зависимости от того, был ли ответ успешно принят или нет. При получении reportgood мы вносим компьютер, который дал ответ на эту капчу, в AllowList. Когда количество компьютеров онлайн в вашем AllowList достигнет 50, каждая вторая капча будет выдаваться компьютеру из этого листа. А когда накопится 500 компьютеров онлайн, то все ваши капчи будут выдаваться только компьютерам из AllowList

Если же наш ответ не сработал и вы прислали reportbad, то компьютер, выдавший этот ответ, добавляется в BlockList вашего аккаунта и не получает ваших капч продолжительное время, а вы получаете возврат средств, потраченных на непринятый ответ (обратите внимание: возвраты за reportbad не делаются, если вы не шлёте reportgood на принятые ответы)

Важно! Если вы решаете reCAPTCHA V3 на разных сайтах, то вам будет лучше создать несколько аккаунтов на rucaptcha.com, т.к. один и тот же компьютер может давать хорошие ответы reCAPTCHA V3 для одного сайта и плохие для другого

Это особенность самой reCAPTCHA V3

один и тот же компьютер может давать хорошие ответы reCAPTCHA V3 для одного сайта и плохие для другого. Это особенность самой reCAPTCHA V3.

URL для запроса:
В теле запроса необходимо передать следующие параметры:

Параметр	Значение	Описание
key		Ваш APIKEY
id		ID капчи, на которую шлётся уведомление
action	reportbad reportgood	reportgood — ответ был принят, reportbad — ответ не был принят
json	1	Необязательный параметр. Указание нашему серверу вернуть ответ в JSON формате. По умолчанию ответ возвращается текстом.

Получение ключей reCAPTCHA

Получение ключей для reCAPTCHA v2 или v3 необходимо перейти на страницу «www.google.com/recaptcha/admin».

Для доступа к консоли администратора необходимо иметь аккаунт в Gmail. Если учётной записи нет, то её нужно завести.

После этого необходимо нажать на значок «+».

В открывшейся форме нужно:

вести название ярлыка (например, Мой сайт);
выбрать нужный тип reCAPTCHA;
укажите один или несколько доменов (например, «mysite.ru»);
принять условия использования reCAPTCHA.

После заполнения всех полей нажать на кнопку «Отправить».

При успешной регистрации Google будут выданы 2 ключа:

публичный (его нужно вставить в HTML-код);
секретный (на сервере, для установления обмена данными между сайтом и сервисом reCAPTCHA, т.е. для получения ответа о результатах решения капчи пользователем);

V3 — не капча и что такое «score»

reCAPTCHA V3 не является капчей в чистом виде, а именно автоматизированным тестом тьюринга для различия компьютеров и людей. reCAPTCHA V3 — это скоринговая оценка браузера на предмет того, кто управляет браузером: человек или программа. reCAPTCHA V3 решается всегда, даже самым заспамленным браузером через публичный прокси, однако при проверке ответа сайтом, где установлена V3, сайт получит от серверов reCAPTCHA значение score от 0.1 до 0.9, где 0.1 означает «почти точно это автоматизированный браузер», а 0.9 — это «почти точно браузером управляет человек». RuCaptcha предоставляет токены, которые при проверке получают score = 0.9.

Добавление нескольких Google reCaptcha с помощью jQuery по клику мыши.

Часто требуется добавить несколько Google reCaptcha с помощью JavaScript или jQuery при каком-то событии, например, по клику мыши. Сделать это очень просто, зная основной принцип Google reCaptcha: должен быть элемент с уникальным ID и он должен быть в DOM дереве. Дальше осталось написать готовый код:

Суть кода в том, что мы по какому-то действию должны в $container вставить DIV с уникальным ID, а потом в этот DIV отрендерить нашу каптчу. Все очень просто.

Конечно же, это пример синтетический, но когда вы будете делать свой проект с Google reCaptcha, скороее всего у вас будет несколько модальных окон или форм и на каждой нужно будет показать свою каптчу.

Полный листинг файла находится в GitHub репозитории, ссылку на который вы найдете в конце этой статьи.

Внедрение google reCaptcha v3 в Битрикс

Для подключения можно взять готовые решения, которые присутствуют в маркетплейсе 1С-Битрикс. Данные модули мы используем редко, поэтому в этой статье не рассматриваем.

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

Регистрация ключей

Для использования сервиса, нужно иметь аккаунт google и добавить новый сайт в консоли администратора

Добавление сайта в панели google reCaptcha

После чего сервис предоставит два ключа: открытый и серверный.

Клиентская часть

Первоочередно размещаем код отслеживания (желательно на нескольких ключевых страницах, чтобы сервис анализировал поведение пользователя в разных сценариях):

<script src="https://www.google.com/recaptcha/api.js?render=ключ сайта"></script>

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

grecaptcha.ready(function() {
    grecaptcha.execute('ключ сайта', {action: 'send_form'})
    .then(function(token) {
        //отправка формы
    });	
});

Получив токен, отправляем его вместе с прочими полями формы.

Серверная часть

Для серверной обработки есть целая php-библиотека от google на github, которую можно подключить с помощью composer.

Для упрощенной реализации, можно воспользоваться классом, собранным из этой библиотеки (на момент релиза reCaptcha v3).

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

$reCaptcha = new ReCaptcha(секретный ключ); 
$verify = $reCaptcha->verifyResponse($_SERVER,$_REQUEST);
if($verify->success=='false' || $verify->action!=='send_form' || floatval($verify->score)<0.5){
     //выбросить исключение или показать ошибку
}

В запросе указываем:

событие (произвольное название);
ip адрес пользователя;
токен, полученный на клиентской стороне.

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

В качестве заключения

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

Проблемы со спамом на вашем сайте? Оставьте заявку на почту info@artwot.ru или позвоните нам по телефону +7 (495) 055-15-23. Менеджер проконсультирует вас и предложит варианты решения вашей проблемы.

Какие последствия блокировки доступа ботам к сайту

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

Во-первых, описанная техника заблокирует не только плохих ботов, но и хороших — таких как поисковых обходчиков от и Yandex. Это приведёт к тому, что если не будут предприняты дополнительные меры (например, разрешение доступа к сайту с IP принадлежащим Google и Yandex в обход капчи), то в конце концов сайт выпадет из индекса поисковых систем.

Во-вторых, некоторыми партнёрскими программами запрещено показывать рекламу на страницах, для которых закрыт доступ ботов (таких ботов как Mediapartners-Google и AdsBot-Google* для Google AdSense и YandexDirect для Рекламной Сети Яндекса). Если на защищаемом сайте показывается реклама, то нужно обеспечить доступ к страницам в обход капчи — поскольку эти роботы сами по себе не способны пройти тест «на человека».

При этом проверка качества ботов для доступа в обход капчи ни в коем случае не должна основываться только на User Agent клиента, поскольку его можно легко подменить.

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

блокировка к просмотру сайта
и более мягкий вариант — блокировка отправки форм

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

Отправка данных формы с помощью Ajax

Доработаем процесс отправки формы с помощью Ajax, Для этого потребуется библиотека jQuery. Загрузите ее, используя CDN. Вставьте приведенную ниже строку кода перед закрывающимся тегом body.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Теперь выполнить Ajax-запрос на отправку данных формы.

<script>
   $('#contact-form').submit(function(event) {
       event.preventDefault(); // Предотвращаем прямую отправку данных формы
       $('#alert').text('Processing...').fadeIn(0); // Выводим "Processing...", чтобы сообщить пользователю, что данные формы отправлены
       $.ajax({
           url: 'contact.php',
           type: 'post',
           data: $('#contact-form').serialize(),
           dataType: 'json',
           success: function( _response ){
               // Запрос Ajax выполнен успешно. _response - это объект JSON object
               var error = _response.error;
               var success = _response.success;
               if(error != "") {
                   // В случае ошибки выводим пользователю это сообщение
               $('#alert').html(error);
               }
               else {
                   // В случае успешного выполнения, выводим пользователю это сообщение и удаляем кнопку отправки
                   $('#alert').html(success);
                   $('#submit-button').remove();
               }
           },
           error: function(jqXhr, json, errorThrown){
               // В случае ошибки Ajax, выводим пользователю результат для демонстрационных целей
               var error = jqXhr.responseText;
               $('#alert').html(error);
           }
       });
   });
</script>

Сейчас если вы нажмете кнопку отправки формы, то получите сообщение об ошибке 404. Так как файл contact.php еще не существует.

PHP

Создайте файл contact.php. На стороне сервера необходимо проверить полученные данные и отправить ответ JSON.

<?php
 
// Валидация на стороне сервера
function isValid() {
   // Простейшая валидация для демонстрационных целей. Замените ее на валидацию на стороне сервера
   if($_POST != "" && $_POST != "" && $_POST != "") {
       return true;
   } else {
       return false;
   }
}
 
$error_output = '';
$success_output = '';
 
if(isValid()) {
   $success_output = "Your message sent successfully";
} else {
   // Валидация на стороне сервера не прошла
   $error_output = "Please fill all the required fields";
}
 
$output = array(
   'error'     =>  $error_output,
   'success'   =>  $success_output
);
 
// Вывод должен быть в формате JSON
echo json_encode($output);
 
?>

Теперь пришло время интегрировать reCAPTCHA v3.

Интеграция 1С 8 и HostCMS

Интеграции 1С с сайтами очень сложно оценивать, ибо на сайте разработчика CMS, а может, и на странице конкретного модуля, зачастую можно найти инструкцию подключения обмена, но в ходе работы постоянно появляются подводные камни: то одно не выгружается, то другое, порой, кажется, все данные передаются, но документы или элементы справочников не заполняются. А перерабатывать типовой механизм зачастую бывает себе дороже. Причем бывают и ситуации, когда нужно вносить изменения и в 1С, и на сайте. Стоимость таких работ возрастает и встает вопрос о том, нужно ли это вообще. Сейчас я расскажу о том, как мы подключали HostCMS, а в конце статьи приведу результаты обмена.

Принципы работы reCAPTCHA v3

Первоначальный этап оценки пользователя (бот или человек) осуществляется исключительно средствами JavaScript. То есть боты без поддержки JavaScript отсеиваются уже на этом этапе. Кстати, видимо, в статистику запросов эти боты также не попадают.

Во время своей работы reCAPTCHA v3 собирает данные о взаимодействии с сайтом и формирует длинную строку — токен.

Этот токен нужно передать на сервер, обслуживающий сайт, и уже сервер с применением секретного ключа должен сделать запрос к сервису reCAPTCHA v3. Ответ будет иметь вероятностный характер — будет прислано число в диапазоне от 0 (бот) до 1 (человек). Вам самим нужно решить, какой порог является проходным для данного сайта.

Исходя из этой информации сервер должен принять решение — обрабатывать ли полученный от пользователя запрос (например, показать ли ему страницу, принять ли присланные из формы данные и т.д.).

Официальная документация Google reCAPTCHA v3

Официальную информацию и инструкции вы найдёте на страницах:

https://developers.google.com/recaptcha/docs/v3
https://developers.google.com/recaptcha/docs/verify

Как это часто бывает с официальной документацией — на её основе невозможно ничего понять и невозможно что-либо настроить до рабочего состояния…

Самую важную информацию о реализации reCAPTCHA я позаимствовал из этой статьи:

Google reCAPTCHA V3 Tutorial with Example Demo in PHP

При этом та инструкция содержит критическую логическую ошибку — для принятия решения используется присланное поле success. Но дело в том, что данное поле только говорит о том, являлся ли присланный токен верным токеном для данного сайта — о том, бот это или не бот, данное поле никак не сообщает. Настоящее значение, на которое нужно ориентироваться, это score. О нём чуть позже. То есть если в своей проверке использовать success, то даже явные боты, которые, может быть, набрали 0 очков, но которые сумели просто получить токен, будут успешно проходить проверку.

Тем не менее официальная документация имеет несколько познавательных фактов о reCAPTCHA — рассмотрим их.

Во-первых, там написано, что результат проверки с сервиса reCAPTCHA возвращается в виде объекта JSON. После конвертации в массив он имеет примерно такой вид:

Array 
( 
	 => 1 
	 => 2019-05-28T15:39:16Z 
	 => suip.biz 
	 => 0.9 
	 => homepage 
)

Значение полей следующее:

{
«success»: true|false, // был ли этот запрос валидным токеном reCAPTCHA для вашего сайта
«score»: число // очки для этого запроса (0.0 — 1.0)
«action»: строка // имя действия для этого запроса (важно для верификации)
«challenge_ts»: timestamp, // временная метка вызова загрузки (ISO формат yyyy-MM-dd’T’HH:mm:ssZZ)
«hostname»: строка, // имя хоста сайта, где была выполнена reCAPTCHA
«error-codes»: // опционально (коды ошибок)
}

reCAPTCHA v3 без взаимодействия с пользователем возвращает очки для каждого запроса. Эти очки основываются на взаимодействиях с вашим сайтом и дают вам возможность принять решение на их основе.

Ограничения токена

Каждый токен ответа пользователя reCAPTCHA является действительным в течении двух минут и может быть верифицирован только один раз (для предотвращения атак повторного воспроизведения (replay attacks)). Если вам нужен новый токен, то перезапустите верификацию reCAPTCHA.

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

Размещение на вашем сайте

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

Примечание: вы можете выполнять reCAPTCHA так много раз, как вам хочется с различными действиями на той же странице.

Интерпретация очков

reCAPTCHA v3 возвращает очки (1.0 очень вероятно хорошее взаимодействие, 0.0 весьма вероятно бот). Основываясь на этих очках, вы можете предпринять различные действия в контексте вашего сайта. Каждый сайт отличается от других, но ниже несколько примеров, как сайты используют очки. Как примеры ниже, для лучшей защиты своего сайта выполняйте действия «за сценой» вместо блокировки трафика.

Случай использования	Рекомендация
homepage	Наблюдайте за полной картиной в вашей панели администратора: сколько из пришедших это пользователи, а сколько разного рода парсеры
login	При низком показатели очков, требуйте 2-факторную аутентификацию или верификацию по почте для предотвращения атака связанных с учётными данными
social	Отправляйте комментарии от пользователей с подозрением на ботов на модерацию, ограничьте для них количество безответных запросов в друзья
e-commerce	Давайте приоритет реальным покупателям и выявляйте запросы, которые могут оказаться ненастоящими

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

Что такое reCAPTCHA

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

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

Использование пользователями очень простое. Интернет-пользователь входит на страницу, и появляется поле, в котором он должен отметить, что он не бот, и тем самым подтвердить, что он человек. Это похоже на другие варианты, которые мы видим, в которых вы должны отметить серию цифр, изображений и т. Д. Однако в этом случае процесс выполняется быстрее и проще.

Однако бывают случаи, когда появляется ошибка и reCAPTCHA не работает в Chrome или любом браузере. Появится сообщение о том, что проверка не удалась. Это помешает нам открыть веб-сайт или войти в систему.

RuCaptcha полноценно решает reCAPTCHA V3

Мы решаем reCAPTCHA V3 с июня 2018 года. Некоторое время функционал обхода стоял в статусе Beta, что было вызвано некоторой ненадёжностью наших алгоритмов обхода V3 версии reCAPTCHA. В июне 2020 года мы нашли надёжный способ обхода и целый год его масштабировали. Сейчас мы можем решать до 5-7 миллионов V3 со score=0.9 в сутки (с доступной пиковой нагрузкой — 50.000 капч в минуту) и в течение пары месяцев планируем удвоить запас производительности, а в дальнейшем масштабировать по необходимости. Кстати, если у вас есть постоянно запущенные компьютеры, вы можете на них заработать, ничего для этого не делая, просто один раз установив расширение для браузера. Подробнее об этом можно почитать в нашей предыдущей статье: Пассивный заработок на reCAPTCHA V3.

Как определить, что на странице именно ReCaptcha V3

reCAPTCHA V2: На странице есть чекбокс, где ставится галочка. reCAPTCHA V2 Invisible: На странице нет чекбокса, но есть логотип reCAPTCHA в правом нижнем углу, и при отправке формы иногда просят выбрать картинки. reCAPTCHA V3: На странице нет чекбокса, но есть логотип reCAPTCHA в правом нижнем углу, при отправке формы никогда не просят выбрать картинки.

Иногда сложно отличить V2 Invisible от V3. В таких случаях просто откройте консоль браузера Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS) и на вкладке Network посмотрите, какие запросы отправляет ваш браузер к домену google.com (или recaptcha.net на некоторых сайтах).

Найдите запрос

Потом поищите запрос

Первый запрос должен находиться всегда, если его не нашли, то может быть запросы идут к домену «recaptcha.net», а не «google.com», ищите, пока не найдёте. Если не нашёлся второй запрос, к , то это reCAPTCHA V3. Если запрос к есть, то это ReCaptchaV2 Invisible.

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

Интеграция Google reCAPTCHA на стороне клиента заключается в добавлении HTML-кода в шаблон сайта. Сделать это можно разными способами, но мы рассмотрим только наиболее правильный. Его суть заключается в использовании специализированных функций WordPress. При этом весь код добавляется в файл functions.php, не затрагивая других файлов, в частности файлов движка сайта.

Всего нужно выполнить 2 действия:

Подключить скрипт reCAPTHCA api.js
Добавить HTML-код блока reCAPTCHA.

Подключение reCAPTCHA api.js

Подключение нового скрипта в WordPress сводится к трем операциям:

Регистрации скрипта при помощи функции wp_register_script().
Инициализации скрипта при помощи функции wp_enqueue_script().
Привязке функций к событию wp_enqueue_scripts при помощи функции add_action(). Для этого функции wp_register_script() и wp_enqueue_script() помещаются в еще одну функцию, которая вызывается в add_action().

Добавление HTML-кода блока Google reCAPTCHA

В данном примере мы добавим код блока Google reCAPTCHA в конец стандартной формы комментирования WordPress, непосредственно перед кнопкой отправки. Для этого используем специально предназначенный для этих целей хук comment_form. При этом блок будет отображаться только неавторизованным пользователям.

Не забываем заменить site_key на свой ключ.

HTML-форма

В качестве примера используем простую форму с полями «Полное имя», «Электронная почта» и «Сообщение».

HTML

Ниже представлен HTML-код формы. Ее CSS-код доступен в архиве с исходниками.

<form id="contact-form" method="post">
   <p class="label">Full Name *</p>
   <input type="text" name="name" placeholder="Full Name" required>
   <p class="label">Email *</p>
   <input type="email" name="email" placeholder="Email" required>
   <p class="label">Message *</p>
   <textarea name="message" rows="6" placeholder="Type your message here" required></textarea>
   <!-- Скрытый div “alert” ниже для отображения сообщения, возвращаемого с сервера после отправки данных формы-->  
   <div id="alert"></div>
   <button id="submit-button" type="submit">Send Message</button>
</form>

Using reCAPTCHA V2

How do I use reCAPTCHA?

Just click the checkbox:

If you see a green checkmark, congratulations! You’ve passed our robot test (yes, it’s that easy). You can carry on with what you were doing.

Sometimes we need some extra info from you to make sure you’re human and not a robot, so we ask you to solve a challenge:

Simply follow the on-screen instructions to solve the puzzle and then carry on with your task.

Accessibility

reCAPTCHA works with major screen readers such as ChromeVox (Chrome OS), JAWS (IE/Edge/Chrome on Windows), NVDA (IE/Edge/Chrome on Windows) and VoiceOver (Safari/Chrome on Mac OS). reCAPTCHA will alert screen readers of status changes, such as when the reCAPTCHA verification challenge is complete. The status can also be found by looking for the heading titled “recaptcha status” in the “recaptcha widget” section of the page. See for more information.

Please use the following steps to solve an audio challenge:

If you are presented with a visual challenge, locate and click on the button.
You will be presented with one of two versions of the audio challenge depending on whether you’re using a mobile device.
Press PLAY and enter the numbers you hear in the text input box located after the PLAY button or audio control. If your focus isn’t automatically set on the text input box after pressing the PLAY button, tab to proceed to it. When you’re done entering the numbers from the audio, press ENTER or click on the “Verify” button to submit your answer.
If your answer is incorrect, you will be presented with another audio challenge.
If your answer is correct, the audio challenge will close and the reCAPTCHA checkbox will become checked. ReCAPTCHA will also notify the screen reader of the successful verification.

Please note that the verification will expire after some time and you will need to start over if this occurs. You will be notified if the verification expires.

Tips

If the audio doesn’t play, try downloading the audio by locating and clicking on the link.
While in the text input box, you can press the “R” button to replay the audio from the beginning
To get a different audio challenge, locate and press the button.
The reCAPTCHA verification expires after a certain amount of time so it is best to complete the reCAPTCHA verification last on a website you are accessing.
Some screen readers may have difficulties getting into forms mode, if this happens, please use your screen reader’s functionality to force forms mode.

reCAPTCHA ARIA Status Messages

Status message	Detailed description
Recaptcha requires verification	The initial state, reCAPTCHA verification is required to proceed on this website. Click the checkbox to get a verification challenge.
Opening verification challenge	The checkbox has been clicked and a challenge is loading. You are instantly verified if the status changes to “You are verified”. Otherwise, you are required to complete a verification challenge.
Verification challenge expired, check the checkbox again for a new challenge	The verification challenge expired due to timeout or inactivity. Click the checkbox again for a new challenge.
You are verified	You have been verified. You can now proceed on the website.
Verification expired, check the checkbox again for a new challenge	The verification expired due to timeout or inactivity. Click the checkbox again for a new challenge.

Don’t worry. Some CAPTCHAs are hard. Just click the reload button next to the image to get another one.
Our unusual traffic help page describes what to do if you see this message:

«We’re sorry, but your computer or network may be sending automated queries. To protect our users, we can’t process your request right now.»