NextJS集成Firebase AppCheck：部分请求无验证Token问题排查

问题现状 #

测试Firebase AppCheck时，未启用强制验证，但仅约15%的请求通过验证，该比例始终维持在15%左右，不符合预期（原本以为浏览器缓存、JS SDK版本更新会提升通过率）。

排查现象 #

• 部分POST请求的表单数据中包含x-firebase-appcheck请求头
• 所有GET请求及部分POST请求完全没有该请求头

AppCheck初始化代码（_app.tsx） #

useEffect(() => {
  const token = process.env.NEXT_PUBLIC_RECAPTCHA as string;
  initializeAppCheck(firebaseApp, {
    provider: new ReCaptchaV3Provider(token),
    isTokenAutoRefreshEnabled: true,
  });
}, []);

相关业务代码 #

创建数据方法 #

const db = getFirestore(firebaseApp);

export default async function createData(colllectionName: string, data: PasteModel) {
  let result = null;
  let error = null;

  try {
    const response = await addDoc(collection(db, colllectionName), data);
    result = response.id;
  } catch (e) {
    error = e;
  }

  return { result, error };
}

读取数据方法 #

const db = getFirestore(firebaseApp);
export async function readDataWithId(collection: string, id: string) {
  let docRef = doc(db, collection, id);

  let result = null;
  let error = null;

  try {
    result = await getDoc(docRef);
  } catch (e) {
    error = e;
  }

  return { result, error };
}

路由中读取数据的方式（SSG） #

export async function getStaticProps(p: any) {
  const { result } = await readDataWithId('myCollection', p.params.slug);

  if (!result?.data()) {
    return {
      redirect: {
        destination: `/404`,
        permanent: true,
      },
    };
  }

  const parse = parseToJson(result);
  return {
    props: { paste: parse },
    revalidate: 600,
  };
}

Firebase AppCheck界面截图 #

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