Реагировать невидимым reCAPTCHA

Question

Я работаю с activ-google-recaptcha для реализации невидимой ReCaptcha, передаю ref компоненту ReCAPTCHA и выполняю this._reCaptchaRef.current.execute() внутри componentDidMount. https://stackblitz.com/edit/react-invisbile-recaptcha демонстрирует форму, которая использует reCaptcha.

обратный вызов onChange, переданный компоненту captcha, установит значение captcha в состояние. При начальном рендеринге значение капчи устанавливается в состояние, и кажется, что все работает нормально, нажмите кнопку submit , и значение состояния будет напечатано на консоли.

Через несколько секунд Если мы нажмем кнопку «Отправить» и посмотрим на консоль, значение капчи будет нулевым. Я попытался сравнить значение, переданное onChange, и если бы оно было нулевым, я бы вызвал this._reCaptchaRef.current.execute(), но проблема возникает, когда значение равно нулю, и мы вызываем функцию, но сначала для submit, значение captcha равно нулю и каждый щелчок по нему будет иметь значение в состоянии до тех пор, пока он не станет нулевым.

как мне вызвать Recaptcha для кнопки отправки и также иметь возможность передать значение капчи в функцию обратного вызова?

Answer 1

Общая идея заключается в том, что токен рекапчи действителен только в течение определенного периода времени. Это так, что токены не могут быть легко угаданы другими компьютерными системами.

Вместо того, чтобы делать капчу при монтировании, вы должны выполнить ее только onSubmit, следовательно, пользователь заполнил бы форму, если бы вообще увидел капчу.

handleSubmit(event) {
  event.preventDefault();
  this._reCaptchaRef.current.execute()
}

Это, в свою очередь, вызовет обработчик onChange (или обработчик onError), и вы сможете отправить форму оттуда.

Но если вы захотите как-нибудь, оставьте его в componentDidMount, вы можете сбросить код проверки и выполнить его снова.

redoCaptcha() {
  this._reCaptchaRef.current.reset();
  this._reCaptchaRef.current.execute();
}
render() {
 ...
 <ReCAPTCHA
   onExpired={this.redoCaptcha}
 />
}