Angular与ASP.NET Core集成Firebase Cloud Messaging无法接收消息求助

一、前端无法接收消息的核心排查点 #

• 确认浏览器通知权限
  getToken执行前必须确保用户授予通知权限，否则无法生成有效Token。可补充权限请求逻辑：

  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      // 执行获取Token的逻辑
    }
  });
  

• Service Worker配置是否完整
  Angular集成FCM需在src目录下创建firebase-messaging-sw.js，基础配置如下：

  importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js');
  importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js');
  
  const firebaseConfig = {
    // 你的Firebase配置信息
  };
  
  firebase.initializeApp(firebaseConfig);
  const messaging = firebase.messaging();
  
  // 处理后台消息（应用在后台时需此逻辑触发通知）
  messaging.onBackgroundMessage((payload) => {
    const notificationTitle = payload.notification?.title || '新消息';
    const notificationOptions = {
      body: payload.notification?.body || '您有一条新通知',
      icon: '/assets/icon.png'
    };
    self.registration.showNotification(notificationTitle, notificationOptions);
  });
  

  同时在angular.json的assets数组中添加该文件，确保打包时能复制到输出目录：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/firebase-messaging-sw.js"
  ]
  

• 区分前台/后台消息处理逻辑
  前台消息由onMessage回调处理，后台消息必须通过Service Worker的onBackgroundMessage处理，否则不会触发前台回调。

二、后端ASP.NET Core订阅接口的问题修复 #

• 确认Firebase Admin SDK初始化正确
  后端需通过服务账号密钥初始化Admin SDK，在Program.cs中添加配置：

  builder.Services.AddFirebaseAdmin(options =>
  {
    options.Credential = GoogleCredential.FromFile("path/to/service-account-key.json");
  });
  

  服务账号密钥可在Firebase控制台「项目设置」→「服务账号」中下载。

• 修正接口参数绑定方式
  POST请求默认无法直接绑定简单类型参数，需修改接口定义：

  // 方式1：直接接收JSON格式的Token
  [HttpPost("RefreshFCMTokenAndSubscribe")]
  public async Task<IActionResult> RefreshFCMTokenAndSubscribe([FromBody] string fcmToken)
  {
    await FirebaseMessaging.DefaultInstance.SubscribeToTopicAsync(new[] { fcmToken }, "WeatherTopic");
    return Ok();
  }
  
  // 方式2：使用DTO接收（更规范）
  public class FcmTokenRequest
  {
    public string Token { get; set; }
  }
  
  [HttpPost("RefreshFCMTokenAndSubscribe")]
  public async Task<IActionResult> RefreshFCMTokenAndSubscribe([FromBody] FcmTokenRequest request)
  {
    await FirebaseMessaging.DefaultInstance.SubscribeToTopicAsync(new[] { request.Token }, "WeatherTopic");
    return Ok();
  }
  

  前端调用时需发送JSON格式数据：

  refreshFCMTokenAndSubscribe(currentToken: string) {
    fetch('/api/RefreshFCMTokenAndSubscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(currentToken) // 对应方式1；方式2则传{ token: currentToken }
    });
  }
  

三、前端直接调用订阅接口的401错误解决 #

调用IID API时，Authorization头需使用Firebase服务器密钥（控制台「项目设置」→「云消息传递」→「服务器密钥」），而非VAPID密钥。修正后的代码：

public subscribeToFirebaseTopics(fcmToken: string, topic: string): void {
  const serverKey = '你的Firebase服务器密钥';
  fetch(`https://iid.googleapis.com/iid/v1/${fcmToken}/rel/topics/${topic}`, {
    method: 'POST',
    headers: {
      'Authorization': `key=${serverKey}`,
      'Content-Type': 'application/json'
    }
  }).then(async response => {
    if (!response.ok) {
      const errorText = await response.text();
      throw `订阅失败: ${response.status} - ${errorText}`;
    }
    console.log(`已订阅主题: ${topic}`);
  }).catch(error => {
    console.error(error);
  });
}

四、额外验证步骤 #

• 直接在Firebase控制台向单个FCM Token发送测试消息，确认Token有效性及消息接收能力；
• 发送主题消息时，确保目标主题名称与订阅的WeatherTopic完全一致；
• 确认应用运行在HTTPS环境（本地开发可使用localhost），FCM不支持HTTP环境。

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