Authentifizierung mit React Native und API-backend

Gibt es eine ganze Menge zu dieser Frage, so sehr, dass es nicht alle passen in einen einzigen SO zu beantworten, aber hier einige Tipps und eine Allgemeine übersicht, das sollte grob passen, was Sie erreichen möchten.

OAuth2 Genehmigung

Von den Klängen der es, Sie sind daran interessiert, die Verwendung von OAuth 2 zu social-login Genehmigung, und möchte muss bei der ersten party Authentifizierung als alternative mit einer E-Mail und Passwort. Für social log-ins werden Sie am Ende mit dem OAuth 2 Implizite flow zum abrufen eines Zugriffstokens, das ist ein allgemein anerkannter Muster. Denn Sie sind auch der Suche nach authentifizieren Benutzer mit einer E-Mail und Passwort, können Sie möchten machen Sie sich mit OpenID Connect ist eine Erweiterung von OAuth 2 und die explizit unterstützt Authentifizierung zusätzlich zur Genehmigung.

In jedem Fall, sobald Ihr Benutzer verfasst eine E-Mail/Passwort Kombo oder die Berechtigung erteilt, die durch die social-identity-Provider, erhalten Sie in der Antwort ein access token und (Optional) ein ID-token. Die Token, wahrscheinlich ein JWT (JSON Web Token, siehe jwt.io) stoßen wird als base64-codierte Zeichenfolge, die Sie entschlüsseln können, um zu überprüfen die Ergebnisse der JWT, die Dinge wie die ID des Benutzers und andere details wie E-Mail-Adresse, name, etc.

Für weitere Informationen über die verschiedenen Arten von Bewegungen, siehe dieser hervorragende überblick über den Digitalen Ozean.

Verwenden von Token für die API-Authentifizierung

Nun, dass Sie ein access-token, die Sie übergeben können, zusammen mit allen Anfragen an das API zu demonstrieren, dass Sie sich richtig authentifiziert. Sie tun dies, indem man entlang der access-token in Ihren HTTP-Headern, insbesondere die Authorization header, Vorwort zu Ihrem base64-codierte access token (was Sie ursprünglich erhalten als Antwort auf Ihre Berechtigung Anfrage) mit Bearer. Also der header sieht ungefähr so aus:

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJh...

Auf die API-Seite, erhalten Sie das token entschlüsseln, und dann überprüfen die ID und die Ansprüche in es. Übergeben als Teil des token in die sub Eigenschaft der Thema, oder die ID des Benutzers, der die Anfrage. Dies ist, wie Sie zu identifizieren, zugreifen auf und starten, Dinge zu tun, auf die API-Seite bei dem jeweiligen user die Rechte, Dauerwellen, etc. Es ist auch wichtig, dass Sie überprüfen der access-token, sobald Sie es erhalten, auf die API-Seite, um sicherzustellen, dass es nicht gefälscht oder von hand gefertigt.

Wie sieht es in der RN für Implizite fließt

Hier ist, was der Allgemeine Ablauf sieht aus wie in Reagieren Nativen für OAuth 2 Implizite fließt, das ist, was Sie verwenden werden für die social-identity-Provider:

1. Benutzer tippt auf eines Ihrer social login buttons auf React Native UI
2. Dein code reagiert auf die Tasten wird die Anfrage-URL zu Anbietern, je nachdem, was jeder will (denn Sie unterscheidet sich leicht).
3. Mit der Linking API in RN, Sie werden sich öffnen, die URL in einem browser auf dem Gerät, das sendet der Benutzer aus, um die sozialen Anbieter für Sie zu tun die login/Autorisierung Tanz.
4. Einmal abgeschlossen, werden die sozialen Anbieter leitet den Benutzer zu einer URL, mit der Sie Anbieter. Auf einem mobilen Gerät, verwenden Sie Ihre eigene benutzerdefinierte URL-Schema an, um verschieben Sie die Benutzer von der web-Ansicht auf die app. Dieses Schema ist etwas, das Sie sich als Teil Ihrer app, wie my-awesome-app://, und die Weiterleitungs-URL, die Sie übergeben, um die sozialen Anbieter Aussehen könnte my-awesome-app://auth_complete/. Sehen die Verknüpfung von API-docs, wie konfigurieren Sie diese URL-Schemata und deep linking.
5. In der Prozedur für das neue URL-Schema/deep-link, Sie erhalten den Token übergeben, die als Teil der URL. Entweder von hand oder mithilfe einer Bibliothek, analysieren der Token aus der URL und speichern Sie Sie in Ihre app. Es ist an diesem Punkt können Sie beginnen, untersuchen Sie, wie JWTs, und geben Sie diese zusammen in die HTTP-Header für den API-Zugriff.

Wie sieht es in der RN für Resource Owner Password Zuschüssen

Haben Sie die Möglichkeit, für Ihre E-Mail - /Passwort-Kombination für Ihre eigenen Konten entweder kleben mit dem Implicit flow, oder Wechsel zu den Resource Owner Password Gewähren flow wenn deine API-und app-Vertrauen zueinander, was bedeutet, dass Sie sowohl die app und die API. Ich bevorzuge die ROPG flow auf mobile apps-wo möglich, weil die UX ist doch viel schöner-Sie müssen nicht zu öffnen, eine separate web-Ansicht, die Sie gerade haben, Sie geben Sie in Ihrer E-Mail und Passwort in die UI-Elemente direkt in der app. So, dass gesagt wird, hier ist, wie es aussieht:

1. Benutzer tippt die E-Mail - /Passwort-Kombi Schaltfläche "login", und ER antwortet mit einer Benutzeroberfläche, die enthält TextInputs für die E-Mail und Passwort
2. Bauen eine POST-Anfrage an den authorization server (die API, oder kann ein separater server) enthält, der richtig gestaltete URL-und Körper-details, die Pässe auf die E-Mail und Passwort. Feuer in dieser Anfrage.
3. Die auth-server antwortet mit der zugehörigen Token in der Antwort der Körper. An dieser Stelle können Sie das gleiche tun, was vorher in Schritt 5, wo Sie speichern den Token für den späteren Einsatz in der API-Anfragen und überprüfen Sie für die relevanten Informationen für den Benutzer.

Wie Sie sehen können, die ROPG ist mehr einfach, aber sollte nur verwendet werden, in sehr vertrauenswürdigen Szenarien.

An der API

Auf der API-Seite, die Sie überprüfen, ob das token in der Authorization-header, und wie bereits erwähnt, und wenn gefunden, Sie davon ausgehen, dass der Nutzer authentifiziert wurde. Es ist immer noch eine gute Sicherheit der Praxis zu gültig und überprüfen Sie die token-und user-Berechtigungen. Wenn es kein token gesendet, mit der Anfrage, oder wenn das token gesendet hat, die abgelaufen ist, dann wird Sie den Antrag ablehnen.

Hoffe, das hilft! Es ist sicherlich eine Tonne, aber es bietet einen Allgemeinen überblick.