如何使用 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

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

要点：

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

Here's a node example with promises . You may just aswell simply make use 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": []
    }

Answer 2

我找到了用于验证您的令牌并获得分数的节点服务器实现。

var express = require('express'),                       
bodyParser = require('body-parser'),
  app = express(),
  port = process.env.PORT || 3000;
var fetch = require('node-fetch');
var SECRET_KEY = "<Your Key>";

// enable CORS using npm package
var cors = require('cors');
app.use(cors());

// parse application/json
app.use(bodyParser.json());
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

// verify reCAPTCHA response
app.post('/verify', (req, res) => {
  var VERIFY_URL = `https://www.google.com/recaptcha/api/siteverify?secret=${SECRET_KEY}&response=${req.body['g-recaptcha-response']}`;
  return fetch(VERIFY_URL, { method: 'POST' })
    .then(res => res.json())
    .then(json => res.send(json));
});


app.listen(port, () => {
  console.log('Server started on: ' + port);
});

学分： https://github.com/cluemediator/verify-recaptcha-v3-nodejs

查看这些文章以获取更多信息 - 后端实现 - https://www.cluemediator.com/how-to-verify-google-recaptcha-v3-response

您也可以检查前端实现（有服务器调用）- 前端实现 - https://www.cluemediator.com/how-to-implement-recaptcha-v3-in-react#cabatvrr