如何在Firebase的onAuthStateChanged中获取Google用户的名和姓

Firebase Auth返回的Google用户对象默认只提供displayName字段，但可以通过解析用户ID令牌的Claims安全获取单独的名（given_name）和姓（family_name），无需手动分割或存储敏感凭证。

修改后的实现代码 #

const app = initializeApp(firebaseConfig)
const storage = getStorage()
const analytics = getAnalytics(app)
const auth = getAuth(app)

const checkUserIsAuth = async () => {
  setIsCheckingAuth(true)

  const unsubscribe = auth.onAuthStateChanged(async (user) => {
    if (user) {
      try {
        // 获取ID令牌结果，包含Google提供的标准Claims
        const idTokenResult = await user.getIdTokenResult()
        const { given_name, family_name } = idTokenResult.claims
        
        // 构造包含名姓的用户对象
        const userWithFullNames = {
          ...user,
          firstName: given_name,
          lastName: family_name
        }
        setloggedUser(userWithFullNames)
      } catch (error) {
        console.error('获取用户身份信息失败:', error)
        // 失败时回退到原始用户对象
        setloggedUser(user)
      } finally {
        setIsCheckingAuth(false)
      }
    } else {
      setloggedUser(null)
      setIsCheckingAuth(false)
    }
  })

  // 返回订阅清理函数，避免内存泄漏
  return unsubscribe
}

useEffect(() => {
  const unsubscribe = checkUserIsAuth()
  return () => unsubscribe()
}, [])

核心逻辑说明 #

• user.getIdTokenResult()是异步方法，会从Firebase服务器获取经过验证的ID令牌，其中包含Google OAuth提供的given_name（名）和family_name（姓）字段
• 无需存储任何敏感凭证，每次页面刷新时通过Auth状态监听自动触发获取，流程完全安全
• 加入错误处理，确保网络异常等情况不阻断Auth检查流程
• useEffect中返回unsubscribe函数，清理Auth状态监听，避免组件卸载后内存泄漏

注意事项 #

• 该方法仅适用于Google登录的用户，其他登录方式（如邮箱/密码）不会提供这些Claims字段
• 这些Claims由Google签名，Firebase会自动验证其有效性，不存在篡改风险

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