Wie fügt man OAuth Facebook Login in Ionic/Angular hinzu?

Question

Ich verwende die Ionic framework, um eine App zu erstellen, und ich möchte jetzt Facebook (oauth2) anmelden. Ich habe bereits einen Facebook-Login auf meiner Website mit OAuth implementiert; Ich leite den Benutzer einfach zu der relevanten Facebook-URL um, lasse ihn dort seine Zugangsdaten eingeben und erhalte dann das Token in meinem (Flask) Backend. Das funktioniert wie ein Zauber.

Ich frage mich jetzt, wie ich das gleiche in meiner Ionic/Cordova/Angular App implementieren kann. Wie ich es jetzt sehe es gibt ein paar Optionen:

• Leiten Sie den Benutzer auf die mobile Version von Facebook in der Ionic/Cordova WebView in der App meine App zu authentifizieren (wie ich in meinem normalen Webseite tun), und dann den Benutzer erneut zur Ionic App zurückkehren. Ich habe das Gefühl, dass dies nicht der richtige Weg ist.
• Verwenden Sie Facebooks Javascript-Authentifizierung, die das Token an die App zurückgibt. Ich kann dann das Token an meinen Server senden, um es für die spätere Verwendung zu speichern.
• Lassen Sie den Benutzer seinen Benutzernamen und Passwort in der Ionic App einfügen und diese an meinen Server POST und dann diese verwenden, um den Benutzer auf Facebook zu authentifizieren und ein Token dafür zu erhalten. Dies widerspricht offensichtlich dem Zweck von OAuth, aber ich denke, es würde funktionieren.
• Ich lese this article on the Ionic blog über, wie Facebook-Login zu implementieren, aber das verwendet die Auth0 plugin, die ich nicht verwenden möchte (es kostet Geld und ich möchte nicht von einer anderen Firma abhängig sein).
• Noch eine weitere Option, die ich nicht ..

So, jetzt bewusst bin, frage ich mich; Was ist der beste Weg um (OAuth basiertes) Facebook Login in meiner Ionic App zu implementieren und warum? Alle Tipps sind willkommen!

Answer 1

Sie können von $cordovaOauth.facebook in der ngCordova Bibliothek von Ionic Rahmen machen:

http://www.ngcordova.com

Hier sind zwei Referenzen, die Sie in die richtige Richtung setzen könnte es auf mit:

https://blog.nraboy.com/2015/02/make-facebook-mobile-app-ionic-framework/ http://ionicframework.com/blog/oauth-ionic-ngcordova/

Wenn Ihr Dienst von der Genauigkeit der Anmeldedaten abhängt, können Sie die Validierung über das Back-End durchführen auch. Dieser REST-Ansatz ähnelt jedoch der JavaScript-Bibliothek.

Grüße,

Answer 2

Facebook-Login Einsteigen der mobilen Hybrid-App arbeitet, ist die halbe Miete. Die andere Hälfte teilt die Anmeldeinformationen mit dem Back-End. Ich habe es gerade gegen ein Flask-Backend implementiert, also dachte ich, ich würde teilen, was funktioniert.

Lassen Sie den Benutzer seinen Benutzernamen und Passwort in die Ionic App eingeben und diese an meinen Server POST und dann diese verwenden, um den Benutzer auf Facebook zu authentifizieren und ein Token dafür zu erhalten. Dies widerspricht offensichtlich dem Zweck von OAuth, aber ich denke, es würde funktionieren.

Dies wäre eine sehr schlechte Idee (wie Sie darauf hingewiesen, es verletzt die Prinzipien von OAuth), und in der Tat würde es nicht funktionieren. Es gibt keinen Endpunkt, an dem Sie Facebook programmatisch ein Login und ein Passwort geben und als Antwort ein Token erhalten können (legal und ohne Scraping).Stattdessen erfordert das Abrufen eines Tokens einen Rückruf mit Benutzerinteraktion, unabhängig davon, ob es am Frontend oder am Backend ausgeführt wird. Betrachten Sie den Fall von two-factor authentication in Facebook, wo der Benutzer einen Code abrufen und eingeben muss, der an sein Mobiltelefon gesendet wird.

Verwenden Sie Facebooks Javascript-Authentifizierung, die das Token an die App zurückgibt. Ich kann dann das Token an meinen Server senden, um es für die spätere Verwendung zu speichern.

Ja, so soll es gemacht werden. Dies wird als clientübergreifende Authentifizierung bezeichnet. Facebook hat eine Seite, die explains auth tokens das ist konzeptionell hilfreich und diskutiert viele verschiedene Szenarien, aber leider nicht viele hilfreiche Codefragmente.

Sie können das Zugriffstoken als Teil des Anmeldevorgangs direkt an das Back-End übergeben. Das Backend kann dann das Token validieren. Angenommen, Sie verwenden die standardmäßigen Pakete Flask-Security und Flask-Social auf dem Back-End, können Sie die Flask-Social-Anmeldesicht umbrechen, um den Benutzer mithilfe des vom Frontend übergebenen Tokens zu authentifizieren. Sie können Beispielcode in diesem Sinne finden: https://gist.github.com/lrettig/7ca94ba45961207a7bd3

Beachten Sie auch, dass dieses Token in der Regel nur für ein paar Stunden gültig ist. Wenn Sie möchten, dass das Back-End das Facebook SDK im Auftrag des Benutzers fortlaufend verwendet, müssen Sie swap it for a Long-Term token. Eine weitere Randnotiz, die mich für eine Weile verwirrt hat: Ich habe festgestellt, dass mir nach der Authentifizierung mit Facebook am Frontend ein Access Token ausgehändigt wurde, während ich mit einem Python SDK im Backend einen Code erhielt muss gegen ein Token ausgetauscht werden, bevor eine Abfrage durchgeführt werden kann. Ich bin nicht sicher, warum der Unterschied, aber Codes und Tokens sind auch in den Facebook-Dokumenten beschrieben.