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

Question

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

1

как добавить метод загрузки 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. но это слишком поздно.

Ahmet 03 май 2018, в 17:48

Источник

Теги:

javascript

vue.js

recaptcha

2 ответа

0

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

 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;
 },

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

Shadrix 05 май 2018, в 15:19

Ещё вопросы

kryptonrock · Accepted Answer · 2018-05-07T23-12-00.000Z

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

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

Необходимо ||, потому что grecaptcha может быть определен, но grecaptcha.render не
вызывая this.initReCaptcha (); grecaptcha.render не является функцией console.log. Исправлена ошибка, но ReCaptcha не загружен. К вашему сведению, нет никаких ошибок в console.log, но ReCaptcha.render === 'undefined' вошел в условие if при первой загрузке, если я обновить все работает нормально капча загружается и в консоли нет ошибок.