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