如何借助Firebase JS SDK、ExpressJS+Cloud Functions获取全量用户并渲染至客户端HTML

核心前提：Firebase客户端JS SDK没有权限直接拉取全量用户列表，必须通过服务端（Express+Cloud Functions）调用Firebase Admin SDK实现，再将处理后的数据返回给客户端渲染。以下是具体实现步骤：

1. 服务端配置：用Cloud Functions+Express搭建用户列表接口 #

首先在Cloud Functions中初始化Firebase Admin SDK，编写接口获取全量用户数据（注意过滤敏感字段，避免信息泄露）：

const functions = require('firebase-functions');
const express = require('express');
const admin = require('firebase-admin');

admin.initializeApp();
const app = express();

// 带权限校验的全量用户获取接口
app.get('/api/users', async (req, res) => {
  // 验证请求者身份（必须是管理员）
  const idToken = req.headers.authorization?.split('Bearer ')[1];
  if (!idToken) {
    return res.status(401).json({ error: '未授权访问' });
  }

  try {
    const decodedToken = await admin.auth().verifyIdToken(idToken);
    // 自定义校验逻辑：比如判断用户是否拥有admin自定义权限或特定管理员邮箱
    if (!decodedToken.admin && decodedToken.email !== 'admin@yourdomain.com') {
      return res.status(403).json({ error: '无权限访问' });
    }

    // 拉取全量用户数据
    const listUsersResult = await admin.auth().listUsers();
    // 过滤敏感字段，只返回前端需要的内容
    const safeUsers = listUsersResult.users.map(user => ({
      uid: user.uid,
      email: user.email,
      displayName: user.displayName,
      createdAt: user.metadata.creationTime
    }));

    res.status(200).json(safeUsers);
  } catch (error) {
    console.error('获取用户列表失败:', error);
    res.status(500).json({ error: '获取用户数据失败' });
  }
});

// 导出Express应用为Cloud Function
exports.app = functions.https.onRequest(app);

2. 客户端调用接口并渲染HTML #

客户端通过接口拿到用户数据后，直接生成DOM元素渲染到页面：

HTML结构示例 #

<div id="user-list">
  <p>正在加载用户数据...</p>
</div>

客户端JS代码 #

// 页面加载完成后执行
window.addEventListener('DOMContentLoaded', async () => {
  const userListContainer = document.getElementById('user-list');
  
  // 先获取当前登录用户的ID Token（用于服务端权限校验）
  const user = firebase.auth().currentUser;
  if (!user) {
    userListContainer.innerHTML = '<p>请先登录管理员账号</p>';
    return;
  }

  try {
    const idToken = await user.getIdToken();
    // 调用服务端接口
    const response = await fetch('/api/users', {
      headers: {
        'Authorization': `Bearer ${idToken}`
      }
    });

    if (!response.ok) throw new Error('接口请求失败');
    const users = await response.json();

    // 清空容器并渲染用户卡片
    userListContainer.innerHTML = '';
    users.forEach(user => {
      const card = document.createElement('div');
      card.className = 'user-card';
      card.innerHTML = `
        <h3>${user.displayName || '未设置昵称'}</h3>
        <p>邮箱：${user.email || '未绑定邮箱'}</p>
        <p>用户ID：${user.uid}</p>
        <p>创建时间：${new Date(user.createdAt).toLocaleString()}</p>
      `;
      userListContainer.appendChild(card);
    });
  } catch (error) {
    console.error('加载用户数据失败:', error);
    userListContainer.innerHTML = '<p>加载用户数据失败，请稍后重试</p>';
  }
});

关键注意事项 #

• 权限校验必须做：绝对不能开放无校验的全量用户接口，避免用户数据泄露；
• 字段过滤要严格：返回给前端的用户数据只保留业务需要的字段，不要包含密码哈希、手机号等敏感信息；
• 分页处理：如果用户量超过1000，需要用listUsers的分页参数（nextPageToken）分批拉取数据，避免请求超时。

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