如何在Firebase Auth（JS/TS）中更新用户认证手机号？

嘿，我之前也踩过这个坑！直接手动构造AuthCredential对象是没用的——因为Firebase的手机号更新需要经过验证码验证的有效凭证，而不是只填providerId和signInMethod就能搞定的。下面是正确的操作流程：

核心原理 #

updatePhoneNumber()方法要求传入的PhoneAuthCredential必须是Firebase通过短信验证码验证后生成的凭证，这个凭证包含了验证令牌等关键信息，手动构造的对象缺少这些内容，所以会失效。

具体步骤（以JavaScript为例） #

1. 向新手机号发送验证码 #

首先需要调用signInWithPhoneNumber给用户的新手机号发送验证码，同时需要配合reCAPTCHA验证（防止机器人滥用）：

const newPhoneNumber = "+1234567890"; // 用户要更新的新手机号
const recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
  "recaptcha-container", // 页面上的reCAPTCHA容器ID
  { size: "invisible" } // 可选，设置为隐藏式reCAPTCHA
);

// 发送验证码
firebase.auth().signInWithPhoneNumber(newPhoneNumber, recaptchaVerifier)
  .then((confirmationResult) => {
    // 把confirmationResult存在全局，方便后续验证验证码时使用
    window.confirmationResult = confirmationResult;
    alert("验证码已发送，请查收短信");
  })
  .catch((error) => {
    console.error("发送验证码失败：", error);
    recaptchaVerifier.reset(); // 重置reCAPTCHA，方便重试
  });

2. 验证验证码并获取有效凭证 #

用户输入收到的验证码后，调用confirmationResult.confirm()验证，验证成功后就能拿到有效的PhoneAuthCredential：

const userInputCode = "123456"; // 用户输入的6位验证码

window.confirmationResult.confirm(userInputCode)
  .then((userCredential) => {
    // 这里的userCredential.credential就是我们需要的PhoneAuthCredential
    const validPhoneCredential = userCredential.credential;
    // 调用更新手机号的方法
    updateUserPhoneNumber(validPhoneCredential);
  })
  .catch((error) => {
    console.error("验证码验证失败：", error);
    alert("验证码错误，请重新输入");
  });

3. 更新用户手机号 #

拿到有效凭证后，调用当前登录用户的updatePhoneNumber()方法完成更新：

function updateUserPhoneNumber(phoneCredential) {
  const currentUser = firebase.auth().currentUser;
  if (!currentUser) {
    alert("用户未登录，请先登录");
    return;
  }

  // 注意：如果用户登录时间过久，可能需要先重新验证身份
  currentUser.updatePhoneNumber(phoneCredential)
    .then(() => {
      alert("手机号更新成功！");
      console.log("更新后的手机号：", currentUser.phoneNumber);
    })
    .catch((error) => {
      console.error("更新手机号失败：", error);
      // 如果提示需要重新验证，这里可以调用reauthenticateWithCredential方法
      if (error.code === "auth/requires-recent-login") {
        alert("请重新登录后再尝试更新手机号");
        // 这里可以添加重新登录的逻辑
      }
    });
}

关键注意事项 #

• 身份验证要求：更新手机号属于敏感操作，Firebase要求用户必须是最近登录过的状态。如果用户登录时间太久，会抛出auth/requires-recent-login错误，此时需要先调用reauthenticateWithCredential让用户重新验证身份（比如输入密码、再次验证手机号等）。
• reCAPTCHA必须配置：发送验证码时必须配合reCAPTCHA，否则会被Firebase拦截，视为恶意请求。
• 错误处理：一定要处理各种可能的错误，比如验证码过期、手机号格式错误、用户未登录等。

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