Base64對Firebase雲消息傳遞的服務器密鑰進行編碼

Question

自3天以來我一直陷在這個問題中，並且搜索到Google，但沒有成功。我遵循了Push Notifications Example中的說明。但是當我嘗試實現它時，我會遇到這個令人討厭的錯誤。

Uncaught (in promise) DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. 

我想通了冒號（:)不爲Base64字符串允許的，但在雲信使標籤火力地堡中給出的服務器密鑰

AAAA-8MWvk0:APA91bHmU8XL-rzOn9SPbpG98NSqAJcuhYBBh7oze_XhprBpK7Q9PPWm3PwBo6Llxby4zjhVtgvKPIaSAQGp-8RfMV10_d1GekzICrVX9oYO8pi6dOM4VTp52CCAzug6NYIa10tNddsgE2P5QowGAYcnRHxLkrHXsw 

其中包含一個冒號（不用擔心，它只是一個測試應用程序，所以沒有隱私問題）。

當我嘗試使用舊版服務器密鑰時，它只是引發錯誤。我試圖使用Firebase中提供的其他鍵，但沒有成功。請告訴我實際使用哪個服務器密鑰以及如何使用？

我附上了我的代碼片段，它實際上執行推送訂閱。

const API_KEY = "AIzaSyByIOl-mW0pu8SEXFeutB8jq59hhiau0wI"; 
var GCM_ENDPOINT = 'https://fcm.googleapis.com/fcm/send'; 
const legacy = 'AIzaSyDGF8t125bJ4wBvYn_UdRewkTxHGr7KpH8'; 
const applicationServerPublicKey = 'AAAA-8MWvk0APA91bHmU8XL-rzOn9SPbpG98NSqAJcuhYBBh7oze_XhprBpK7Q9PPWm3PwBo6Llxby4zjhVtgvKPIaSAQGp-8RfMV10_d1GekzICrVX9oYO8pi6dOM4VTp52CCAzug6NYIa10tNddsgE2P5QowGAYcnRHxLkrHXsw'; 

function urlB64ToUint8Array(base64String) { 
const padding = '='.repeat((4 - base64String.length % 4) % 4); 
const base64 = (base64String + padding) 
.replace(/\-/g, '+') 
.replace(/_/g, '/'); 
console.log(base64); 
const rawData = window.atob(base64); 
console.log(rawData); 
const outputArray = new Uint8Array(rawData.length); 

for (let i = 0; i < rawData.length; ++i) { 
    outputArray[i] = rawData.charCodeAt(i); 
} 
return outputArray; 
} 

function endpointWorkaround(pushSubscription) { 
// Make sure we only mess with GCM 
if(pushSubscription.endpoint.indexOf('https://fcm.googleapis.com/fcm/send') !== 0) { 
    return pushSubscription.endpoint; 
} 

var mergedEndpoint = pushSubscription.endpoint; 
// Chrome 42 + 43 will not have the subscriptionId attached 
// to the endpoint. 
if (pushSubscription.subscriptionId && 
pushSubscription.endpoint.indexOf(pushSubscription.subscriptionId) === -1) { 
    // Handle version 42 where you have separate subId and Endpoint 
    mergedEndpoint = pushSubscription.endpoint + '/' + 
    pushSubscription.subscriptionId; 
} 
return mergedEndpoint; 
} 

function sendSubscriptionToServer(subscription) { 
// TODO: Send the subscription.endpoint 
// to your server and save it to send a 
// push message at a later date 
// 
// For compatibly of Chrome 43, get the endpoint via 
// endpointWorkaround(subscription) 
console.log('TODO: Implement sendSubscriptionToServer()', JSON.stringify(subscription)); 

var mergedEndpoint = endpointWorkaround(subscription); 

// This is just for demo purposes/an easy to test by 
// generating the appropriate cURL command 
var temp = showCurlCommand(mergedEndpoint); 
return temp; 
} 

// NOTE: This code is only suitable for GCM endpoints, 
// When another browser has a working version, alter 
// this to send a PUSH request directly to the endpoint 
function showCurlCommand(mergedEndpoint) { 
// The curl command to trigger a push message straight from GCM 
if (mergedEndpoint.indexOf(GCM_ENDPOINT) !== 0) { 
    console.warn('This browser isn\'t currently ' + 'supported for this demo'); 
    return; 
} 

var endpointSections = mergedEndpoint.split('/'); 
var subscriptionId = endpointSections[endpointSections.length - 1]; 

var curlCommand = 'curl --header "Authorization: key=' + API_KEY + '" --header Content-Type:"application/json" ' + GCM_ENDPOINT + ' -d "{\\"registration_ids\\":[\\"' + subscriptionId + '\\"]}"'; 

console.log(curlCommand); 
return subscriptionId; 
} 

function initialiseState() { 
// Are Notifications supported in the service worker? 
if (!('showNotification' in ServiceWorkerRegistration.prototype)) { 
    console.warn('Notifications aren\'t supported.'); 
    return; 
} 

// Check the current Notification permission. 
// If its denied, it's a permanent block until the 
// user changes the permission 
if (Notification.permission === 'denied') { 
    console.warn('The user has blocked notifications.'); 
    return; 
} 

// Check if push messaging is supported 
if (!('PushManager' in window)) { 
    console.warn('Push messaging isn\'t supported.'); 
    return; 
} 
var prom = new Promise(function(resolve, reject) { 
    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { 
    // Do we already have a push message subscription? 
serviceWorkerRegistration.pushManager.getSubscription().then(function(subscription) { 
      // Enable any UI which subscribes/unsubscribes from 
      // push messages. 
      // var pushButton = document.querySelector('.js-push-button'); 
      // pushButton.disabled = false; 

      if (!subscription) { 
       // We aren’t subscribed to push, so set UI 
       // to allow the user to enable push 
     subscribe(); 
       return; 
      } 

      // Keep your server in sync with the latest subscription 
     var temp = sendSubscriptionToServer(subscription); 
     if(temp){ 
     resolve(temp); 
     }else{ 
     reject("Oops!") 
     } 

      // Set your UI to show they have subscribed for 
      // push messages 
      // pushButton.textContent = 'Disable Push Messages'; 
      // isPushEnabled = true; 
     }) 
     .catch(function(err) { 
      console.error('Error during getSubscription()', err); 
     reject(err); 
     }); 
}); 
}); 
return prom; 
} 

