WebPush：授权头中的key与订阅该用户的sender ID不对应答案

【问题标题】：WebPush: the key in the authorization header does not correspond to the sender ID used to subscribe this userWebPush：授权头中的key与订阅该用户的sender ID不对应
【发布时间】：2021-08-11 12:05:08
【问题描述】：

我正在尝试使用 Node express 服务器在我的 React 应用程序中实现推送通知。我将 VAPID 密钥与 webPush 一起使用。不幸的是，当我尝试发送推送通知时，出现 403 错误

授权标头中的密钥与用于订阅此用户的发件人 ID 不对应。请确保您使用的是来自 Firebase 控制台的正确发件人 ID 和服务器密钥

您知道如何处理该错误，甚至知道它是什么意思吗？ 我的密钥是通过webpush.generateVAPIDKeys()生成的。

我没有使用过 Firebase 或其他任何东西，我有自己的服务器，所以我不想使用 Firebase（如果可以的话..）。

这是我的代码的一些部分：

客户

export function registerPush() {
  console.log('===registerPush===', process.env.REACT_APP_VAPID_PUBLIC_KEY)
  const convertedVapidKey = process.env.REACT_APP_VAPID_PUBLIC_KEY
    ? urlBase64ToUint8Array(process.env.REACT_APP_VAPID_PUBLIC_KEY)
    : ''
  navigator.serviceWorker.ready
    .then(function (registration) {
      return registration.pushManager
        .getSubscription()
        .then(async function (subscription) {
          if (subscription) {
            return subscription
          }
          return registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: convertedVapidKey,
          })
        })
    })
    .then(function (subscription) {
      fetch(`${process.env.REACT_APP_URL_BACK}notifications/subscribe`, {
        method: 'POST',
        body: JSON.stringify(subscription),
        headers: {
          'Content-Type': 'application/json',
        },
      })
    })
}

serviceWorker

this.addEventListener('push', function (e) {
  console.log('push', e)
  var title = e.data.text()
  e.waitUntil(this.registration.showNotification(title))
})

服务器

const webPush = require('web-push')

webPush.setVapidDetails(
  process.env.VAPID_WEB_PUSH_CONTACT,
  process.env.VAPID_PUBLIC_KEY,
  process.env.VAPID_PRIVATE_KEY
)
app.post('/notifications/subscribe', (req, res) => {
 
  const subscription = req.body
  console.log(subscription)

  const payload = JSON.stringify({
    title: 'Hello!',
    body: 'It works.',
  })

  webPush
    .sendNotification(subscription, payload)
    .then((result) => {
      console.log(result)
      res.status(200).json({ success: true })
    })
    .catch((e) => {
      res.status(500).json({ success: false })
      console.log(e)
    })
})

【问题讨论】：

标签： node.js reactjs firebase express web-push

【解决方案1】：

确保您在客户端（创建子时）和服务器上的公钥匹配。您正在使用 env 值，所以它们可能会这样做。

另外，请确保您有一个有效的 urlBase64ToUint8Array 函数，我有一个错误的实现，然后我的转换键“不对应”。

【讨论】：