Firebase httpsCallable集成AppCheck遇401错误，如何传递令牌？

问题场景与配置 #

云函数配置 #

exports.sendLicenseAgain = onCall({
  enforceAppCheck: true,
  consumeAppCheckToken: true,
}, async (req) => {
     ...
})

Angular 17前端代码 #

import { getFunctions, httpsCallable } from 'firebase/functions';
import { AppCheck, getToken } from '@angular/fire/app-check';
....
...
getToken(this.appCheck).then((token) => {
        const funcs = getFunctions();
        const sendFunc= httpsCallable(funcs, "sendLicenseAgain", { limitedUseAppCheckTokens: true })
        sendFunc({ ... })

补充配置 #

app.config.ts：

importProvidersFrom(provideAppCheck(() => {
      const provider = new ReCaptchaV3Provider("...");
      return initializeAppCheck(undefined, { provider, isTokenAutoRefreshEnabled: true });
    })),

app.component.ts（本地环境）：

constructor(){
(<any>window).FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

调用云函数时返回401错误，提示未包含AppCheck令牌，已知需要在请求头添加X-Firebase-AppCheck字段，但不知道如何通过httpsCallable实现，询问是否遗漏步骤。

解决方案 #

你不需要手动添加X-Firebase-AppCheck请求头，httpsCallable本应自动处理令牌携带，但你的代码有几个需要调整的地方：

1. 关联AppCheck与Functions实例
   在Angular环境中，不要手动调用getFunctions()，而是直接注入已和Firebase应用关联的Functions实例，确保AppCheck能自动传递令牌：

   import { Functions, httpsCallable } from '@angular/fire/functions';
   import { AppCheck, getToken } from '@angular/fire/app-check';
   
   constructor(private functions: Functions, private appCheck: AppCheck) {}
   
   // 调用函数逻辑
   async callSendLicenseAgain() {
     const token = await getToken(this.appCheck);
     const sendFunc = httpsCallable(this.functions, "sendLicenseAgain", { limitedUseAppCheckTokens: true });
     const result = await sendFunc({ ... });
   }
   

2. 检查limitedUseAppCheckTokens参数
   若启用该参数，需确认你的AppCheck提供商支持有限使用令牌（ReCaptcha V3默认令牌为长期有效，有限使用模式需额外配置）。如果不需要该特性，可先移除参数测试：

   const sendFunc = httpsCallable(this.functions, "sendLicenseAgain");
   

3. 验证本地调试令牌权限
   本地设置FIREBASE_APPCHECK_DEBUG_TOKEN = true后，需将浏览器控制台生成的调试令牌添加到Firebase控制台的AppCheck允许列表中，否则会被拒绝访问。

4. 确保AppCheck初始化完成
   避免在AppCheck未初始化完成时调用云函数，可通过令牌变更监听确保令牌就绪：

   import { AppCheck, onTokenChanged } from '@angular/fire/app-check';
   
   constructor(private functions: Functions, private appCheck: AppCheck) {
     onTokenChanged(this.appCheck, (token) => {
       if (token) {
         this.callSendLicenseAgain();
       }
     });
   }
   
   private async callSendLicenseAgain() {
     const sendFunc = httpsCallable(this.functions, "sendLicenseAgain");
     const result = await sendFunc({ ... });
   }
   

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