function unsubscribe() { 
// var pushButton = document.querySelector('.js-push-button'); 
// pushButton.disabled = true; 

navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { 
    // To unsubscribe from push messaging, you need get the 
    // subcription object, which you can call unsubscribe() on. 
    serviceWorkerRegistration.pushManager.getSubscription().then(
    function(pushSubscription) { 
    // Check we have a subscription to unsubscribe 
    if (!pushSubscription) { 
    // No subscription object, so set the state 
    // to allow the user to subscribe to push 
    // isPushEnabled = false; 
    // pushButton.disabled = false; 
    // pushButton.textContent = 'Enable Push Messages'; 
    return; 
    } 

    // TODO: Make a request to your server to remove 
    // the users data from your data store so you 
    // don't attempt to send them push messages anymore 

    // We have a subcription, so call unsubscribe on it 
    pushSubscription.unsubscribe().then(function() { 
    // pushButton.disabled = false; 
    // pushButton.textContent = 'Enable Push Messages'; 
    // isPushEnabled = false; 
    }).catch(function(e) { 
    // We failed to unsubscribe, this can lead to 
    // an unusual state, so may be best to remove 
    // the subscription id from your data store and 
    // inform the user that you disabled push 

    console.log('Unsubscription error: ', e); 
    // pushButton.disabled = false; 
    }); 
}).catch(function(e) { 
    console.error('Error thrown while unsubscribing from ' + 'push messaging.', e); 
}); 
}); 
} 

function subscribe() { 
// Disable the button so it can't be changed while 
// we process the permission request 
// var pushButton = document.querySelector('.js-push-button'); 
// pushButton.disabled = true; 

navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { 
    const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); 
    serviceWorkerRegistration.pushManager.subscribe({userVisibleOnly: true, applicationServerKey: applicationServerKey}) 
.then(function(subscription) { 
    console.log(subscription); 
    // The subscription was successful 
    // isPushEnabled = true; 
    // pushButton.textContent = 'Disable Push Messages'; 
    // pushButton.disabled = false; 

    // TODO: Send the subscription subscription.endpoint 
    // to your server and save it to send a push message 
    // at a later date 
    return sendSubscriptionToServer(subscription); 
}) 
.catch(function(e) { 
    if (Notification.permission === 'denied') { 
    // The user denied the notification permission which 
    // means we failed to subscribe and the user will need 
    // to manually change the notification permission to 
    // subscribe to push messages 
    console.log('Permission for Notifications was denied'); 
    // pushButton.disabled = true; 
    } else { 
    // A problem occurred with the subscription, this can 
    // often be down to an issue or lack of the gcm_sender_id 
    // and/or gcm_user_visible_only 
    console.log('Unable to subscribe to push.', e); 
    // pushButton.disabled = false; 
    // pushButton.textContent = 'Enable Push Messages'; 
    } 
}); 
}); 
} 

Answer 1

這是一個可悲的事情與Chrome。

最基本的級別：Web推送與Firebase完全分開網絡消息傳遞。

網絡推送和應用程序服務器密鑰

網頁推送需要應用服務器的關鍵，這是你傳遞什麼到訂閱調用一個服務人員推經理：

pushManager.subscribe({userVisibleOnly: true, applicationServerKey: MY_KEY}); 

在網絡推動下， applicationServerKey需要是一個Uint8Array（即一個65字節的數組）。無論如何都可以生成該密鑰，只需確保私鑰保密並在您的Web應用中使用公鑰。

在我寫的代碼實驗室，我指示，你會得到你的關鍵來源：https://web-push-codelab.appspot.com/

本頁面生成一組在運行應用程序服務器的密鑰，並且將結果存儲在本地存儲（所以你可以使用相同的頁面發送推送消息 - 需要該應用程序服務器密鑰）。

您可以像使用web-push's node CLI這樣的工具輕鬆獲得您的密鑰。

火力地堡服務器密鑰

的火力地堡消息SDK爲網絡使用服務人員實現Web上推，但其管理的應用服務器密鑰爲您服務。其原因在於，Firebase消息傳遞SDK使您可以使用Firebase雲消息API來觸發推送消息，而不是您需要在您正在使用的代碼中使用的Web推送協議。

Firebase控制檯中的「服務器密鑰」是您在觸發推送消息時使用的密鑰，它是「授權」標頭。

https://fcm.googleapis.com/fcm/send 
Content-Type: application/json 
Authorization: key=<YOUR SERVER KEY HERE> 

摘要

• 火力地堡的消息有它的網絡推自己的SDK，如果您使用的，那麼你應該遵循它的指導和使用它的服務器端API。
• Web Push（開放式Web標準）與Firebase（或任何其他推送服務）沒有直接依賴關係，因此您可以創建特定格式的密鑰並使用Web推送協議來觸發推送消息。 （Chrome在幕後使用Firebase，但作爲網站推送網站的開發者，您無需爲Firebase執行任何操作）。