Как проверить работу reCAPTCHA v3 и убедиться в том что она действует?

Question

[IwanIwanow]

В инструкции от гугла, говорится:

Автоматически привязать вызов к кнопке
Самый простой способ использовать reCAPTCHA v3 на вашей странице - это включить необходимый ресурс JavaScript и добавить несколько атрибутов к вашей кнопке html.

Для начала следует добавить на сайт скрипты:

<script src="https://www.google.com/recaptcha/api.js"></script>

<script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   }
</script>

И атрибуты к кнопке формы:

<button class="g-recaptcha" 
        data-sitekey="reCAPTCHA_site_key" 
        data-callback='onSubmit' 
        data-action='submit'>Submit</button>

В первом скрипте

<script src="https://www.google.com/recaptcha/api.js"></script>

насторожило отсутствие публичного ключа в ссылке, из за чего на сайте в правом нижнем углу не появлялся логотип рекаптчи. Добавив сюда ключ /recaptcha/api.js?render=mysitekey12345 и на моем сайте появился логотип рекаптчи, после чего я решил что теперь она должна заработать, но на самом деле не понимаю, добился ли я этого.

Кнопка в моей форме реализована не через тег <button>, она через <input type="submit" id="Anketa">, но я добавил к ней атрибуты:

<input type="submit" id="Anketa" data-sitekey="mysitekey12345" data-callback='onSubmit' data-action='submit'>

, а в тег формы добавил id="demo-form".

Вопросы:

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

2) Допустим рекаптча работает, но что будет, если пользователь совершит неудачную отправку формы и рекаптча примет его за бота - предложит ли она пользователю выбрать картинки, выдаст ошибку или даже оповещения пользователя не произойдет, в то время как форма не отправится?

3) Есть разные пути интеграции рекаптчи, приведенные на разных ресурсах - чем они отличаются от решения, предложенного гуглом, к которому я прибегнул?

Answer 1

[Александр]

Рекапча третьей версии работает с использованием нейронных сетей, анализирует поведение и прочие признаки клиента на сайте и выдает результат обработки запроса в виде ответа

'success' => true,
   'challenge_ts' => '2021-05-12T10:56:23Z',
   'hostname' => 'site.ru',
   'score' => 0.90000000000000002,
   'action' => 'submit',

Где score - это оценка пользователя, отправившего запрос.
Такой ответ можно получить, если вставить на back-end вот такой код (если скрипты на PHP)

/*СОЗДАЕМ ФУНКЦИЮ КОТОРАЯ ДЕЛАЕТ ЗАПРОС НА GOOGLE СЕРВИС*/
  function getCaptcha($SecretKey) {
      $Response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".SECRET_KEY."&response={$SecretKey}");
      $Return = json_decode($Response);
      return $Return;
  }
  
  /*ПРОИЗВОДИМ ЗАПРОС НА GOOGLE СЕРВИС И ЗАПИСЫВАЕМ ОТВЕТ*/
  $Return = getCaptcha($_POST['g-recaptcha-response']);

  //var_dump($_POST['g-recaptcha-response']);

  /*ВЫВОДИМ НА ЭКРАН ПОЛУЧЕННЫЙ ОТВЕТ*/
  //var_dump($Return);
  
  /*ЕСЛИ ЗАПРОС УДАЧНО ОТПРАВЛЕН И ЗНАЧЕНИЕ score БОЛЬШЕ 0,5 ВЫПОЛНЯЕМ КОД*/
  if($Return->success == true && $Return->score > 0.5){

тут код по дальнейшим действиям с формой

}

Т.е. после того, как вы вставили JS код, при отправке с формой передаются данные от reCAPTCHA ($_POST['g-recaptcha-response'])
Этот параметр нужно передать как описано выше в коде PHP и получить ответ, на основе этого проводить дальнейшую обработку формы в обычном режиме или нет.

Comments

[IwanIwanow]

А в этой части "тут код по дальнейшим действиям с формой", должен быть else и в нем код, что бы обычная капча выводилась в случае неудачной проверки? Т.е. после else должно быть echo и вывод html кода с вызовом каптчи, а потом еще ожидание ответа и в случае положительного ответа - значения из полей отправятся в обработчик, или какой алгоритм? Может быть подскажете пример/гайд/руководство, в котором описывается примерный код, который должен находиться после else?

[Александр]

Задумка reCAPTCHA v3 в том, чтобы не показывать пользователю какую-либо капчу.
1. Скрипт формирует данные для проверки пользователя.
2. Отправляет эти данные https://www.google.com/recaptcha/api/siteverify
3. Получает оценку пользователя.

А в этой части "тут код по дальнейшим действиям с формой", должен быть else и в нем код, что бы обычная капча выводилась в случае неудачной проверки?

Нет, тут подразумевается, что проверка прошла и мы обрабатываем данные из формы.

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

[Александр]

В прикрепленных скринах данные с двух разных сайтов.
1. На первом форму в основном отправляют люди, роботов и спамеров мало.
2. На втором - в основном в формы спамят.

График с зелеными столбцами - это оценка score, которая оценивается Гуглом.