Uncaught TypeError при аутентификации телефонного номера с помощью Firebase и VueJS - PullRequest
Новая
       16

Uncaught TypeError при аутентификации телефонного номера с помощью Firebase и VueJS

0 голосов
/ 02 сентября 2018

Я пытаюсь следовать документации Firebase, в которой описано, как аутентифицировать телефонный номер с помощью JavaScript (ссылка ниже).

Аутентификация с помощью Firebase по номеру телефона с использованием JavaScript

После большого копирования и вставки фрагментов в пустой компонент VueJS я успешно отправляю проверочный код на телефонные номера, хотя в консоли отображается следующая ошибка. 

backend.js:formatted:665 Uncaught TypeError: Cannot read property 'source' of null
    at n (backend.js:formatted:665)
n @ backend.js:formatted:665

Следующее изображение относится к описанной выше ошибке (похоже, это некоторый исходный код, связанный с vue-devtools).

enter image description here

Ниже мой код VueJS: 

<template>
    <div>
        <button id="sign-in-button"
            v-on:click="onSubmit">Submit</button>
    </div>
</template>

<script>
    import firebase from 'firebase';

    export default {
        data() {
            return {
                recaptchaVerifier: ""
            };
        },
        methods: {
            onSubmit() {
                console.log("Hello");
                firebase.auth()
                    .signInWithPhoneNumber("PHONE NUMBER HERE", this.recaptchaVerifier)
                .then((confirmationResult) => {
                    console.log("Success");
                    console.log(confirmationResult);
                }).catch((error) => {
                    console.error(error);
                    this.recaptchaVerifier.render()
                        .then((widgetId) => {
                            grecaptcha.reset(widgetId);
                        });
                });
            }
        },
        mounted() {
            this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
                'sign-in-button',
                {
                    'size': 'invisible',
                    'callback': (response) => {
                        // reCAPTCHA solved, allow signInWithPhoneNumber.
                        // console.log(response)
                        this.onSubmit();
                    }
                }
            );
        }
    };
</script>

Также кажется, что метод "onSubmit" всегда вызывается дважды, как показано в том, что напечатано на моей консоли; тем не менее, я всегда получаю один проверочный текст, что еще более запутанно.

enter image description here

Может кто-нибудь объяснить, почему я получаю Uncaught TypeError и почему onSubmit вызывается дважды? У меня такое ощущение, что это как-то связано с reCAPTCHA, но я не уверен, что понимаю, что там происходит.

...