如何使用react-google-recaptcha-v3验证令牌并获取分数？

Question

我正在使用库react-google-recaptcha-v3将 reCAPTCHA v3 集成到我的 React 应用程序中，该应用程序也使用 Next。

自述文件中有以下示例向用户介绍该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。是否没有与此令牌关联的“分数”，从而禁止潜在的机器人使用该页面？

如何验证此令牌并使用它？任何帮助表示赞赏。

Answer 1

该分数与令牌相关联，但当您使用令牌本身执行实际的后端验证请求时，将会生成该分数。本段第 3 步

要点如下：

• 像您一样设置前端 reCaptcha v3 并获取令牌
• 以您选择的语言设置后端验证服务，以使用您的密钥进行验证

这是一个带有 Promise 的节点示例。您也可以简单地使用fetch

    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);
            });
        });
      }

这是一个快速中间件来委托整个过程

例如：

    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": []
    }