php 如何使用Laravel和Firebase将OTP发送到移动的

e7arh2l6  于 5个月前  发布在  PHP
关注(0)|答案(2)|浏览(59)

我试图在我的laravel项目中使用Firebase signInWithPhoneNumber函数实现电话验证。起初我遇到了一些问题,但我设法把所有东西放在一起,但现在尝试调用signInWithPhoneNumber时抛出此错误:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'verify')
    at _verifyPhoneNumber (phone.ts:190:33)
    at signInWithPhoneNumber (phone.ts:190)

字符串
我实际上不擅长js,所以我不能尝试调试这个错误,我试图搜索,但不能找到答案。我发现一个类似的问题github
我的代码:

import {
        initializeApp
    } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js'

    import {
        getAuth,
        signInWithPhoneNumber,
        RecaptchaVerifier
    } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js'

    const firebaseConfig = {
        apiKey: "xxxxxxxxxx",
        authDomain: "xxxxxxxxxxxxx",
        projectId: "puxxxxxxxxxxxxx",
        storageBucket: "pxxxxxxxxxxxxxxxxxxx",
        messagingSenderId: "xxxxxxxxxxxxxx",
        appId: "1:434692xxxxxxxxxxxxxxxxxx168c8757df",
        measurementId: "G-xxxxxxxxxxxxxxxxxx"
    };
    const app = initializeApp(firebaseConfig)
    const auth = getAuth()

    window.onload = function() {
        render();
    };

    function render() {
        window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
            'size': 'normal',
            'callback': (response) => {
                // reCAPTCHA solved, allow signInWithPhoneNumber.
                // ...
                console.log(response)
            },
            'expired-callback': () => {
                // Response expired. Ask user to solve reCAPTCHA again.
                // ...
            }
        });
        window.recaptchaVerifier.render();
    }

    $('#send-code').on('click', function(e) {
        e.preventDefault()
        SendCode()
    })

    function SendCode() {
        var number = $("#phone").val();

        signInWithPhoneNumber(number, window.recaptchaVerifier).then(function(confirmationResult) {

            window.confirmationResult = confirmationResult;
            coderesult = confirmationResult;

            console.log('success')

        });

    }


有人能告诉我我做错了什么吗?

wkftcu5l

wkftcu5l1#

该错误可能源于不完整的reCAPTCHA验证或对电话号码或reCAPTCHA验证程序变量的不正确访问。请确保reCAPTCHA已完成,仔细检查变量范围和值,并验证SDK加载和DOM就绪。

nhn9ugyo

nhn9ugyo2#

在render()函数的callback和deletred-callback中,记录消息以指示reCAPTCHA完成或过期:

'callback': (response) => {
  console.log("reCAPTCHA solved:", response);
  // ...
},
'expired-callback': () => {
  console.log("reCAPTCHA expired");
  // ...
}

字符串
在浏览器控制台中观察这些日志,以确保在登录尝试之前完成reCAPTCHA。
在调用signInWithPhoneNumber之前,记录number和window.recaptchaVerifier的值:

console.log("Phone number:", number);
console.log("reCAPTCHA verifier:", window.recaptchaVerifier);


打开开发者控制台:在大多数浏览器中按F12键访问开发者控制台。检查网络选项卡:查找与加载Firebase SDK相关的错误或警告。
Move render():将render()调用放置在window.onload事件中或在DOM中呈现recaptcha-container元素之后。

相关问题