如何通过JavaScript API重发Firebase短信验证码？

当然有办法实现！其实Firebase JavaScript SDK并没有专门的“重发验证码”API，但你可以通过复用（或重新创建）电话认证的核心流程来实现重发，这是官方支持的方式，可能你之前没留意到这个细节。

核心思路 #

当用户未收到验证码时，再次调用signInWithPhoneNumber()方法即可触发重发。Firebase会自动处理频率限制和验证码的有效性（旧验证码在有效期内可能仍能使用，但新发送的验证码会关联最新的验证会话）。

完整代码示例 #

1. 初始化基础流程（含第一次发送验证码）

// 页面加载时初始化reCAPTCHA验证器（建议复用实例）
const appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'invisible', // 或 'normal'，根据你的UI需求选择
  'callback': (response) => {
    // reCAPTCHA验证成功后的回调（可选）
  }
});
// 把验证器存在全局，方便后续重发时复用
window.appVerifier = appVerifier;

// 第一次发送验证码的函数
function sendVerificationCode(phoneNumber) {
  firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then((confirmationResult) => {
      // 保存验证结果对象，后续输入验证码验证时需要用到
      window.confirmationResult = confirmationResult;
      alert('验证码已发送，请查收短信');
    })
    .catch((error) => {
      console.error('发送验证码失败:', error.message);
      // 如果reCAPTCHA验证过期，重置验证器
      appVerifier.reset();
    });
}

2. 重发短信验证码的函数

function resendVerificationCode(phoneNumber) {
  // 复用之前创建的reCAPTCHA验证器
  const appVerifier = window.appVerifier;

  firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then((newConfirmationResult) => {
      // 更新全局的验证结果对象，确保后续用最新的会话验证
      window.confirmationResult = newConfirmationResult;
      alert('验证码已重新发送，请查收短信');
    })
    .catch((error) => {
      console.error('重发验证码失败:', error.message);
      // 重置reCAPTCHA，避免因验证状态过期导致的错误
      appVerifier.reset();
    });
}

关键注意事项 #

• 频率限制：Firebase对短信发送有频率限制（通常是60秒内不能重复发送），所以建议在UI上添加倒计时提示，避免用户频繁点击导致报错。
• reCAPTCHA状态：如果遇到reCAPTCHA expired类的错误，调用appVerifier.reset()重置验证器，就能重新触发reCAPTCHA验证流程。
• 会话有效性：每次重发后，记得更新保存的confirmationResult对象，因为新的验证码需要和最新的验证会话匹配才能通过验证。

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