Firebase 无法发送短信验证码（OTP）的常见原因与解决方案-js教程-PHP中文网

Firebase 无法发送短信验证码（OTP）的常见原因与解决方案

本文详解 Firebase Web SDK 中 signInWithPhoneNumber 报错 “Cannot read properties of undefined (reading 'verify')” 的根本原因——未正确初始化或传入 auth 实例，以及手机号格式、依赖版本和安全配置等关键修复步骤。

本文详解 firebase web sdk 中 `signinwithphonenumber` 报错 “cannot read properties of undefined (reading 'verify')” 的根本原因——未正确初始化或传入 `auth` 实例，以及手机号格式、依赖版本和安全配置等关键修复步骤。

该错误 TypeError: Cannot read properties of undefined (reading 'verify') 并非网络或服务端问题，而是典型的 客户端 SDK 调用时上下文丢失 所致。核心线索在堆栈：phone.ts:178:41 指向内部 verify() 方法调用失败，说明 signInWithPhoneNumber 尝试访问 auth 对象的 verify 属性时，该对象实际为 undefined。

✅ 根本原因与修复方案

1. auth 实例未正确传递或作用域失效

你的代码中虽调用了 getAuth(app)，但若 auth 变量在事件处理函数中不可访问（例如被重定义、作用域隔离或模块加载异常），signInWithPhoneNumber(auth, ...) 中的 auth 就会是 undefined。

✅ 正确写法（确保 auth 在闭包内可用）：

// ✅ 推荐：显式声明并确保作用域安全
const app = initializeApp(firebaseConfig);
const auth = getAuth(app); // ← 确保此行执行成功，且无报错

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('phone-verification-form');
  form.addEventListener('submit', async (e) => {
    e.preventDefault();

    const countryCode = document.getElementById('country-code').value;
    const phoneNumber = document.getElementById('phone-number').value.trim();
    const fullPhoneNumber = `${countryCode}${phoneNumber}`;

    // ? 关键防御：运行时校验
    if (!auth || typeof signInWithPhoneNumber !== 'function') {
      console.error('Firebase Auth is not initialized or signInWithPhoneNumber is unavailable.');
      alert('Firebase 认证未就绪，请刷新页面重试。');
      return;
    }

    try {
      const confirmationResult = await signInWithPhoneNumber(auth, fullPhoneNumber);
      console.log('OTP sent successfully:', confirmationResult);
      window.location.href = '../../../Frontend/Login-Module/OTP-Screen/otp.html';
    } catch (err) {
      console.error('OTP send failed:', err.code, err.message);
      alert(`发送失败：${err.message}`);
    }
  });
});

2. Firebase SDK 版本兼容性问题

你使用的是 v9.6.0（模块化语法），但 signInWithPhoneNumber 在 v9+ 中 必须配合 RecaptchaVerifier 使用（即使 UI 不显示），否则会因缺少验证器而内部调用失败（表现为 verify 未定义）。

Atoms.dev

AI创业智能体平台，通过多智能体系统实现业务自主构建与运营。

下载

⚠️ 注意：v9 模块化 SDK 已弃用无 Recaptcha 的纯手机号登录方式，这是安全强制要求。

✅ 必须添加不可见 reCAPTCHA 验证器（即使隐藏）：

<!-- 在 <body> 中添加（任意位置，但需在 JS 执行前存在） -->
<div id="recaptcha-container" style="display:none;"></div>

// 在初始化 auth 后、事件监听前添加：
import { RecaptchaVerifier } from 'https://www.gstatic.com/firebasejs/9.6.0/firebase-auth.js';

// 初始化 reCAPTCHA（不可省略）
window.recaptchaVerifier = new RecaptchaVerifier(
  'recaptcha-container', 
  {
    size: 'invisible',
    callback: () => {
      console.log('reCAPTCHA verified');
    },
  },
  auth
);

// 然后修改 signInWithPhoneNumber 调用：
await signInWithPhoneNumber(auth, fullPhoneNumber, window.recaptchaVerifier);

3. 其他关键检查项

✅ 手机号格式：必须为国际格式（如 +919876543210），不能含空格、括号或 -；
✅ Firebase 控制台配置：确认已开启「Phone Authentication」并在「Authorized domains」中添加当前域名（如 localhost 或你的生产域名）；
✅ 浏览器环境：确保非私密模式（部分浏览器限制 localStorage）、HTTPS（生产环境必需）；
✅ API 密钥权限：检查 Firebase 项目中 Firebase Authentication API 是否启用（Google Cloud Console → APIs & Services）。