Vorgehensweise zur Twitter-Authentifizierung mit React und RESTful API

Foto von Eric Fischer auf flickr

In diesem Tutorial integrieren wir die Twitter-Authentifizierung in eine mit Express.js erstellte RESTful-API. Auf der Backend-Seite verwenden wir MongoDB als Datenbank, Node.js und Express.js. Auf der Frontend-Seite werden wir React verwenden, um eine einfache Anwendung zu implementieren, mit der wir den gesamten Registrierungs- und Login-Workflow anzeigen können. Ein ähnlicher Prozess kann auf jede einzelne Seitenanwendung (SPA) und das RESTful-API-Backend angewendet werden.

Authentifizierungs-Workflow

In diesem Abschnitt beschreiben wir den Prozess der Twitter-Authentifizierung. Die ausführliche Erklärung des gesamten Vorgangs finden Sie in der Twitter-Dokumentation.

Der Vorgang der Twitter-Authentifizierung ist in Abbildung 1 dargestellt.

Abbildung 1. Twitter-Authentifizierungsprozess

Erstellen einer neuen Twitter-Anwendung

Damit sich Benutzer mit ihren Twitter-Konten in unsere Anwendung einloggen können, müssen wir eine neue Twitter-Anwendung auf Twitter registrieren. Dies ist ein notwendiger Schritt, um den Schlüssel und den Geheimcode zu erhalten, die für die zukünftige Kommunikation zwischen unserer Anwendung und Twitter erforderlich sind. Dies ist erforderlich, damit sich unsere Anwendung bei Twitter ausweisen kann.

Wir können hier eine neue Twitter-Anwendung registrieren, indem wir auf die Schaltfläche Neue App erstellen klicken.

Als nächstes müssen wir unsere Bewerbungsdetails eingeben.

  • Name - ein eindeutiger Name (der von niemand anderem für die Twitter-Anwendung verwendet wurde).
  • Beschreibung - kurze Beschreibung unserer Anwendung. Dies kann später geändert werden.
  • Website - Website, auf der die Anwendung gehostet wird. Wenn wir das derzeit nicht haben, können wir vorerst einen Platzhalter setzen. In unserem Fall werden wir hier schreiben: https://github.com/GenFirst/react-node-twitter-login.
  • Rückruf-URL - URL, an die der Benutzer weitergeleitet wird, wenn der Authentifizierungsprozess erfolgreich war. Wenn dieses Feld nicht ausgefüllt ist, erhält der Benutzer bei der Autorisierung der Anwendung eine PIN, sodass der Vorgang nicht automatisch abgeschlossen wird. Sie müssen eine Rückruf-URL eingeben, auch wenn wir sie nicht verwenden.

Nachdem wir unsere Anwendung registriert haben, erhalten wir einen Bildschirm, in dem wir den Schlüssel und das Geheimnis unserer Twitter-Anwendung finden, die Registerkarte Schlüssel und Zugriffstoken, aber auch die Anwendungseinstellungen anpassen können.

Unsere Anwendung benötigt Zugriff auf Benutzer-E-Mails, die standardmäßig nicht aktiviert sind. Um dies zu ändern, müssen wir auf unserer Twitter-Anwendungsseite Datenschutzrichtlinien und Nutzungsbedingungen für URLs bereitstellen. Diese beiden URLs können auf der Registerkarte Einstellungen eingegeben werden.

Danach müssen wir die Registerkarte Berechtigungen öffnen.

Unten auf der Seite finden wir das Kontrollkästchen, das wir markieren müssen: E-Mail-Adressen von Benutzern anfordern. Markieren Sie es und drücken Sie die Schaltfläche Einstellungen aktualisieren. Unsere Twitter-Anwendung ist jetzt fertig.

Client-Setup - Reagieren Sie

In diesem Abschnitt erstellen wir eine Client-Anwendung in React. In der Anwendung wird gezeigt, wie die Twitter-Autorisierung in React implementiert wird. Für die Einrichtung des Projekts haben wir das Tool "Create React App" verwendet. Auf der Projektseite finden Sie eine großartige Dokumentation zur Installation des Tools. Also werden wir diesen Teil überspringen.

