Base64 Firebase Cloud Messagingのサーバ鍵の符号化

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で文字列で許可されていませんが、クラウドMessengingタブでFirebaseに与えられたサーバキーが

コロンが含まれてい

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では混乱します。

最も基本的なレベル：ウェブプッシュはFirebaseから完全に隔離されていますウェブのメッセージング。 、

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

ウェブプッシュで：

のWebプッシュおよびApplication Serverキー

のWebプッシュが、これはあなたが購読サービスワーカープッシュマネージャを呼び出すに合格するものである、アプリケーションサーバキーが必要ですapplicationServerKeyはUint8Array（つまり65バイトの配列）である必要があります。とにかくこのキーを生成するには、プライベートキーをプライベートにしておき、Webアプリケーションで公開鍵を使用するようにしてください。私が書いたコードラボで

、私はあなたからあなたのキーを取得することを指示：このページはオンザフライでのアプリケーション・サーバー・キーのセットを生成し、ローカルストレージに結果を格納しますhttps://web-push-codelab.appspot.com/

（だからあなたが使用することができますプッシュメッセージを送信するための同じページ - アプリケーションサーバーのキーが必要です）。

web-push's node CLIなどのツールから簡単にキーを取得できます。ウェブ用

Firebaseサーバキー

FirebaseメッセージングSDKは、ウェブ上にプッシュを実装するために、サービス労働者を使用しますが、それはあなたのためのアプリケーションサーバーの鍵を管理します。この理由は、Firebase Messaging SDKが、Firebase Cloud Message APIを使用して、作業中のコードラブで使用する必要があるWebプッシュプロトコルではなく、プッシュメッセージをトリガーするように設定しているからです。

Firebaseコンソールの「サーバーキー」は、プッシュメッセージをトリガするときに使用するキーです。「承認」ヘッダーです。

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

概要

• Firebaseメッセージングは​​、あなたがいることを使用している場合、それは、ウェブのプッシュのための独自のSDKのしている、そして、あなたはそれがガイドだ従うと、それはサーバー側のAPIです使用する必要があります。
• ウェブプッシュ（オープンウェブ標準）は、Firebase（または他のプッシュサービス）と直接の依存関係がないため、特定のフォーマットのキーを作成し、ウェブプッシュプロトコルを使用してプッシュメッセージをトリガーします。 （ChromeはFirebaseをバックグラウンドで使用しますが、ウェブプッシュサイトの開発者はFirebaseのために何もする必要はありません）。