反应验证码谷歌根本不显示

Question

我已经按照以下示例安装了react-recaptcha-google并添加到我的应用程序中：https://medium.com/codeep-io/how-to-use-google-recaptcha-with-react-38a5cd535e0d

虽然什么都没有显示，没有错误，什么都没有。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { ReCaptcha } from 'react-recaptcha-google';
class MyComponent extends Component {
constructor(props, context) {
super(props, context);
componentDidMount() {
this.getProducts();
if (this.captchaDemo) { // <- this is getting skipped
console.log("started, just a second...")
this.captchaDemo.reset();
//this.captchaDemo.execute();
}
}
onLoadRecaptcha() {
if (this.captchaDemo) {
this.captchaDemo.reset();
//this.captchaDemo.execute();
}
}
verifyCallback(recaptchaToken) {
// Here you will get the final recaptchaToken!!!  
console.log(recaptchaToken, "<= your recaptcha token")
render() {
return (
<div className="row">
<ReCaptcha
ref={(el) => { this.captchaDemo = el; }}
size="normal"
render="explicit"
sitekey="our correct key"
onloadCallback={this.onLoadRecaptcha}
verifyCallback={this.verifyCallback}
/>
</div>
);
}
}
ReactDOM.render(<MyComponent />, document.getElementById('myComponent'));

componentDidMount()中的条件也被跳过了。

我已经不知道该怎么做才能让它工作了。有什么建议吗？

我也试过：

• react-recaptcha(<- 这个是一样的 - 什么也没显示(和

• react-google-recaptcha(<- 这会产生错误(

我们的密钥是 100% 正确的，因为我们将其用于同一站点上的其他验证码(用 Razor 编写(。

Answer 1

我刚刚想通了——我失踪了

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

在页面上，添加并显示验证码。

Answer 2

我在nextjs13中遇到了类似的问题。就我而言，我使用的是 recaptcha 的命名导入。

import { ReCAPTCHA } from 'react-google-recaptcha';

切换到默认导出为我修复了它，例如

import ReCAPTCHA from 'react-google-recaptcha';

Answer 3

替换**<script src="https://www.google.com/recaptcha/api.js" async defer></script>**

跟

**<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>**

• 之后，将相同的内容应用于您网站上使用"www.google.com/recaptcha/"的其他任何地方，并且不要更改任何其他内容。

来源： https://developers.google.com/recaptcha/docs/faq#id-like-to-run-automated-tests-with-recaptcha.-what-should-i-do