Firebase手机号认证：如何重新发送验证码？

方案1：复用reCAPTCHA验证实例 #

默认每次调用signInWithPhoneNumber都会触发新的reCAPTCHA验证，但你可以初始化一个全局的RecaptchaVerifier实例，后续重发时复用该实例，避免重复弹出验证框。

修改代码如下：

// 全局初始化RecaptchaVerifier，仅执行一次
let recaptchaVerifier: RecaptchaVerifier | null = null;

const initRecaptcha = () => {
  if (!recaptchaVerifier) {
    recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
      'size': 'invisible', // 可选隐式验证，用户无感知
      'callback': (response) => {
        // reCAPTCHA验证成功回调，可留空或按需处理
      },
      'expired-callback': () => {
        // 验证过期时重新初始化实例
        recaptchaVerifier = null;
      }
    }, auth);
  }
};

// 发送/重发验证码函数，复用全局实例
const sendVerificationCode = (completePhoneNumber: string) => {
  initRecaptcha();
  if (!recaptchaVerifier) return;

  signInWithPhoneNumber(auth, completePhoneNumber, recaptchaVerifier)
    .then((confirmationResult) => {
      // 保存confirmationResult，后续验证验证码时需使用
      window.confirmationResult = confirmationResult;
      // 处理验证码发送成功逻辑
    }).catch((error) => {
      // 处理验证码发送失败逻辑
      if (error.code === 'auth/invalid-recaptcha-token') {
        // 验证失效时重新初始化reCAPTCHA
        recaptchaVerifier = null;
        initRecaptcha();
      }
    });
};

核心说明：

• 将RecaptchaVerifier实例全局化，仅在首次调用或验证过期时重新初始化
• 启用size: 'invisible'模式后，reCAPTCHA会在后台自动完成验证，用户无需手动操作，大幅简化重发流程

方案2：依赖Firebase会话状态（有限场景） #

如果用户已完成过一次reCAPTCHA验证且会话未过期，Firebase后台可能自动跳过重复验证，但该逻辑由平台控制，无法完全依赖。结合方案1的全局实例，可最大化减少用户手动验证的次数。

注意事项 #

• reCAPTCHA token约2分钟后过期，此时仍需重新验证，但expired-callback会自动触发实例重新初始化
• 隐式reCAPTCHA需确保页面未被判定为高风险，否则仍会触发显式验证

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