如何使用 Firebase Cloud Messaging 通过网络浏览器订阅主题

IT技术 javascript firebase firebase-cloud-messaging
2021-02-06 16:21:21

我正在尝试找到一种使用 Firebase Cloud Messaging 向我的应用程序的所有用户发送通知的方法,但我有一个仅限网络的应用程序。我见过似乎适用于 Android/iOS 的解决方案,这基本上涉及让用户自动订阅名为“allDevices”的主题,然后向订阅该主题的所有用户发送通知。我似乎找不到任何关于如何让基于 Web 的用户订阅主题的文档。有谁知道这是否可能,如果可能,是否有我遗漏的文档可以涵盖这一点?

谢谢!

5个回答

Firebase Cloud Messaging SDK for JavaScript 中没有用于为客户端订阅主题的直接 API。相反,您可以通过 REST API 将令牌订阅到主题。调用此 API 需要您指定 FCM 服务器密钥,这意味着您只能在受信任的环境中执行此操作,例如您的开发机器、您控制的服务器或 Cloud Functions。这是必要的,因为拥有 FCM 服务器密钥允许代表您的应用程序向所有应用程序用户发送消息。

原来,在我的测试中,我使用的是老项目,其中客户端API密钥允许订阅主题。出于安全原因,此功能已从较新的项目中删除。

例如,在 Node.js 中,您可以调用 REST API为应用程序实例创建关系映射,如下所示:

function subscribeTokenToTopic(token, topic) {
  fetch('https://iid.googleapis.com/iid/v1/'+token+'/rel/topics/'+topic, {
    method: 'POST',
    headers: new Headers({
      'Authorization': 'key='+fcm_server_key
    })
  }).then(response => {
    if (response.status < 200 || response.status >= 400) {
      throw 'Error subscribing to topic: '+response.status + ' - ' + response.text();
    }
    console.log('Subscribed to "'+topic+'"');
  }).catch(error => {
    console.error(error);
  })
}

fcm_server_key从项目的 Firebase 控制台获取的 FCM 服务器密钥在哪里

永远不应该在客户端代码中公开服务器密钥。在我的测试中,代码也适用于客户端 API 密钥。但我听到谣言说这是无意的,所以可能是行为改变了。有趣的是:我刚刚进行了测试,我仍然可以使用我的客户端 API 密钥进行订阅,因此这种行为可能最近发生了变化,或者仅适用于较新的密钥。
2021-03-16 16:21:21
哦,对于进一步的上下文,我只是在学习 Firebase。我已经启动并成功运行了 Firebase 团队的 JS 消息传递快速启动项目,所以如果它有助于了解代码库的样子,这就是我正在使用的:github.com/firebase/quickstart-js/tree/master /消息
2021-03-27 16:21:21
谢谢,弗兰克!这看起来像我要走的小巷。为了使用 IID API,我需要对 Firebase 项目进行设置吗?我需要在某处/以某种方式预先定义一个主题吗?我尝试使用此功能,但在控制台中出现 401 错误:“订阅主题时出错:401 - [object Promise]”。作为参考,我已验证令牌是否正确(我可以向特定令牌发送有针对性的通知),并且我的 apiKey 也已正确设置。
2021-03-28 16:21:21
当设备订阅主题或您向他们发送消息(使用 API)时,主题会自动创建。
2021-03-31 16:21:21
不是GCM的链接“ iid.googleapis.com/iid/v1 ”吗?它也适用于 FCM 吗?
2021-04-12 16:21:21

任何寻找 php 解决方案的人都可以在下面找到,因为您将使用服务器的 Api 密钥,所以不要在客户端执行此操作

客户端火基js代码

// Initialize Firebase
var config = {
    apiKey: "xxxx",
    authDomain: "yyy",
    databaseURL: "zzzz",
    projectId: "aaaa",
    storageBucket: "bbbbb",
    messagingSenderId: "ccc"
  };
firebase.initializeApp(config);

const messaging = firebase.messaging();

messaging.requestPermission()
.then(function() {
  console.log('Notification permission granted.');
  return messaging.getToken();
})
.then(function(token) {

//send this token to server
  console.log(token); // Display user token
})
.catch(function(err) { // Happen if user deney permission

  console.log('Unable to get permission to notify.', err);
});