Eine neue Anwendung kann mit dem folgenden Befehl erstellt werden:

Erstellen-Reagieren-App-Frontend

Danach müssen wir nur die Abhängigkeiten installieren, die wir für dieses Beispiel benötigen:

npm ich reagiere-twitter-auth-s

Das Paket react-twitter-auth ist eine React-Komponente, mit der wir Benutzer mit ihren Twitter-Konten authentifizieren.

Anwendung reagieren

Die gesamte Client-Anwendung befindet sich in der Datei App.js. Zunächst werden wir den Konstruktor erklären. Im Konstruktor wird der Status initialisiert und der Benutzer ist standardmäßig nicht authentifiziert.

Weiter ist die Render-Methode. Wenn der Benutzer authentifiziert ist, zeigen wir seine E-Mail und die Schaltfläche zum Abmelden. Wenn der Benutzer jedoch nicht authentifiziert ist, wird die Schaltfläche für die Twitter-Registrierung mithilfe der TwitterLogin-Komponente angezeigt. Die Komponente selbst ist mit 4 Eigenschaften parametrisiert:

  • requestTokenUrl - URL des Endpunkts, an dem die Komponente request_token vom Server anfordern kann
  • loginUrl - URL des Endpunkts, an den die Komponente den Verifizierungscode senden kann, um den Authentifizierungsprozess abzuschließen
  • onSuccess - Funktion, die aufgerufen wird, wenn die Twitter-Authentifizierung erfolgreich ist. Als ersten Parameter erhält diese Funktion die ursprüngliche Antwort von der Backend-Anwendung. In unserem Fall werden wir das Token und das Benutzerobjekt aus der Antwort in dieser Funktion extrahieren
  • onFailure - Funktion, die aufgerufen wird, wenn die Twitter-Authentifizierung nicht erfolgreich ist. Als erster Parameter erhält diese Funktion einen Fehler. In unserem Fall werden wir Fehler im neuen Dialog anzeigen

Die einzige verbleibende Methode ist das Abmelden. Wir müssen alle Daten über den Benutzer und das Token entfernen. Außerdem möchten wir das Flag setzen, dass der Benutzer nicht mehr authentifiziert ist.

Backend-Setup - Node.js, Express.js

Abhängigkeiten

Für die Erstellung der RESTful-API verwenden wir Express.js. Das Parsen eingehender Anfragetexte in einer Middleware, bevor unsere Handler dies tun, wird vom Body-Parser durchgeführt. Die Abwicklung von JWT erfolgt per Express-JWT und Jsonwebtoken. Die Authentifizierung erfolgt mit Passport. Für die Twitter-Authentifizierung wird die Passport-Twitter-Token-Bibliothek verwendet. Als Datenbank verwenden wir MongoDB und Mongoose, um mit der Datenbank zu kommunizieren. Last but not least müssen wir CORS auf unserem Server aktivieren und dafür die cors-Bibliothek verwenden.

Datenbankmodell

Benutzerinformationen bleiben in der Datenbank erhalten. Wir haben nur eine Entität zu modellieren und das ist Benutzer. Wir sind nur an den E-Mail-Informationen des Nutzers aus seinem Twitter-Profil interessiert, daher ist dies das einzige, das wir einschließen. Außerdem behalten wir das Benutzerzugriffstoken und die Twitter-Profil-ID bei.

Interessant dabei ist, dass durch Setzen von select auf false im twitterProvider-Objekt das twitterProvider-Feld standardmäßig aufgrund von Abfragen ausgeschlossen wird. Um Benutzer mit dem twitterProvider-Feld zu erhalten, müssen wir in der Abfrage explizit angeben, dass wir das möchten.

In UserSchema müssen wir eine statische Methode hinzufügen, die zum Erstellen eines neuen Benutzers verwendet wird, falls der Benutzer noch nicht vorhanden ist. Diese Methode ist upsertTwitterUser.

