Tag Archives: SocialNetworks

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

Facebook – Invite all friends – mit Javascript

Wer in Facebook für ein Event eine große Anzahl Freunde einladen möchte, muss dazu mehrere Klicks machen. Dies kann ab einer bestimmten Anzahl von Events mühsam und werden.

Dagegen gibt es aber eine Lösung, mit Hilfe von Javascript kann man automatisch alle checkboxen anklicken. Im Internet gibt es einige Code Snippets, welche dies ermöglichen.

Ich habe das folgende verwendet:

Und so könnt ihr es ihn euren Browsern verwenden:

Heises 2-Klick-Empfehlungsbutton – Social Buttons mit Datenschutz

Heise.de hat einen 2-Klick-Empfehlungsbutton entworfen. Dieser Button unterscheidet sich von den normalen gefällt mir Button, durch ein 2-Klick Prinzip. Der User muss zuerst den Button des Social Networks aktivieren und kann dann auf den Button klicken. Dadurch wird verhindert, das die Social Networks schon durch das einbinden der Buttons Daten abrufen.

Dadurch, dass dieses Vorgehen auf jeder Seite erneut vorgenommen werden muss, ist sichergestellt das nur diese Daten übertragen werden welche vom User gewünscht sind. Durch die Zustimmung mit dem aktivieren der Buttons stimmt der User dem Abrufen von Daten zu, der Webseitenbetreiber lässt somit den User entscheiden ob dieser seine Daten bereitstellen möchte oder nicht. Dies ist in Betrachtung der aktuellen Datenschutz Diskussionen ein wichtiger Punkt.

Damit der User aber nicht auf jeder Seite seine Zustimmung geben muss, kann dieser einzelne oder alle Buttons dauerhaft aktivieren.

Heise.de hat ein Jquery Plugin namens “socialshareprivacy” veröffentlicht. Es sind darin 2-Klick-Empfelungsbuttons für Twitter, Facebook und Google+ vorhanden. Den Code findet ihr unter:

http://www.heise.de/extras/socialshareprivacy/

Twitter auf der eigenen Seite

Wer seine Tweets von Twitter oder Tweets zu einem bestimmten Thema auf seiner Webseite anzeigen lassen möchte, findet bei Twitter selbst eine gute Lösung.

Die Widgets verwenden ein Javascript von Twitter und lassen sich in Farbe, Anzeige und Inhalt einstellen. Für jemand der Tweets anzeigen möchte und dafür ein schnelles und einfach Widget benötigt, ist damit bestens bedient.

Twitter bietet auch die Möglichkeit Twitter mit Facebook zu verbinden, dadurch werden die Tweets in Facebook gepostet. Dazu muss man die Funktion in seinem Profil aktivieren und bei Facebook zulassen.