Firebase Cloud Messaging's getToken() only works if I omit the usePublicVapidKey method, why?

9
votes

I'm having a specific issue with the implementation of Firebase for Firebase Cloud Messaging (FCM):

As you can see in the code below, //messaging.usePublicVapidKey("<MY VAPID KEY IN HERE>"); is currently commented. The VAPID key was obtained with the command: web-push generate-vapid-keys in the server's terminal. If I uncomment this line, I get this error in the console when I call notification_permission():

This is my current index.html file:

<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-messaging.js"></script>
<script>
var config = {
    apiKey: "<MY FIREBASE API KEY>",
    authDomain: "<MY FIREBASE PROJECT ID>.firebaseapp.com",
    databaseURL: "https://<MY FIREBASE PROJECT ID>.firebaseio.com",
    projectId: "<MY FIREBASE PROJECT ID>",
    storageBucket: "<MY FIREBASE PROJECT ID>.appspot.com",
    messagingSenderId: "<MY FIREBASE SENDER ID?>"
};
firebase.initializeApp(config);

//messaging app
const messaging = firebase.messaging();

//vapid
//messaging.usePublicVapidKey("<MY VAPID KEY IN HERE>");

//register service worker
navigator.serviceWorker.register('firebase-messaging-sw.js').then(function(registration) {
    console.log('Service Worker Registered!', registration);
}).catch(function(err) {
    console.error('Service Worker registration failed', err);
});
</script>

This is the javascript function I call to get the user's permission to receive notifications and get the user's token:

<script>
function notification_permission() {
    messaging.requestPermission().then(function(permission) {
        console.log('Notification permission granted.', permission);
        messaging.getToken().then(function(current_token) {
            if(current_token) {
                //update user token
                // update_token(current_token);
                console.log('token', current_token);
            } else {
                // you don't have permission to show notifications
                // detect whether they are blocked or not, then show your custom UI
            }
        }).catch(function(err) {
            // retrieving token failed, analyze the error
            console.error('retrieving token failed, analyze the error', err);
        });
    }).catch(function(err) {
        console.error('Unable to get permission to notify.', err)
    });
}
</script>

I already have this on my manifest.json file:

{
    "gcm_sender_id": "103953800507",
    "serviceworker": {
        "src": "firebase-messaging-sw.js",
        "scope": "/"
    }
}

My specific questions with this configuration are:

  1. Is it ok to use web-push generate-vapid-keys to get a VAPID key just once, and the use that very same VAPID key for all user requests?

  2. Why is the getToken() method failing when using the VAPID key?

  3. Is the VAPID method optional? What are the advantages of using it?

Thanks for your help!

1
javascriptfirebasefirebase-cloud-messagingvapid
I have a inverse situation, when I omit VAPID key then I couldn't get token,it gives the same error that you mentioned as requiring "OAUTH2" If I add a VAPID key, then I can take a token but when I send a notification, it does not receive any message. I'm searching for that but couldn't find any related doc. Should I use VAPID key, if so what may be wrong with not receiving a message or should I not use that key, then what should I do to get a token without requiring OAUTH2? I hope you resolved already. – hasany

1 Answers

1
votes

1) yes.

2) because the token is related to firebase account and not the vapid key. Bypassing firebase you can't get any token.

3) using vapid is useful when NOT using firebase.