Bei dieser Methode versuchen wir, den Benutzer anhand seiner Twitter-Profil-ID zu finden. Wenn wir einen Benutzer mit einer passenden Twitter-Profil-ID finden, bedeutet dies, dass der Benutzer bereits ein Konto hat, das seinem Twitter-Profil zugeordnet ist. In diesem Fall müssen wir hier nichts unternehmen. Wenn wir den Benutzer nicht gefunden haben, erstellen wir einen neuen Benutzer und speichern ihn in der Datenbank.

Passport-Konfiguration

Ein Pass ist eine Authentifizierungs-Middleware für Node.js. Es ist äußerst flexibel und modular. In diesem Projekt werden wir Passport-Twitter-Token verwenden, die Passport-Strategie zur Authentifizierung mit Twitter-Zugriffstoken mithilfe der OAuth-API. Es gibt auch die Passport-Twitter-Bibliothek, die eine Strategie für die Twitter-Authentifizierung enthält, diese Bibliothek ist jedoch nicht für die RESTful-API geeignet. Es ist besser für Express.js-Anwendungen geeignet, die mit einigen Server-Rendering-Bibliotheken verwendet werden.

Der Code für die Initialisierung von Passport mit der Twitter-Strategie sieht folgendermaßen aus:

Um die Strategie zu initialisieren, müssen wir unseren Twitter-Anwendungsschlüssel und unser Geheimnis angeben. Wir benötigen Benutzer-E-Mails, daher setzen wir includeEmail auf true. Der Schlüssel und das Geheimnis werden verwendet, um unsere Anwendung zu identifizieren. Der letzte Parameter ist eine Rückruffunktion. In unserem Fall ruft diese Funktion die statische Methode upsertTwitterUser aus dem Benutzermodell auf, die prüft, ob der angegebene Benutzer existiert, und falls nicht, erstellt sie einen.

Umgang mit Token

In unserem Beispiel werden wir JSON Web Token (JWT) erstellen. Wir verwenden die Benutzer-ID, um ein Token zu erstellen. Das Token wird signiert und an das Frontend gesendet. Für die Erstellung von JWT verwenden wir die Bibliothek jsonwebtoken.

In der Funktion createToken erhalten wir user (auth) als Funktionsargument und verwenden die id, um ein Token zu erstellen. In diesem Fall verwenden wir my-secret als privaten Schlüssel. In der Produktion sollten wir entweder das Geheimnis für HMAC-Algorithmen oder den PEM-codierten privaten Schlüssel für RSA und ECDSA verwenden, wie in der Bibliotheksdokumentation angegeben. Die Funktion generateToken verfügt über eine Anforderung und eine Antwort und hat daher Zugriff auf den aktuellen Benutzer. Also werden wir ein Token generieren und es in das Anforderungsobjekt einfügen. sendToken ist eine Funktion, die das Token aus dem Anforderungsobjekt nimmt und in den Header einfügt.

Für die Validierung des JWT bei jeder Frontend-Anfrage verwenden wir Express-JWT. Wie verwenden wir Express-JWT? Wenn das Token gültig ist, wird req.auth mit dem dekodierten JSON-Objekt festgelegt. Die Authentifizierungsfunktion macht genau das:

Das Eigenschaftsgeheimnis sollte den gleichen Wert wie in der Funktion createToken haben. Durch Setzen von requestProperty wird der geänderte Eigenschaftsname in einen Namen umgewandelt, den wir in das dekodierte JSON-Objekt einfügen. Die Eigenschaft getToken ist eine Funktion, mit der ein Token aus der Anforderung extrahiert wird. In unserem Fall befindet sich das Token im Header x-auth-token.

Authentifizierungsablauf

Mittlerweile haben wir alle Bausteine. Wir müssen alle unsere Blöcke im System verbinden, die die Twitter-Authentifizierung durchführen. Wir werden zwei Endpunkte hinzufügen, die für die Twitter-Authentifizierung wichtig sind:

  • Endpunkt für das Abrufen von request_token - `/ auth / twitter / reverse`
  • Endpunkt für die Autorisierung - `/ auth / twitter`

