React recaptcha google 根本不显示

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

  （<- this one is the same - showing nothing) and

• react-google-recaptcha

  （<- this one generates an error)

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

Answer 1

我刚刚想通了 - 我失踪了

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

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

Answer 2

更换

**<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

Answer 3

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

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

切换到默认导出为我解决了这个问题，例如

import ReCAPTCHA from 'react-google-recaptcha';