Recaptcha Отсутствуют обязательные параметры: sitekey - PullRequest
Новая
       11

Recaptcha Отсутствуют обязательные параметры: sitekey

0 голосов
/ 26 апреля 2018

Я интегрирую recaptcha в свое приложение реагирования, и у меня появляется эта ошибка: «Отсутствуют обязательные параметры: sitekey», когда я использую метод рендеринга grecaptch, даже если я правильно включил sitekey в параметры.

Вот мой код для справки: 

class ReCaptcha extends React.Component {

  componentDidMount() {

    this.callbackName = 'g-lf-callback';
    window[this.callbackName] = this.props.callback;

    if(window.grecaptcha) {

        this.renderRecaptcha();
    } else {

        this.loadRecaptchaScript();
    }
  }

  componentWillUnmount() {

    delete window['rconload'];
    delete window[this.callbackName];
  }

  loadRecaptchaScript() {

    window['rconload'] = () => {

        this.renderRecaptcha();
    };

    let url = 'https://www.google.com/recaptcha/api.js?onload=rconload&render=explicit';
    loadScript(url, '', 'recaptcha', true, true)
    .then( () => {})
    .catch( () => {});
  }

  renderRecaptcha = () => {

    if(this.container) {

        let parameters = {
            sitekey: process.env.MY_SITEKEY,
            size: 'invisible',
            badge: null,
            callback: 'g-lf-callback'
        };

        const recaptchaId = window.grecaptcha.render(this.container, parameters);

        this.execute = () => window.grecaptcha.execute(recaptchaId);
        this.reset = () => window.grecaptcha.reset(recaptchaId);
        this.getResponse = () => window.grecaptcha.getResponse(recaptchaId);
    }

  }

  onClick = () => {

    this.execute();
  }

  render() {

    let { callback, label, className, ...btnProps } = this.props;

    return (
        <Button
            { ...btnProps }
            className={ className }
            onClick={ this.onClick }
            ref = { ref => this.container = ref }
        >
            { label }
        </Button>
    )
  }
}

Я также установил для параметра рендеринга URL-адреса recaptcha явный 

https://www.google.com/recaptcha/api.js?onload=rconload&render=explicit

Обратный вызов Onload: 

window['rconload'] = () => {

    this.renderRecaptcha();
};
...