Firebase createUserWithEmailAndPassword集成App Check的无效令牌问题

核心问题分析 #

启用App Check的「Enforce Authenticated」选项后，createUserWithEmailAndPassword这类未认证的注册请求会被拦截——因为该选项要求所有请求必须来自已认证用户，但注册时用户尚未完成认证，导致App Check令牌无法关联到有效用户，最终返回401错误。

分步解决方案 #

第一步：调整Firebase控制台的App Check规则 #

1. 进入Firebase控制台，打开「App Check」模块
2. 找到「Firebase Authentication」服务的规则设置
3. 修改规则适配注册场景：
   • 若允许所有未认证的注册请求，直接将规则改为「Allow unauthenticated requests」
   • 若需更精细控制，使用自定义规则：

     allow create: if true; // 允许注册请求使用未认证的App Check令牌
     allow update, delete: if request.auth != null; // 其他Auth操作强制要求已认证用户
     

第二步：客户端正确初始化App Check并调用Auth接口 #

确保App Check在Auth操作前完成初始化，Firebase SDK会自动将App Check令牌附加到Auth请求中，无需手动处理请求头。

修改后的完整代码示例：

// 1. 初始化Firebase App
import { initializeApp } from "firebase/app";
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const firebaseConfig = { /* 你的Firebase配置信息 */ };
const app = initializeApp(firebaseConfig);

// 2. 初始化App Check（必须在Auth操作前执行）
initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('你的ReCaptcha V3站点密钥'),
  isTokenAutoRefreshEnabled: true // 自动刷新令牌，避免过期
});

const auth = getAuth(app);

// 3. 修改注册函数
async createUserWithEmailPassword(params) {
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, params.email, params.password);
    const user = userCredential.user;
    const idToken = await user.getIdToken();
    
    // 将Auth ID令牌附加到用户对象（原需求保留）
    user.idToken = idToken;
    
    return { status: 200, user };
  } catch (error) {
    store.dispatch({
      type: "SET_ERROR",
      items: { hasError: true }
    });
    return { status: 500, ...error };
  }
}

排查验证步骤 #

如果仍出现错误，可按以下方式排查：

• 确认ReCaptcha密钥已在Firebase控制台正确配置，且与前端使用的密钥一致
• 手动获取App Check令牌并验证有效性：

  import { getToken } from "firebase/app-check";
  
  // 强制刷新并获取令牌
  const appCheckToken = await getToken(appCheck, true);
  console.log("App Check令牌:", appCheckToken.token);
  

  将令牌复制到Firebase控制台的App Check验证工具中，确认令牌有效

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