如何通过JavaScript或jQuery获取FirebaseUI电话认证的用户手机号？

嘿，我来帮你搞定这个问题！当你通过FirebaseUI完成电话认证后，获取用户手机号其实非常直接，核心是通过Firebase Auth提供的用户对象来读取。下面分两种常见场景给你详细说明：

1. 在FirebaseUI认证成功的回调中直接获取 #

当用户完成电话登录流程后，FirebaseUI会触发signInSuccessWithAuthResult回调，你可以在这里直接从返回的认证结果里拿到用户信息：

// 初始化FirebaseUI实例
const ui = new firebaseui.auth.AuthUI(firebase.auth());

// 配置FirebaseUI参数
const uiConfig = {
  signInOptions: [
    firebase.auth.PhoneAuthProvider.PROVIDER_ID // 指定电话认证方式
  ],
  // 认证成功后的处理回调
  signInSuccessWithAuthResult: function(authResult, redirectUrl) {
    // 从authResult中提取当前登录用户对象
    const user = authResult.user;
    // 获取手机号
    const userPhoneNumber = user.phoneNumber;

    // 打印到控制台验证
    console.log("用户手机号：", userPhoneNumber);

    // 用jQuery将手机号渲染到页面（示例）
    if (userPhoneNumber) {
      $('#user-phone-display').text(`你的手机号：${userPhoneNumber}`);
    }

    // 如果不需要自动跳转，返回false
    return false;
  }
};

// 启动FirebaseUI认证界面
ui.start('#firebaseui-auth-container', uiConfig);

2. 监听用户登录状态，随时获取手机号 #

如果需要在页面其他地方（比如用户登录后进入主页时）获取手机号，可以通过监听Firebase Auth的状态变化来实现：

// 监听用户认证状态的变化
firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // 用户已登录，读取手机号
    const phoneNumber = user.phoneNumber;
    
    if (phoneNumber) {
      console.log("当前登录用户手机号：", phoneNumber);
      // 用jQuery填充到表单或显示元素中
      $('#user-phone-input').val(phoneNumber);
    } else {
      console.log("该用户不是通过电话认证登录的");
    }
  } else {
    // 用户未登录，做相应提示或跳转
    console.log("用户未登录，请先完成认证");
    $('#user-phone-display').text("请登录后查看手机号");
  }
});

重要注意事项 #

• 仅电话认证用户有手机号字段：user.phoneNumber只对通过电话认证登录的用户有效，如果用户用邮箱、Google等其他方式登录，这个字段会是null，记得做非空判断。
• 确保SDK正确初始化：要先引入Firebase和FirebaseUI的SDK，并且完成Firebase项目的初始化配置（比如apiKey、authDomain等）。
• 权限校验：如果需要将手机号存储到数据库，确保你的Firebase安全规则允许读取用户的个人信息。

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