Ionic2 (rc3) mit firebase und google+facebook login

Inzwischen ist Ionic 2 in der RC3 Version vorhanden. Aufgrund von Änderungen zwischen RC0, RC2 und RC3 sowie einigen Änderungen bei firebase und angularfire2, sind leider die meisten Beispiele im Internet nicht mit RC3 kompatibel.

Ionic Projekt

Solltet ihr bisher ionic noch nicht installiert haben, könnt ihr das mit dem folgenden Befehl machen: sudo npm install -g ionic cordova Falls ihr noch kein npm und node installiert habt, am besten die aktuelle Version installieren. Danach könnt ihr wie folgt starten: ionic start NamederAnwendung blank –v2 Danach dann noch ios (falls ihr auf mac arbeitet) und android hinzufügen:

ionic platform add ios && ionic platform add android

Nun könnt ihr die app mit dem folgenden Befehl unter android testen. Es empfiehlt sich das Testen immer im Emulator oder auf einem echten Device vorzunehmen, da für das login bei facebook und google cordova Plugins verwendet werden - welche untern “ionic serve” nicht beachtet werden:

ionic run android

Hinweis: Falls in der package.json > “@ionic/app-scripts”: “0.0.45”, steht. Bitte den Hinweis am Ende der Seite beachten - Firebase is not defined.

Firebase

Unter https://console.firebase.google.com/ erstellt ihr euch eine neue Anwendung. Am besten den geichen Namen wie der Name für die App. Danach unter Authentication >> Anmeldemethoden bei Google und Facebook auf editieren klicken und die Anmeldemethoden aktivieren. Für Facebook benötigt ihr die appId und appSecret, da wir aber noch keine Facebook App erstellt haben - dort aktuell nur einen Platzhalter eintragen. Danach unter Einstellungen/Projekteinstellungen gehen (findet man beim klick auf das Zahnrad oben links) und auf “Firebase zu meiner WebApp hinzufügen” klicken. Danach erscheinen die Keys für eure Firebase Einstellungen:

const firebaseConfig = {
apiKey: “Key”,
authDomain: “authdomain.firebaseapp.com”,
databaseURL: “https://autdomain.firebaseio.com",
storageBucket: “storage.foo.com”,
};

Diese werden in eine Temporäre Textdaten kopiert, da sie später benötigt werden. Die messageId Variable wird nicht benötigt - wer Firebase Messaging verwenden möchte, kann das mit Ionic2 Push machen.

Facebook

Zuerst unter https://developers.facebook.com/apps eine neue App erstellen. Danach dann in der App unter “Produkt hinzufügen” auf “Facebook Login” klicken. Bei “Gültige OAuth Redirect URIs” die Url welche ihr unter von https://console.firebase.google.com/ >> Authentication >> Anmeldemethoden >> Facebook findet eintragen. Danach unter Einstellungen für eure Facebook App gehen und auf “Platfform hinzufügen” klicken. Daher erkläre ich im folgenden wie man mit ionic2 und firebase einen Google Login/SignIn und Facebook Login/SignIn realisieren kann: Bei “Google Play Package-Name” tragt ihr die id aus eurer config.xml im root Ordner eures Ionic Projektes ein.

Den Schlüssel Hash bekommt ihr mit dem folgenden Befehl auf euer Command Line: Linux: keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base6 Win: keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64 Den Schlüssel am besten in die Zwischenablage kopieren bzw. eine Textdatei - da diese bei Google wieder benötigt wird. Danach SingleSignOn aktivieren und speichern. Dann die AppId und den App-Geheimcode unter https://console.firebase.google.com/ >> Authentication >> Anmeldemethoden >> Facebook eintragen und speichern.

Google

Wieder auf https://console.firebase.google.com/ >> Projekteinstellungen gehen und auf “Firebase zu meiner Android App hinzufügen” klicken. Dort dann wie schon bei Facebook den Paketname (id) und den Hash eintragen und speichern. Danach geht ihr auf https://console.developers.google.com/ und wählt dort euer Projekt von Firebase aus (Projektname ist der gleiche) und geht auf “Zugangsdaten”. Dort findet ihr unter “OAuth-2.0-Client-IDs” die ClientID. Solltet ihr mehrere Zertifikate verwenden z.B. wenn ihr die App im Appstore hochladen wollt - werdet ihr dort für jeden Schlüssel eine eigene ClientId finden.

Cordova Plugins installieren

Nun werden die folgenden Plugins benötigt:

ionic plugin add cordova-plugin-facebook4 –save –variable APP_ID=”123456789” –variable APP_NAME=”myApplication”

cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-googleplus –save –variable REVERSED_CLIENT_ID=googleClientId

Package.json

Die beiden folgenden Dependencies müssen nun noch hinzugefügt werden:

