Firebase手机号认证报错：RecaptchaVerifier未定义（app.js:22）

嘿，我一眼就看出问题所在啦——你没加载Firebase Auth的SDK模块！

错误原因分析 #

报错Uncaught TypeError: Cannot read property 'RecaptchaVerifier' of undefined本质是firebase.auth这个对象不存在。你的HTML里只引入了核心的firebase-app.js和firebase-analytics.js，但手机号认证依赖的Firebase Auth模块完全没加载，自然找不到RecaptchaVerifier这个类。

另外你的app.js末尾多了个多余的);，这也会导致语法错误，得删掉。

具体修复步骤 #

1. 在HTML中添加Firebase Auth的SDK脚本，版本要和你用的firebase-app保持一致（这里是7.14.3）
2. 修正app.js的语法错误
3. 确保页面上存在RecaptchaVerifier绑定的DOM元素（id为getotp）

修正后的app.html代码

<!DOCTYPE html>
<html>
<head>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-app.js"></script>
    <!-- 新增：引入Firebase Auth SDK -->
    <script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-analytics.js"></script>

    <script>
        // Your web app's Firebase configuration
        var firebaseConfig = {
            apiKey: "AIzaSyDLFhLuJ_SOJDqLcJOi2-7tUhLrJ8wstZU",
            authDomain: "voting-6d410.firebaseapp.com",
            databaseURL: "https://voting-6d410.firebaseio.com",
            projectId: "voting-6d410",
            storageBucket: "voting-6d410.appspot.com",
            messagingSenderId: "769418906177",
            appId: "1:769418906177:web:852a15ba5e50033fd514c0",
            measurementId: "G-37YQP4X9WG"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        firebase.analytics();
    </script>
</head>
<body class="gray-bg">
    <!-- 必须存在这个元素，RecaptchaVerifier要绑定它 -->
    <button id="getotp">获取OTP</button>
    <div id="verify_otp_model"></div>
    <div id="errorbox"></div>
</body>
</html>

修正后的app.js代码

$('#verify_otp_model').hide()
$('#errorbox').hide()

// phone auth
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('getotp', {
    'size': 'invisible',
    'callback': function(response) {
        // reCAPTCHA solved, allow signInWithPhoneNumber.
        // onSignInSubmit();
    }
});
// [END appVerifier]
recaptchaVerifier.render().then(function(widgetId) {
    window.recaptchaWidgetId = widgetId;
    // updateSignInButtonUI();
});

额外注意点 #

• 所有Firebase SDK的版本必须保持一致，避免出现版本兼容问题
• 页面上一定要有id为getotp的DOM元素，否则RecaptchaVerifier无法完成渲染

内容的提问来源于stack exchange，提问作者anusha jadav