CODEWITHSUNDEEP
angularpostfirebase-cloud-messagingauthorizationhttprequest
Abduallah Shamhan
Abduallah Shamhan

Reputation: 129

sending POST request to FCM not accepting authorization header in angular

So I'm trying to use FCM to send notifications from Angular web application to mobile app using Firebase cloud messaging..

but I'm getting 401 response "the request was missing an Authentication Key", I tested the the same request on POSTMAN and it was working but on angular it is not..

here is my my code :

pushNotification(title , body){


this.http.post('https://fcm.googleapis.com/fcm/send' , {
  header: {
    'Content-Type':  'application/json',
    'Authorization' :  'key='+ environment.cloudMessages.serverKey
  }, 
  body: {
    "notification": {
      "title": title   ,
      "body":  body,
      "mutable_content": true      
      },
      "priority":"high",
  }
}).subscribe(res => {
  console.log(res);
})

}
}

Where my key is the server key from cloud messaging..

Upvotes: 0

Views: 1896

Answers (3)

ANKIT MISHRA
ANKIT MISHRA

Reputation: 606

In Service:-
token='key=AAAA7SRV_tKJ1NzRT8d2VJ5NGkayEx1HT9SxrdTT5G5a4kx5c6GoDvmWmzhCTWDRCqrdACrctF5Gjy5Df2qf6ZCNJHt7oHfH7BC'

createNotification(data) {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': this.token
    });
    console.log('Res from Frontend=>', data)
    return this.http.post('https://fcm.googleapis.com/fcm/send', data, { headers: headers }).subscribe(res => {
      console.log('Res from APi', res)
    })

  }


In component.ts:-
const fcm = {
        "notification": {
          "title": '',
          "body": '',
          "sound": "default",
          "click_action": "FCM_PLUGIN_ACTIVITY",
          "icon": "./../../assets/images/logos/arabic-purpal-logo.png"
        },
        "data": {
          "hello": "This is a Firebase Cloud Messagin  hbhj g Device Gr new v Message!",
        },
        "to": 'FCM Token Here'
      };
      this.service.createNotification(fcm)
    }

Upvotes: 0

user5959404
user5959404

Reputation: 


//Interfaces containing payload
export interface FCMData {
  body: string;
  title: string;
}

export interface FCMPayload {
  to: string;
  collapse_key: string;
  data: FCMData;
}

// this method sends the notification
  async sendNotifications(message: string) {

    const headers: HttpHeaders = new HttpHeaders({
      'Content-Type': 'application/json',
      Authorization: 'key=' + AppSettings.SERVER_TOKEN
    });
 

      const data: FCMData = {
        body: message,
        title: 'Sup!'
      };
      const fcmPayload: FCMPayload = {
        to: reg.token,
        collapse_key: 'type_a',
        data
      };

      this.http.post('https://fcm.googleapis.com/fcm/send' , fcmPayload , {headers}).subscribe(res => {
        console.log(res);
      });
    );
  }

To Receive the Data Payload in Kotlin, Inside your FirebaseMessagingService -> override fun onMessageReceived


 if (remoteMessage.data.isNotEmpty()) {
    const body= (remoteMessage.data as ArrayMap).valueAt(0)
 }

Upvotes: 0

JoeBoxer
JoeBoxer

Reputation: 180

You have to send the headers in as options parameter on the post.

let headers = new HttpHeaders({
  'Content-Type': 'application/json',
  Authorization: 'key=' + FB_MSG.serverKey
});
let options = {
  headers: headers
}

Upvotes: 0

Related Questions