如何使用 react-google-recaptcha 重置 Google recaptcha

Question

看起来 google recaptcha 的工作方式是，如果使用特定令牌进行了验证尝试，则无法再次使用。

文档指出“您将需要调用 grecaptcha.reset() 以要求最终用户再次使用 reCAPTCHA 进行验证”

我正在尝试使用 react-google-recaptcha npm 包尝试此操作。

这是我的代码：

function onChange(grecaptcha) {
  console.log(grecaptcha);
  grecaptcha.reset(); // this doesn't work
}

class Captcha extends React.Component {
  render() {
    return <div>
      <Recaptcha
          sitekey='#'
          onChange={onChange(this)}
      /> </div> 
  }
}

当我尝试使用带有响应和秘密值的 google api https://www.google.com/recaptcha/api/siteverify进行服务器端验证时，成功响应在第一次验证后始终评估为“false”。 为了防止这种情况，我按照文档中的建议重置了 grecaptcha，但它不起作用。

有什么我想念的吗？

提前致谢

编辑：

https://github.com/dozoisch/react-google-recaptcha提供了 reset() 实用程序功能，这是我在用户解决验证码后尝试调用的功能，想知道我是否没有正确调用它。

Answer 1

我遇到了类似的问题，不得不将其更改为：

window.grecaptcha.reset();

Answer 2

你可以试试Reaptcha 。

在处理 reCAPTCHA 时，它比react-google-recaptcha有更多的反应方式。

引用文档：

<Reaptcha
  ref={e => (this.captcha = e)}
  sitekey="YOUR_API_KEY"
  onVerify={() => {
    // Do something
  }}
/>
<button onClick={this.captcha.reset}>
  Reset
</button>

Answer 3

嗯，这只是上述所有内容的奖励或更详细的方式。 我正在使用 react-google-recaptcha 所以这是 reactJS，直到我看到这个，我才找到了解决重置问题的方法。 这是相当直接的。 正如@sarneeh、@Chris 和@AdityaSrivast 所指出的那样，我只是向大多数新手解释我认为我正在如何做

这是我的代码片段。

验证码

import React from "react";
import ReCAPTCHA from "react-google-recaptcha";


const CaptchaVerify = ({yourprops}) => {

 let captcha;

 const onChange = (value) => {
    console.log(value);      
 }

 const setCaptchaRef = (ref) => {
    if (ref) {
      return captcha = ref;
    }
 };

 const resetCaptcha = () => {
   // maybe set it till after is submitted
   captcha.reset();
 }

 return (
   <ReCAPTCHA
     ref={(r) => setCaptchaRef(r) }
     sitekey={process.env.REACT_APP_V2_CAPTCHA_SITE_KEY}
     onChange={onChange, () => resetCaptcha()}
     theme="light"
   />
  )
 };

export default CaptchaVerify;

Answer 4

首先为元素设置一个合适的范围变量，然后使用 ref 回调分配它：

let captcha;

<Recaptcha
  sitekey={sitekey}
  onChange={...}
  ref={el => { captcha = el; }}
/>

然后，您可以在需要时通过调用captcha.reset()来访问重置功能（例如，成功发送消息后的回调、注册等）。 希望有帮助。

Answer 5

google-react-recaptcha 遵循以下语法：

<ReCAPTCHA
    sitekey="Your client site key"
    onChange={onChange}
/>

您可以使用 reset() 组件实例进行重置。 要访问它，您需要一个ref 。

像这样进行：

<ReCAPTCHA
    ref={(r) => this.captcha = r}
    sitekey="Your client site key"
    onChange={onChange}
/>

现在，无论何时您想重置 recaptcha，请输入：

this.captcha.reset()

你会完成的。

理想情况下，您应该在提交表单后，在收到回复后执行此操作。

Answer 6

具有功能组件和 createRef 的解决方案：

在函数体中：

  const recaptchaRef = React.createRef();

在 JSX 中：

  <ReCAPTCHA
            ref={recaptchaRef}
            name="recaptcha"
            id="recaptcha"
            sitekey="...."
            onChange={(token)=>{console.log(token);}}
            onExpired={() => {
              recaptchaRef.current.reset(); // here
            }}
            theme="light"
          />

Answer 7

在 TypeScript 中，您可以这样做：

const recaptchaRef = useRef<ReCAPTCHA>(null);
/* make sure it is null at first */

然后：

<ReCAPTCHA
  ref={recaptchaRef}
  sitekey={'key'}
  onChange={(e) => onCaptchaVerify(`${e}`)}
/>;

然后您可以在表单提交后或在您想要重置 reCaptcha 的地方使用这样的：

  recaptchaRef.current?.reset();