Как проверить токен и получить оценку с помощью response-google-recaptcha-v3?

Я использую библиотеку response-google-recaptcha-v3 в чтобы интегрировать reCAPTCHA v3 в мое приложение React, которое также использует Next.

В README есть следующий пример, знакомящий пользователей с ловушкой useGoogleReCaptcha:

import {
  GoogleReCaptchaProvider,
  useGoogleReCaptcha
} from 'react-google-recaptcha-v3';

const YourReCaptchaComponent  = () => {
  const { executeRecaptcha } = useGoogleReCaptcha();
  const token = executeRecaptcha("login_page");

  return (...)
}

ReactDom.render(
  <GoogleReCaptchaProvider reCaptchaKey="[Your recaptcha key]">
    <YourReCaptchaComponent />
  </GoogleReCaptchaProvider>,
  document.getElementById('app')
);

Я не понимаю, как я должен использовать const token = executeRecaptcha("login_page"). В настоящее время я не понимаю, как разработчики должны использовать это token. Разве с этим токеном не связана оценка, по которой потенциальным ботам будет запрещено использовать страницу?

Как мне проверить этот токен и работать с ним? Любая помощь приветствуется.


reactjs next.js react-google-recaptcha recaptcha-v3
person EB2127    schedule 11.04.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Оценка связана с токеном, но она будет получена, когда вы выполняете фактический запрос внутренней проверки с самим токеном. Шаг 3 этого абзаца

В сущности:

  • Настройте внешний интерфейс reCaptcha v3, как вы это сделали, и получите токен
  • Настройте серверную службу проверки на выбранном вами языке для проверки с вашим секретным ключом.

Вот пример узла с обещаниями. Вы также можете просто использовать из выборки

    import * as request from 'request'; // from "web-request": "^1.0.7",
    
    async check(recaptchaResponse: string, remoteAddress: string): Promise<boolean> {
     const secretKey = "";
        return new Promise<boolean>((resolve, reject) => {
          const verificationUrl = 'https://www.google.com/recaptcha/api/siteverify?secret=' + secretKey + '&response=' + recaptchaResponse + '&remoteip=' + remoteAddress;
          request(verificationUrl
            , function(error, response, body) {
              if (error) {
                return reject(false);
              }
              if (response.statusCode !== 200) {
                return reject(false);
              }
    
              body = JSON.parse(body);
              const passCaptcha = !(body.success !== undefined && !body.success);
              resolve(passCaptcha);
            });
        });
      }

Вот промежуточное ПО промежуточного уровня для делегирования всего процесса

e.g.:

    app.post('/', function(req, res){
      recaptcha.verify(req, function(error, data){
        if (!req.recaptcha.error) {
          // success code
        } else {
          // error code
        }
      });
    });
  • Затем ответ будет содержать указанную оценку, и на ее основе вы можете предпринять необходимые действия, например:
    {
      "success": true,
    [...]
      "score": 0.9,
      "action": "examples/v3scores",
      "error-codes": []
    }
person Nemoverflow    schedule 11.04.2021
comment
Спасибо за этот справочный ответ. Я думаю, что я могу концептуально запутаться в отношении проверки бэкэнда и последующих действий, которые пользователи предпринимают на основе оценки. Например, какое действие я, разработчик, должен предпринять, если оценка низкая? Разве это не встроено в новую версию reCAPTCHA? - person EB2127; 12.04.2021
comment
Нет, это не встроено в него, все дело в отсутствии трений, и вы предпринимаете действия по проверке и интерпретации поставленной вам оценки. На странице есть несколько примеров того, что вы можете применять в качестве мер исправления всякий раз, когда вы получаете токены с более низкими оценками в различных разделах вашего взаимодействия: developers.google.com/recaptcha/docs/v3#interpreting_the_score Итак, вариант v3 - правильный выбор или нет - зависит от вашего конкретного варианта использования. - person Nemoverflow; 12.04.2021
comment
Спасибо, в этом есть смысл. Учитывая, что я использую пакет react-google-recaptcha-v3, мне интересно, установлено ли действие пользователем через executeRecaptcha(SOME_ACTION); - person EB2127; 13.04.2021