如何获得reCaptcha令牌?

问题描述 投票:0回答:2

如何获取此令牌 google reCAPTCHA 需要向 https://www.google.com/recaptcha/api/siteverify 发送请求?

文档不是很清楚:

我读到的所有内容都是使用各种 React npm 程序。我不想使用它们,真的不必为了这么简单的事情而使用它们。

也许有人可以指出我正确的方向?

const MyPage = () => {

  const [reCaptchaVerified, setReCaptchaVerified] = useState(false);

  const handleSubmit = (event) => {

    let captchaToken = '';                                          // How to get the reCaptcha Token?
    let captchaResult = GoogleReCaptcha(captchaToken);              // My Backend. Sends the token and secret key to google's API.
    
    if(captchaResult === true){
        setReCaptchaVerified(true);
    }
    else {
        setReCaptchaVerified(false);
    }
  }

  return (
    <form id="my-form" onSubmit="handleSubmit()">
        <button type="submit" disabled={!reCaptchaVerified} data-sitekey={ RECAPTCHA_SITE_KEY } data-callback='onSubmit' data-action='my-form-submit'>Submit</button>
    </form>
    <footer>
        {/* Google ReCaptcha Script  */}
        <Script src="https://www.google.com/recaptcha/api.js"></Script>
        <Script>
            {`function onSubmit(token) {
                document.getElementById("my-form").submit();
            } `}
        </Script>
    </footer>
  )
}

我一定是在谷歌脚本或提交按钮上的标签中遗漏了一些东西?或者令牌是否包含在表单的事件中?事件令牌?

我读到了有关使用 grecaptcha.getResponse() 的信息???但我没有看到任何例子。

非常感谢任何帮助!

recaptcha recaptcha-v3
2个回答
0
投票

我的 reCaptcha V2 可以正常工作:

// Get Google ReCaptcha Score
let captchaToken = grecaptcha.getResponse();

这让我得到了令牌。它确实说要在他们的网站上使用它,但它没有在示例中显示它,所以我不确定它是如何结合在一起的。

“用户完成 reCAPTCHA 挑战后的grecaptcha.getResponse(opt_widget_id)”

你也可以这样做:

让 captchaToken == req.body["g-recaptcha-response"];

对于 reCaptcha V3,我仍然不知道如何获取令牌...


0
投票

对于 reCaptcha 3 这对我有用。

在我页面的头部。

<script src="https://www.google.com/recaptcha/api.js?render=SITE_KEY"></script>

在我的文档下方。

<button onclick='someAction()'>Some Action</button>

最后。获取token的函数。

function someAction() {
    grecaptcha.ready(function() {
        grecaptcha.execute('SITE_KEY', {action: 'submit'}).then(function(token) {
            console.log(token);
        });
    });
}
© www.soinside.com 2019 - 2024. All rights reserved.