Реакция рекапчи гугл вообще не показывается - PullRequest
Новая
       12

Реакция рекапчи гугл вообще не показывается

0 голосов
/ 21 января 2020

Я установил 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 (<- это то же самое - ничего не показывая) и </p>

  • react-google-recaptcha (<- этот генерирует ошибку) </p>

Наш ключ правильный 100%, поскольку мы используем его для других капч (написанных в Razor) на том же сайте.

1 Ответ

0 голосов
/ 21 января 2020

Я только что понял - я пропустил 

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

на странице, добавил, и появилась капча.

...