Der erste Endpunkt wird für request_token von Twitter verwendet. Wenn der Endpunkt eine Anfrage für ein neues request_token erhält, sendet er eine Anfrage für ein neues request_token an Twitter. Antwort von Twitter wird verarbeitet. Die Antwort ist nicht als JSON-Objekt formatiert, daher müssen wir sie in ein JSON-Objekt umwandeln und an den Client zurücksenden, der request_token angefordert hat.

Der zweite Endpunkt erwartet einen oauth_verifier in der Anfrage. Der oauth_verifier wird dann an Twitter gesendet, damit wir ein oauth_token und ein oauth_token_secret von Twitter erhalten können. Diese beiden Parameter werden dann hinzugefügt, um sie anzufordern und an die nächste Middleware zu senden. Die nächste Middleware ist die Passport-Authentifizierungsstrategie für Twitter, mit der Benutzerinformationen von Twitter abgerufen werden. Es gibt zwei weitere Middlewares auf diesem Endpunkt. Sie erstellen unser Server-Token und geben dieses zusammen mit Benutzerinformationen als Antwort zurück.

CORS

Gegenwärtig gibt es zwei Anwendungen, die React-Anwendung und die Node.js / Express.js-Anwendung, die auf zwei Servern gehostet werden. Wenn wir CORS nicht einrichten, kann unsere React-Anwendung nicht mit dem Backend kommunizieren. Um CORS in unserem Backend zu aktivieren, verwenden wir die Bibliotheks-cors von Node.js.

Indem Sie origin auf true setzen, haben wir jedem Ursprung den Zugriff auf die Ressource gestattet. methods wird verwendet, um den CORS-Header "Access-Control-Allow-Methods" zu steuern. Mit dieser Zeichenfolge sind fast alle HTTP-Methoden zulässig. Mit den Eigenschaftsanmeldeinformationen steuern wir den CORS-Header Access-Control-Allow-Credentials. Die letzte und sehr wichtige Eigenschaft, exposedHeaders, gibt an, welche Header als Teil der Antwort verfügbar gemacht werden können. Wenn wir diese Eigenschaft nicht festlegen, ignoriert die Clientbibliothek unseren benutzerdefinierten Header mit Benutzertoken.

HTTPS - stellen Sie sicher, dass Sie es verwenden

Sie MÜSSEN HTTPS in der Produktion verwenden!

In dieser Demo arbeiten wir an unserer lokalen Maschine und wir werden NICHT HTTPS verwenden - aber Sie MÜSSEN HTTPS in der Produktion verwenden. Ohne sie sind alle API-Authentifizierungsmechanismen gefährdet.

Du wurdest gewarnt.

Fazit

Herzliche Glückwünsche! Sie haben jetzt ein voll funktionsfähiges Beispiel für die Twitter-Authentifizierung. Wir haben eine React-Anwendung erstellt, die mit der RESTful-API kommunizieren und einen Benutzer mit einem Twitter-Konto authentifizieren kann. Wir haben auch eine Node.js / Express.js-Anwendung erstellt, die zu diesem Zweck eine RESTful-API bereitstellt.

Der vollständige Quellcode dieses Projekts befindet sich im folgenden GitHub-Repository:

Ich hoffe, Sie haben dieses Tutorial genossen und ein oder zwei Dinge gelernt. Es gibt noch viel mehr zu tun, aber dies sollte Ihnen den Einstieg erleichtern.

Wenn Sie Fragen haben, können Sie mich gerne auf Twitter @ robince885 oder in den Kommentaren unten kontaktieren. Weitere Informationen über mich finden Sie auf LinkedIn:

Ich möchte mich bei @vdimitrieski für seine Hilfe und Unterstützung bedanken. Sie können sich auch gerne an ihn wenden. Weitere Informationen über ihn finden Sie auf seinem LinkedIn: