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

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

我正在使用库 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。是否没有与此令牌相关联的“分数”，从而禁止潜在的机器人使用该页面？

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

解决方法

分数与令牌相关联，但会在您使用令牌本身执行实际后端验证请求时生成。 Step 3 of this paragraph

要点：

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

Here's a node example with promises .你也可以简单地使用 of 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);
            });
        });
      }

Here's an express middleware to delegate the whole process

例如：

    app.post('/',function(req,res){
      recaptcha.verify(req,data){
        if (!req.recaptcha.error) {
          // success code
        } else {
          // error code
        }
      });
    });

• 然后响应将包含提到的分数，您可以根据该分数采取适当的行动，例如：

    {
      "success": true,[...]
      "score": 0.9,"action": "examples/v3scores","error-codes": []
    }