messaging.onMessage(function(payload){
    console.log('onMessage',payload);
})

由 php curl 编写的服务器端代码

$headers = array
    ('Authorization: key=' . API_ACCESS_KEY,
    'Content-Type: application/json');

$ch = curl_init();
// browser token you can get it via ajax from client side
$token = 'drVdtCt82qY:APA91bEZb99GvoS9knv-cp5ThVBiYGBjUwl_Ewj2tKaRFwp7HoG347utaNKbgLWmkxpGadABtIg-DspPUh5sC_bc2JrBKVw10Ejg72nYxZgD2wBU-adYJo0yi03lX22s5K2UEp6gwnMv';
curl_setopt($ch, CURLOPT_URL, "https://iid.googleapis.com/iid/v1/$token/rel/topics/testIshakTopic");
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_POSTFIELDS, array());
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);
echo "The Result : " . $result;

希望对 PHP 开发者有所帮助

Franks 解决方案仍然有效。但是,您需要有一台服务器来为您订阅。

function subscribeTokenToTopic(token, topic) {
  fetch('https://myserver.com/'+token+'/rel/topics/'+topic, {
    method: 'POST',
    headers: new Headers({
      'Authorization': 'Bearer '+ oauthToken
    })
  }).then(response => {
    if (response.status < 200 || response.status >= 400) {
      throw 'Error subscribing to topic: '+response.status + ' - ' + response.text();
    }
    console.log('Subscribed to "'+topic+'"');
  }).catch(error => {
    console.error(error);
  })
}

那么你的服务器有一个像这样的休息调用:

(JavaSpring)

@RequestMapping(value = "/{token}/rel/topics/{topic}", method = RequestMethod.POST)
public ResponseEntity<?> subscribeTokenToTopic(@PathVariable("token") String token, @PathVariable("topic") String topic)  throws ServletException {
  URL url = new URL("https://iid.googleapis.com/iid/v1/"+token+"/rel/topics/"+topic);
  // make https post call here.. 
  ...
}

希望这是有道理的。

这是一个很棒的解决方案..非常感谢..你救了我的一天..(甚至可能是一周,我打算使用 websocket 做一个自定义实现!)
2021-03-17 16:21:21

    import firebase from 'firebase/app';
    import 'firebase/messaging';

    const config = {
        apiKey: "xxxx",
        authDomain: "xxx",
        databaseURL: "xxx",
        projectId: "xxx",
        storageBucket: "xxxx",
        messagingSenderId: 'xxxxx',
        appId: 'xxxxx',
        measurementId: 'xxxxxx'
      };
      firebase.initializeApp(config);
        try {
              if (firebase.messaging.isSupported()) {
                const messaging = firebase.messaging();
                messaging
                  .getToken({
                    vapidKey: VAPID_KEY
                  })
                  .then((currentToken) => {
                    if (currentToken) {
                                           subscribeTokenToTopic(currentToken,FirebaseAdminTopic);
                    }
                  })
                  .catch((err) => {
                    console.log('Error to get token', err);
                  });

                messaging.onMessage((payload) => {
                  console.log(payload.notification)
                });

                // Otherwise, we need to ask the user for permission
                if (Notification.permission !== 'granted') {
                  Notification.requestPermission();
                }
              } else {
                console.log('firebase messaging not supported');
              }
            } catch (err) {
              console.log(err);
            }
            
            
            
        function subscribeTokenToTopic(token, topic) {
          fetch(`https://iid.googleapis.com/iid/v1/${token}/rel/topics/${topic}`, {
            method: 'POST',
            headers: new Headers({
              Authorization: `key=${FCM_SERVER_KEY}`
            })
          })
            .then((response) => {
              if (response.status < 200 || response.status >= 400) {
                console.log(response.status, response);
              }
              console.log(`"${topic}" is subscribed`);
            })
            .catch((error) => {
              console.error(error.result);
            });
          return true;
        }

 

使用服务器密钥而不是 config.apiKey 工作正常。