1

我正在使用库react-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"). 我目前不明白开发人员应该如何使用 this token。是否没有与此令牌相关的“分数”，从而禁止潜在的机器人使用该页面？

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

4

1 回答 1

2

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

要点：

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

这是一个带有 promises 的节点示例。您也可以简单地使用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": []
    }
于 2021-04-11T08:21:58.707 回答