Ionic Push Notification giving 403 forbidden error

I am trying to build a simple push notification app from here as code pasting as this was giving 400 Bad Request(I feel probably because the Authorization field was missing from the headers). So started looking and found out they also have an example here. But again I got 403 forbidden error. Now on their site, they have proved error code which says.

403

Invalid or missing registration. Check that the request contains a
registration token (in the registration_id in a plain text message, or
in the to or registration_ids field in JSON).

So I did and found no mistake.
Here is the code.

  var privateKey = 'AIzaSyBeU6owUdakHAmQPEK0GcX1uv8K0H1I8fA'; //the key I got from google. I will change it in an hour
                var tokens = ['fslJofRFUOk:APA91bFYJnOufZGo4xSwJsDn3pIZEKl_ZZWdLHn3xY3HQeIV9g3MFx2yeYVvMIGq7Lr4ZMSM2yTxjGytzUt3AiM8xPPKBHuF5zX5Liu7wfo6lSgODukRtUbVLaVwF_RhvYrh3kr1uyjV']; //
                var appId = '490668543641';

                // Encode your key
                var auth = btoa(privateKey + ":");
                console.log(auth);
                // Build the request object
                var req = {
                    method: 'POST',
                    url: 'https://push.ionic.io/api/v1/push',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Ionic-Application-Id': 490668543641,
                        'Authorization': 'basic ' + auth
                    },
                    data: {
                        "tokens": tokens,
                        "notification": {
                            "alert": "Hello World!",
                        "android": {
                            "collapseKey": "foo",
                            "delayWhileIdle": true,
                            "timeToLive": 300,
                            "payload": {
                                "key1": "value",
                                "key2": "value"
                            }
                        }
                        }
                        }
                    };

                    // Make the API call
                    $http(req).success(function(resp) {
                        // Handle success
                        console.log("Ionic Push: Push success!");
                    }).error(function(error) {
                        // Handle error 
                        console.log("Ionic Push: Push error...");
                    });

I am still getting 403 Forbidden Error. What is the mistake here?

Did you find a solution? I have the exact same problem

First things first that code is dead wrong. Let me update it for you.

var privateKey = 'AIzaSyBeU6owUdakHAmQPEK0GcX1uv8K0H1I8fA'; //the key I got from google. I will change it in an hour
        var tokens = ['fslJofRFUOk:APA91bFYJnOufZGo4xSwJsDn3pIZEKl_ZZWdLHn3xY3HQeIV9g3MFx2yeYVvMIGq7Lr4ZMSM2yTxjGytzUt3AiM8xPPKBHuF5zX5Liu7wfo6lSgODukRtUbVLaVwF_RhvYrh3kr1uyjV']; //
        var appId = 'this is the app id generated by ionic and lies in your ionic.io accound it is generated in the step when you do ionic io init';

            // Encode your key
            var auth = btoa(privateKey + ":");
            console.log(auth);
            // Build the request object
            var req = {
                method: 'POST',
                url: 'https://push.ionic.io/api/v1/push',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Ionic-Application-Id': (again app_id is what I told you before(Its a 8 digit alpha numeric cide),
                    'Authorization': 'basic ' + auth //the key "HAS" to be (private key plus a colon symbol in base64 encoded format other wise you will always get this error)
                },
                data: {
                    "tokens": tokens,
                    "notification": {
                        "alert": "Hello World!",
                    "android": {
                        "collapseKey": "foo",
                        "delayWhileIdle": true,
                        "timeToLive": 300,
                        "payload": {
                            "key1": "value",
                            "key2": "value"
                        }
                    }
                    }
                    }
                };

                // Make the API call
                $http(req).success(function(resp) {
                    // Handle success
                    console.log("Ionic Push: Push success!");
                }).error(function(error) {
                    // Handle error 
                    console.log("Ionic Push: Push error...");
                });

After doing all this I still get the error. I don’t know whats wrong but these are the things I would improve upon first. Best thing is go check which file makes this call. What parameter they expect? What are we not passing ?
I wish you all the best and hope you come back with the answer. May the force be with you. If you don’t get it in three days contact me here back again.

Same problem.
How did you solve?

If you are using Ionic 2 if you follow all the steps above, there is an additional step. Which is not mentioned in their docs, ionic config set app_id : "Enter that eight digit app_id" This command enter in terminal. Mind you this instruction is for ionic push.
Then this code.

