我收到 Web 推送错误代码状态 403，这让我抓狂，因为它告诉我使用 firebase。这是怎么回事？

Question

对于我正在构建的 PWA，我不断从 Chrome 收到 WebPush 错误（状态代码 403），主体说我需要使用 'firebase console' 中的 VAPID 服务器密钥，但是我使用节点 Web-Push 库来生成 VAPID 密钥，这是怎么回事？我是否必须使用 firebase 在 Chrome 中构建 PWA？

这是我在发送推送通知时从浏览器收到的错误消息：

  name: 'WebPushError',
  message: 'Received unexpected response code',
  statusCode: 403,
  headers:
   { 'content-type': 'text/plain; charset=utf-8',
     'x-content-type-options': 'nosniff',
     'x-frame-options': 'SAMEORIGIN',
     'x-xss-protection': '0',
     date: 'Thu, 31 Oct 2019 19:59:02 GMT',
     'content-length': '194',
     'alt-svc':
      'quic=":443"; ma=2592000; v="46,43",h3-Q049=":443"; ma=2592000,h3-Q048=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000',
     connection: 'close' },
  body:
   'the key in the authorization header does not correspond to the sender ID used to subscribe this user. Please ensure
you are using the correct sender ID and server Key from the Firebase console.\n',
  endpoint:
   'https://fcm.googleapis.com/fcm/send/exXmW3OFOTY:APA91bEKW_vxnvOZohog34pprDH6XvBsxtfnUpBdYY7z_7q4GZGa4wrmtBBg4kTRwLtgy3lNpCs8SMlvOr4nY-Fu_4zUus6zEJh69581Ier14QZxkEEVXyZHKRaZcmHa3zmbZRB4VD7Z

这是运行我的节点服务器的代码：

//Handle imports
const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser')
const webPush = require('web-push')
const vapidKeys = require('./vapid.json')
const path = require('path')

//Setup application
const app = express()
app.use(cors())
app.use(bodyParser.json())
app.use('/static', express.static(path.join(__dirname,'frontend')))
const port = 8080

//Set up webpush
webPush.setVapidDetails(
    'mailto: <email>',
    vapidKeys.publicKey,
    vapidKeys.privateKey
)

const pushOptions = {
    proxy: '<proxy>'
}
//setup Push Notification
const sendNotification = (subscription, dataToSend='') => {
    webPush.sendNotification(subscription, dataToSend, pushOptions).catch(error => { console.log('Damn it: ', error.message, '||', error)
    })
}

//Server Routes Defined
app.get('/', (req, res) => res.sendFile('index.html', { root: './' }))

//Setup Database Methods
const dummyDb = {subscription: null}
const saveToDatabase = async subscription => {
    dummyDb.subscription = subscription
}

//Other Server Routes
app.post('/save-subscription', async (req, res) => {
    const subscription = req.body
    await saveToDatabase(subscription)
    console.log('subscribed!')
    res.json({message: 'success'})
})

app.get('/send-notification', (req, res) => {
    const subscription = dummyDb.subscription
    const message = 'hello world'
    sendNotification(subscription, message)
    res.json({message: dummyDb.subscription})
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Answer 1

我有 node.js express、postgres、angular 8 个应用程序。我遇到了同样的问题，我通过添加 "gcm_sender_id": 在 manifest.webmanifest 文件（或 manifest.json 我还使用了 firebase 生成的 public 和私钥。

您的 gcm_sender_id 是您在 google 云中的项目 ID 或 firebase 发件人 ID

Answer 2

同样的情况，差点失去理智。我尝试使用 Firebase senderId 插入 gcm_sender_id 并最终成功。我没有 Firebase 帐户，但我能够在几秒钟内创建一个项目，并且我的 senderId 已准备好在消息设置中使用。

但需要注意的是：在我对根文件夹中的 manifest.json（在我的例子中）进行修改后，需要卸载当前的 service worker 并重新启动我的 React 项目。然后我通过询问权限并订阅用户并最终触发推送通知再次执行所有步骤。

在我对解决方案的热研究中，我发现 gcm_sender_id 也用于发送和验证来自其他浏览器的推送消息。根据Google Web Updates:

For Chrome prior to version 52, Opera Android and the Samsung Browser, you're also still required to include a 'gcm_sender_id' in your web app's manifest.json. The API key and sender ID are used to check whether the server making the requests is actually allowed to send messages to the receiving user.

我收到 Web 推送错误代码状态 403，这让我抓狂，因为它告诉我使用 firebase。这是怎么回事？

I'm getting a Web Push Error Code Status 403, which is driving me nuts, because its telling me to use firebase. What's going on?

web-push

progressive-web-apps