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 строке, но ключ сервера приведен в Firebase на вкладке Облака Messenging является

AAAA-8MWvk0:APA91bHmU8XL-rzOn9SPbpG98NSqAJcuhYBBh7oze_XhprBpK7Q9PPWm3PwBo6Llxby4zjhVtgvKPIaSAQGp-8RfMV10_d1GekzICrVX9oYO8pi6dOM4VTp52CCAzug6NYIa10tNddsgE2P5QowGAYcnRHxLkrHXsw 

который содержит двоеточие (не волнуйтесь, , его просто тестовое приложение, поэтому никаких проблем с конфиденциальностью).

Когда я попытался использовать старый ключ сервера, он просто выдает ошибку. Я пытался использовать другие ключи, данные в Firebase тоже, но безуспешно. Скажите, пожалуйста, какой ключ сервера использовать и как?

Я прикрепляю свой фрагмент кода, который фактически выполняет push-подписку.

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.

На базовом уровне: Веб-Push полностью отделен от Firebase Сообщения для Интернета.

Web Нажмите и сервер приложений Ключа

Web толчок требует ключа сервера приложений, это то, что вы переходите в подписываться позвонить на сервис рабочего нажимного менеджера:

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

В вебе-толчке, то applicationServerKey должен быть Uint8Array (т.е. массив из 65 байтов). Этот ключ можно создать так или иначе, как вам нравится, просто убедитесь, что вы закрываете закрытый ключ и используете открытый ключ в своем веб-приложении.

В codelab я написал, я проинструктировал, что вы получите ключ от: https://web-push-codelab.appspot.com/

Эта страница генерирует набор серверных приложений ключей на лету и будет хранить результат в локальном хранилище (Таким образом, вы можете использовать на той же странице для отправки push-сообщений, которым нужен этот ключ сервера приложений).

Вы можете так же легко получить свой ключ от таких инструментов, как web-push's node CLI.

Firebase Сервер Ключ

Firebase сообщения SDK для Интернета использует работник службы для осуществления толчка в Интернете, но он управляет ключами сервера приложений для вас. Причиной этого является то, что Firebase Messaging SDK позволяет вам использовать FireBase Cloud Message API для запуска push-сообщений вместо Web Push Protocol, которые вам нужно использовать в кодебеле, который вы работали.

«Ключ сервера» в консоли Firebase - это ключ, который вы используете при запуске push-сообщения, это заголовок «Авторизация».

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

Резюме

• Firebase сообщений имеет собственный SDK для веб-толчке, если вы используете это, то вы должны следовать его руководство и использовать его на стороне сервера API.
• Web Push (открытый веб-стандарт) не имеет прямой зависимости от Firebase (или любой другой службы push), поэтому вы создаете ключи в определенном формате и используете протокол push push для запуска push-сообщений. (Chrome использует Firebase за кулисами, но, как разработчик веб-сайта push, вам не нужно ничего делать для Firebase).