Ionic AngularFire Firebase Facebook Login

Question

Ich habe ein Problem mit Ionic. Ich werde das erklären.

Ich verwende Ionic 2 und AngularFire 2, um Firebase zu verwenden. So kann ich auf meine Datenbank zugreifen und mich mit Facebook einloggen. Ich benutze eine Taste, um diese Funktion aufzurufen:

this.af.auth.login({ 
    provider: AuthProviders.Facebook, 
    method: AuthMethods.Popup 
}).then(function(response){ 
    console.log('facebook login ', response); 
}); 

Alles funktioniert gut auf dem Ionenlabor. Wenn ich jedoch meine App auf meinem Gerät teste, macht der Button nichts, weder das Popup noch die Umleitung funktionieren. Kannst du mir damit helfen?

Answer 1

Sie müssen einige Dinge zu beheben, habe ich Cordova für Facebook Login:

Sie nicht Ihre Log-Fehler nicht geteilt, aber ich denke, Sie dies tun müssen, um:

In Ihrem Facebook-App: Fügen Sie eine neue Plattform, Android oder IOS hinzu (Sie haben nicht gesagt, was Sie verwenden).

ein cordova Plugin hinzufügen:

ionic plugin add cordova-plugin-facebook4 --save --variable APP_ID="999999999" --variable APP_NAME="myApplication" 

Verwenden Sie Ihre Facebook-App-ID und Name.

Installieren ionischer-native in Ihrer App:

npm install ionic-native --save 

einen Facebook-Import in Ihrem Code hinzufügen:

import { Facebook } from 'ionic-native'; 

und Ihre Methode ändern, um eine Cordova Login für die Verwendung:

loginWithFacebook() { 
    return Observable.create(observer => { 
     if (this.platform.is('cordova')) { 
     Facebook.login(['public_profile', 'email']).then(facebookData => { 
      let provider = firebase.auth.FacebookAuthProvider.credential(facebookData.authResponse.accessToken); 
      console.log('facebook accessToken: '+facebookData.authResponse.accessToken); 
      firebase.auth().signInWithCredential(provider).then(firebaseData => { 
      console.log('facebook login ', firebaseData); 
      observer.next(); 
      }).catch(function(error) { 
      // Handle Errors here. 
      console.log("error"); 
      console.log(error); 
      // ... 
      }); 
     }, error => { 
      observer.error(error); 
     }); 
     } else { 

     this.af.auth.login({ 
      provider: AuthProviders.Facebook, 
      method: AuthMethods.Popup 
     }).then((response) => { 
      console.log('facebook login ', response); 
      observer.next(); 
     }).catch((error) => { 
      console.info("login", error); 
      observer.error(error); 
     }); 
     } 
    }); 
    } 

Hinweis: Wenn sich Ihre App in Entwicklung befindet, können sich nur Entwickler anmelden.

Answer 2

Der obige Code kann dies, indem Sie innerhalb eines AuthProvider wie die axample gegeben here nur einfacher für den Gebrauch gemacht werden:

signInWithFacebook(): firebase.Promise<any> { 
    if (this.platform.is('cordova')) { 
    return Facebook.login(['public_profile', 'email']).then(facebookData => { 
     let provider = firebase.auth.FacebookAuthProvider.credential(facebookData.authResponse.accessToken); 
     console.log('facebook accessToken: ' + facebookData.authResponse.accessToken); 
     return firebase.auth().signInWithCredential(provider); 
    }); 
    } else { 
    return this.auth$.login({ 
     provider: AuthProviders.Facebook, 
     method: AuthMethods.Popup 
    }); 
    } 
}