Facebook login ionic2 http.post

Ionic Framework ionic-v3
1

Using the cordova-plugin-facebook4
refering the docs from the offcial docs
also refering the docs from the ionic facebook native docs

CODE
auth-service :

public loginFacebook() {

return Observable.create(observer => {

 let permissions = new Array();
 permissions = ["public_profile"];
 Facebook.login(permissions)
 .then(function(response){
   let userId = response.authResponse.userID;
   let params = new Array();
   Facebook.api("/me?fields=id,name,gender,email", params)
   .then(function(user) {
    //  loader.present();
     user.picture = "https://graph.facebook.com/" + userId + "/picture?type=large";
     //now we have the users info
     observer.next(user);
     observer.complete();
   })
 }, function(error){
   console.log(error);
 });

});
}

in login.ts :

this.auth.loginFacebook().subscribe(function(data){

  loader.present();
  let toPost = {
    id:data.id,
    name:data.name,
    email:data.email,
    picture:data.picture
  }
  console.log("facebook login", toPost.id,toPost.name,toPost.email,toPost.picture);
  let json = JSON.stringify(toPost);
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');

   ///**problem start down here -- no response whatsoever**//

  this.http.post(this.appUrl + 'facebook/login', json,{headers: headers})
    .subscribe((data :any ) =>  {
       setTimeout(() => loader.dismiss() ,500);
       console.log("facebook login",data._body);
     })
})

Question: Why can’t i make a http.post within the subscribe block after facebook auth? There is no response whatsoever from http.post. The loading also is not stopping, seems like the post never actually posted. i surely can make an http.post outside facebook auth function. Is there anything i should know?

2

Never mind. solve it by return the subscribe data to a variable. And made the http.post call outside the fb auth function.

3

Hah. Silly me. Because of my limited understanding of typescript.
Better way to do it.
in login.ts :

let env = this;
this.auth.loginFacebook().subscribe(function(data){

  loader.present();
  let toPost = {
    id:data.id,
    name:data.name,
    email:data.email,
    picture:data.picture
  }
  console.log("facebook login", toPost.id,toPost.name,toPost.email,toPost.picture);
  let json = JSON.stringify(toPost);
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');

  env.http.post(this.appUrl + 'facebook/login', json,{headers: headers})
    .subscribe((data :any ) =>  {
       setTimeout(() => loader.dismiss() ,500);
       console.log("facebook login",data._body);
     })
})

Need to use
let env=this;

To anyone watching this thread. Please correct me if i am wrong. For anyone who looking for answer and have the same problem as i am . Hope this helps you. :smile: Cheers

4

It’s much simpler just to use a fat arrow function.