recaptcha не работает в Vue component.give grecaptcha.render не функция, когда grecaptcha не загружен - PullRequest
Новая
       8

recaptcha не работает в Vue component.give grecaptcha.render не функция, когда grecaptcha не загружен

0 голосов
/ 03 мая 2018

как добавить метод загрузки grecaptcha в компоненте Vue. Когда не загружен, grecaptcha.render не является функцией 

const script = document.createElement("script");
 script.src = `${URL}?render=explicit&hl=TR`;
 script.async = true;
 script.defer = true;
 document.body.appendChild(script);
 this.initReCaptcha();


initReCaptcha: function () {
    setTimeout(function () {
       if (typeof grecaptcha === 'undefined') {
           this.initReCaptcha();
       } else {
          grecaptcha.render('recaptcha', {
          sitekey: 'XXXX',
          callback: this.submit,
          'expired-callback': this.expired
                        });
                    }
                }.bind(this), 100);
            }

работает, когда я устанавливаю тайм-аут 1000. но уже слишком поздно.

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

Сценарий recaptcha был обновлен в последний раз 4 мая 2018 г. 9: 07: 30.349 PM GMT (на основе отметки времени сценария recaptcha). Grecaptcha загружается, однако функция рендеринга имеет задержку, поэтому recaptcha не отображается в пользовательском интерфейсе ( grecaptcha.render не является функцией n). Возможное исправление заключается в проверке функции render перед попыткой загрузить recaptcha.

Вот исправление: 

initReCaptcha: function () {
    setTimeout(function () {
       if (typeof grecaptcha === 'undefined' && typeof grecaptcha.render ==='undefined') {
           this.initReCaptcha();
       } else {
          grecaptcha.render('recaptcha', {
          sitekey: 'XXXX',
          callback: this.submit,
          'expired-callback': this.expired
                        });
                    }
                }.bind(this), 100);
            }

Надеюсь, это поможет вам. Приветствия

0 голосов
/ 05 мая 2018

Я узнал, что с тех пор, как два дня назад многие люди получили ошибку: 

 grecaptcha.render is not a function

Ну, это работает для меня. Может, это кому-то поможет в

Я разбил его на части, чтобы вы могли легко прочитать: 

mounted(){
    if (typeof grecaptcha === "undefined") {
        var script = document.createElement("script");
        script.src = "https://www.google.com/recaptcha/api.js?render=explicit";
        script.onload = this.renderWait;
        document.head.appendChild(script);
    } else this.render();
}

Если grecaptcha не загружен, я создам скрипт и буду ждать его загрузки. Если так, то renderWait называется 

renderWait() {
        setTimeout(() => {
            if (typeof grecaptcha !== "undefined" && typeof grecaptcha.render !== "undefined")  this.render();
            else this.renderWait();
        }, 200);
},

Когда, наконец, grecaptcha отобразит его: 

render() {
        const recaptchaDiv = document.createElement('div');
        recaptchaDiv.className = 'outside-badge';
        document.body.appendChild(recaptchaDiv);

        this.widgetId = grecaptcha.render(recaptchaDiv, {
            sitekey: this.sitekey,
            size: "invisible",
            badge: this.badge || "bottomright",
            theme: this.theme || "light",
            callback: token => {
                this.callback(token);
                grecaptcha.reset(this.widgetId);
            }
        });
        this.loaded = true;
 },

Может быть, это поможет вам:)

...