“angularfire2”: “^2.0.0-beta.6”,
“firebase”: “^3.6.2”,

Das kann per npm install firebase oder auch durch das editieren der package.json und npm install vorgenomen werden.

app.module.ts

Dort nun folgendes einfügen:

import { AngularFireModule, AuthProviders, AuthMethods } from ‘angularfire2’;

export const firebaseConfig = {
apiKey: “apiKey”,
authDomain: “authDomain”,
databaseURL: “https://foo.firebaseio.com",
storageBucket: “foo.appspot.com”,
};

const myFirebaseAuthConfig = {
provider: AuthProviders.Password,
method: AuthMethods.Password
}

….

imports: [
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig, myFirebaseAuthConfig)
],

Login Code

Für die folgenden Scripts wurden die folgenden Imports verwenden:

import {AngularFire, AuthMethods, AuthProviders, FirebaseAuthState} from ‘angularfire2’;
import {Observable} from “rxjs”;
import {Facebook} from “ionic-native”;
import {GooglePlus} from ‘ionic-native’;
import {Platform} from “ionic-angular”;

und als Konstruktor

constructor(private af: AngularFire, private platform: Platform) { }

Google

loginWithGoogle() {
return Observable.create(observer => {
this.af.auth.subscribe((data: FirebaseAuthState) => {
this.af.auth.unsubscribe()
console.log(“in auth subscribe”, data)
this.platform.ready().then(() => {
GooglePlus.login({
‘webClientId’ : ‘YOURTWEBCLIENTID’ }) .then((userData) => {

            var provider = firebase.auth.GoogleAuthProvider.credential(userData.idToken);

             firebase.auth().signInWithCredential(provider)
              .then((firebaseData) => {
                console.log("Firebase success: " + JSON.stringify(firebaseData));
                observer.next();
              })
              .catch((error) => {
                console.log("Firebase failure: " + JSON.stringify(error));
              });
             })
         .catch((error) => {
             console.log("Firebase failure: " + JSON.stringify(error));
         });
      })
   })
});

}

Die “YOURWEBCLIENTID” findet ihr unter Firebase >> Authentication >> Anmeldemethoden >> Google >> Web SDK Configuration. Wer das den User dann noch speichern möchte, kann das mit:

this.af.database.list(‘usertabelleInFirebase’).update(success.uid, {
email: success.email,
provider: ‘google’,
picture: success.photoURL
});

Dann wird der Benutzer in der Firebase Datenbank gespeichert.

Facebook

loginWithFacebook() {
return Observable.create(observer => {
this.af.auth.subscribe((data: FirebaseAuthState) => {
this.af.auth.unsubscribe()
Facebook.login([‘public_profile’, ‘email’]).then(facebookData => {
let provider = firebase.auth.FacebookAuthProvider.credential(facebookData.authResponse.accessToken);
firebase.auth().signInWithCredential(provider).then(firebaseData => {
console.log(firebaseData);
observer.next();
});
}, error => {
observer.error(error);
})
.catch((error) => {
console.log(“Firebase failure: “ + JSON.stringify(error));
});;
});
}

Probleme mit Duplicate Identifier und Firebase

Falls ihr Probleme wie unter https://github.com/angular/angularfire2/issues/663 bekommt, könnt ihr auch als Starter App das Beispiel unter https://github.com/ionic2blueprints/firebase-chat verwenden. Dies hat bei mir Problem los funktioniert.

Release und Debug Zertifikat

Für Google und Facebook müssen beim releasen der App die beiden Cordova Plugins entfernt und neu hinzugefügt werden, mit der jeweilig richtigen ClientId. Dazu kann z.B. das Script https://github.com/lightszentip/ionic-release-build-script erweitert werden. Alternativ kann die ClientId für google auch direkt in der config.xml geändert werden unter .

Firebase is not defined

Bei der Verwendung von “@ionic/app-scripts”: “0.0.46” oder höher, muss firebase anders eingebunden werden. Eine Möglichkeit ist das in der index.html zu tun:

oder die folgende Anleitung befolgen: https://github.com/angular/angularfire2/blob/master/docs/aot-rollup-cli-setup.md. Alternativ kann man auch auf “@ionic/app-scripts”: “0.0.45” zurück.

https://ionicthemes.com/tutorials/about/ionic2-google-login http://vpt-deeplearner.tech/2016/10/17/ionic-2-googleplus-authentication-using-firebase-and-angularfire-on-android-device/ https://github.com/EddyVerbruggen/cordova-plugin-googleplus/blob/master/README.md https://github.com/rodrigoreal/ionic2-angularfire-login http://blog.ionic.io/google-oauth-changes/ https://github.com/angular/angularfire2/blob/master/docs/Auth-with-Ionic2.md