Firebase：如何在React.js应用中将Google Sign-In限制为仅指定邮箱可登录

Google Cloud的OAuth同意屏幕配置仅支持按域名限制登录范围，不支持单个邮箱的白名单配置，该限制必须在你自己的业务代码中实现，且必须前后端双重校验避免被绕过。

1. 前端交互层校验（仅做体验优化，无安全效力） #

• 接入Google Sign-In SDK拿到登录返回的JWT凭证后，先解码凭证获取用户邮箱字段
• 直接和你指定的允许邮箱做对比，不匹配则直接抛出提示，无需向后端发起请求
• 示例代码（基于@react-oauth/google套件）：

import { GoogleLogin } from '@react-oauth/google';
import jwtDecode from 'jwt-decode';

// 替换为你要放行的指定邮箱，建议放在环境变量中
const ALLOWED_EMAIL = 'authorized-email@gmail.com';

function LoginComponent() {
  const handleLoginSuccess = async (res) => {
    const userPayload = jwtDecode(res.credential);
    // 前端前置校验
    if (userPayload.email !== ALLOWED_EMAIL) {
      alert('当前邮箱无系统访问权限');
      return;
    }
    // 校验通过后才向后端发起登录请求
    await fetch('/api/auth/google-login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ credential: res.credential })
    });
  };

  return <GoogleLogin onSuccess={handleLoginSuccess} onError={() => alert('登录流程出错')} />;
}

2. 后端业务层校验（核心安全逻辑，必须实现） #

• 后端接收前端传过来的Google JWT凭证后，先调用Google官方的校验接口确认凭证合法有效，避免伪造凭证
• 从合法凭证中提取邮箱字段，和白名单邮箱对比，不匹配直接返回403权限错误
• 额外校验凭证中的email_verified字段为true，避免未验证的伪造同邮箱账号绕过校验
• 示例代码（基于Node.js）：

const { OAuth2Client } = require('google-auth-library');
const client = new OAuth2Client(process.env.GOOGLE_CLIENT_ID);
// 白名单邮箱放在环境变量或配置中心，避免硬编码
const ALLOWED_EMAIL = process.env.ALLOWED_LOGIN_EMAIL;

async function googleLoginRouteHandler(req, res) {
  const { credential } = req.body;
  try {
    // 校验Google凭证合法性
    const ticket = await client.verifyIdToken({
      idToken: credential,
      audience: process.env.GOOGLE_CLIENT_ID
    });
    const userInfo = ticket.getPayload();
    // 先校验邮箱已被Google验证
    if (!userInfo.email_verified) {
      return res.status(403).json({ msg: '邮箱未验证，无法登录' });
    }
    // 核心白名单校验
    if (userInfo.email !== ALLOWED_EMAIL) {
      return res.status(403).json({ msg: '当前邮箱无访问权限' });
    }
    // 校验通过，执行你的登录/注册逻辑，返回业务凭证
    const user = await User.findOrCreate({ email: userInfo.email });
    return res.json({ token: generateUserToken(user), userInfo });
  } catch (e) {
    return res.status(400).json({ msg: '凭证无效' });
  }
}

注意事项 #

• 所有权限判断逻辑必须放在后端实现，前端校验仅用于减少无效请求、优化用户体验，无安全防护作用
• 白名单邮箱建议放在环境变量或配置平台管理，后续修改无需迭代代码

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