`$scope.sendNotification = function() {
console.log("In push notification");
var push = PushNotification.init({
    "android": {
        "senderID": "12 digit sender ID from android-gcm"
    }
});

push.on('registration', function(data) {
    var reg = {
        regId: data.registrationId
    };
    $http.post('http://app.example.com/sendPush', reg)
        .then(function(response) {
            console.log(response);
        })
        .catch(function(error) {
            console.log(error);
        });
    console.log(data.registrationId);
});

push.on('notification', function(data) {
    console.log(data.message);
    // data.count,
    // data.sound,
    // data.image,
    // data.additionalData
});

push.on('error', function(e) {
    // e.message
});
  };`

Hi,
I can’t understand. I must put this code below the previous?

No no… delete that code. It won’t work. Put this code in any controller in angular from wherever you want to call your push

What’s “http://app.example.com/sendPush”?
It is different from “https://push.ionic.io/api/v1/push”?

Please help.
Copying your code into a function click button, i get:
“ReferenceError: PushNotification is not defined”

Solution?

Is is giving in console ? It will because it is meant to be used on phone. Build an apk and put it on phone. Switch on the debugging mode. and see in console if that error still persists.

If it indeed persists. This is the check list.

  1. make sure you have this in your module declarations.
    var myApp = angular.module('myApp', [' 'ionic', 'ionic.service.core']);
    In ionic serve core PushNotification isdefined.
  2. also install the phonegap-plugin-push, because that is the plugin even ionic.service.core uses.
  3. have you followed each of the steps on this . And don;t check out only this page, check out all the sister pages as well. See if you have everything set up properly. Your App_id, senderID and API_KEY should be set from the terminal.

If you still have issues. Let me know

that is my hostname, my API from where my backend lies. My backend is in Node JS and I am using node-gcm to send the message from the backend. So if you have a backend in some other programming language and it is not yet hosted, it will look like http://localhost:8080/your_route_name . So, in this case, I have written a backend to send the message, in the link above, Ionic has a backend written to test out the functionality.

Hi @saras_arya,
i’m trying to use from google chrome so i’ll put the apk to my android.

I have some questions please:

1 - Here i set api_key: ionic push --google-api-key your-google-api-key
Here i set app_id: ionic config set gcm_key
To set senderID? Where I find it?

2 - To install “the phonegap-plugin-push”, I use ionic plugin add phonegap-plugin-push, correct?

3 - To “switch on the debugging mode”, I use ionic config set dev_push true, correct?
I read some about this command, but I can’t understand the difference between true and false. Can you explain me?

4 - What’s the difference between using a personal backend or the ionic backend?

Thank you for your help

Sorry but your code, don’t work for me.
I have always the same error.
Also I can’t see a list of tokens or something else to send notification.
Can you upload an example app?

Okay, those are some great questions. I will clear your doubts one by one. senderID is the project ID from


Can you see the project number. That is your sender ID.

Ques 2: You did correctly by installing PhoneGap-plugin-push.

Ques 3: See dev_push needs to be false. Why? I’ll tell you. See ideally you cannot test push notification on your computer. It is something reserved only for phones but if you just want to test the functionality, on your computer but not your phone. You set dev_push to true.
To test on a phone. You need to set it to dev_push false, which is the case in our case

Ques 4: Ionic backend is written in such a way that it will send you a push notification. Instead, of ionic sending you, it’s own notification, With its own content. You can create your own notifications. Like Your notification will show. “Great Deals on App” or “Crash Detected” or any personalised message. To have this, you need your own backend. My backend was in nodeJS. Even if I give you my sample app it won’t work without the backend. I will have to create a GitHub repo with server and frontend. Which will take me an hour or something? If you can’t get it within today. Tell me I’ll create a server and frontend for the community.

Hello @saras_arya,
thank you for your explanation.

Unfortunately I can work with ionic only in the evening after dinner, because first i’m at work.
So, if you can create a working example with github, i think it will give me a lot of help.

Other questions:
1 - How do you use sender ID?
2 - Don’t you write any device token or something else?

Bye :smile:

Any News please?
I need this notification :frowning:

Any News please?
I need this notification :frowning:

@trotterellone I couldn’t find time… Sorry, Does the issue still persists? I am free now

Yes please… I still need some help