Firebase FCM Push Notification Backend

Mit Firebase Cloud Messaging, kurz FCM, kann man Notifications auf IOS und Android versenden. Im folgenden Beitrag geht es um das Versenden der Nachrichten im Backend mit PHP.

Um mit PHP Nachrichten an FCM zu schicken kann die Library

verwendet werden. Damit man Daten aus der Firebase Database verwenden kann, verwendet man zusätzlich noch die Library:

Damit ergibt sich das folgende composer File:

 

Um mit Firebase zu arbeiten erstellen wir eine backend.php Datei:

Mit der Variable $firebase kann nun auf die Datenbank zugegriffen werden und mit $client können Nachrichten versendet werden. Die json Datei und den apiKey findet man in der https://console.firebase.google.com/. Dort unter Deine App >> Projekteinstellungen >> Cloud Messaging ist der API Key und unter Deine App >> Projekteinstellungen >> Dienstkonten kann man sich einen privaten Schlüssel generieren lassen. Diesen dann entweder im gleichen Ordner wie die backend.php ablegen oder wie im Beispiel im Ordner secret. Wichtig ist das die Datei keinen entsprechende Zugriffsrechte hat, damit niemand diese über den Webserver auslesen kann.

Das folgende Beispiel liest Elemente aus der Tabelle ‘Todos’ aus. Weitere Informationen wie ihr mit firebase-php arbeiten könnt, findet ihr unter: https://github.com/kreait/firebase-php

Verschicken kann man dann eine solche ‘Aufgabe’ mit:

In dem Beispiel wird die Nachricht nur an die Clients verteilt, welche sich auf das Topic ‘todos’ subscribte haben. Hier kann man aber auch z.B. devices auswählen oder an alle verschicken. Mehr dazu unter:  https://github.com/Paragraph1/php-fcm

Ob das Senden an FCM erfolgreich war kann man mit

prüfen. Dabei sagt das Ergebnis aber nur aus ob die Nachricht an FCM übermittelt wurde, aber nicht ob die Clients diese erfolgreich erhalten haben.

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:

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:

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:

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. Continue reading “Ionic2 (rc3) mit firebase und google+facebook login”

Slim und Ionic und CORS

Wer sich mit Slim und Ionic ein kleine App und Rest Api bauen möchte, kann schnell mit dem Thema CORS in Kontakt kommen. Besonders beim testen auf der lokalen Maschine.

Damit es auch lokal funktioniert. Müssen die folgenden Zeilen am Anfang der index.php hinzugefügt werden (am besten ganz oben):

Dabei kann man natürlich auch die Freigabe auf bestimmte Domains einschränken. Falls man diese drei Zeilen jedoch nicht hinzufügt, erhält man bei einem http.get(…) die folgende Fehlermeldung:

Ionic – Anzeigen des Settings Menü GPS

Damit man mit Ionic dem User auch Anzeigen kann das die GPS Daten nicht vorhanden sind und er diese im Settings Menü ändern muss, braucht man die folgenden beiden Plugins

cordova-plugin-request-location-accuracy

cordova-diagnostic-plugin

Mit diesen kann man abfrage ob GPS aktiviert ist und auch den Benutzer zum jeweiligen Menü des OS zu schicken. Damit ist es wie in einer normalen Android App möglich ein “Bitte aktivieren Sie Google Standortdienste” Fenster anzuzeigen.