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

Question

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

自述文件中有以下示例向用户介绍 useGoogleReCaptcha Hook :

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。是否没有与此 token 关联的“分数”，潜在的机器人将被禁止使用该页面？

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

Answer 1

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

要点:

• 像您所做的那样设置前端 reCaptcha v3 并获取 token
• 以您选择的语言为 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, function(error, data){
        if (!req.recaptcha.error) {
          // success code
        } else {
          // error code
        }
      });
    });

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

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