Share
Es ist bereits allgemein bekannt, dass Kennwörter von Natur aus schwach sind. Wenn Sie also die Endbenutzer bitten, für jede Anwendung, die sie verwenden, sichere Kennwörter zu erstellen, wird dies schlimmer.
Eine einfache Problemumgehung besteht darin, Benutzern die Authentifizierung über ihre vorhandenen sozialen Konten wie Facebook, Twitter, Google usw. zu ermöglichen. In diesem Artikel werden wir genau dies tun und diese soziale Anmeldefunktion der im ersten Teil von diese Authentifizierungsserie, so dass wir uns über unsere Facebook- und Twitter-Konten mit Passport-Middleware authentifizieren können.
Wenn Sie den vorherigen Artikel nicht ausgecheckt haben, würde ich empfehlen, dass Sie ihn durchgehen, da wir auf der Grundlage dieses Artikels aufbauen und neue Strategien, Routen und Ansichten hinzufügen.
Social Login ist für Einzelne eine Art Single Sign-On, bei dem vorhandene Informationen von Websites sozialer Netzwerke wie Facebook, Twitter usw. verwendet werden, bei denen normalerweise von Benutzern erwartet wird, dass sie bereits Konten haben.
Die soziale Anmeldung beruht im Wesentlichen auf einem Authentifizierungsschema wie OAuth 2.0. Lesen Sie diesen Artikel, um mehr über die verschiedenen von OAuth unterstützten Anmeldeflows zu erfahren. Wir entscheiden uns für Passport, um Social Login für uns durchzuführen, da es verschiedene Module für eine Vielzahl von OAuth-Providern bereitstellt, sei es Facebook, Twitter, Google, GitHub usw. In diesem Artikel werden wir die Passport-Facebook- und Passport-Twitter-Module verwenden Login-Funktionalität über bestehende Facebook- oder Twitter-Accounts bereitzustellen.
Um die Facebook-Authentifizierung zu aktivieren, müssen Sie zunächst eine Facebook-App mit dem Facebook Developer Portal erstellen. Notieren Sie sich die App-ID und das App Secret, und geben Sie die Callback-URL an, indem Sie zu gehen die Einstellungen und die Angabe der Seiten-URL in dem Webseite Abschnitt für die Anwendung. Vergewissern Sie sich außerdem, dass Sie eine gültige E-Mail-Adresse für das Telefon eingeben Kontakt E-mail Feld. Es ist erforderlich, um diese App öffentlich und für die Öffentlichkeit zugänglich zu machen.
Gehen Sie als nächstes zum Status & Überprüfung Abschnitt und drehen Sie den Schieberegler auf Ja um die App öffentlich zu machen. Wir erstellen eine Konfigurationsdatei, fb.js, die diese Konfigurationsinformationen enthält, die für die Verbindung mit Facebook erforderlich sind.
// Facebook-App-Einstellungen - fb.js module.exports = 'appID': '',' appSecret ':' ',' callbackUrl ':' http: // localhost: 3000 / login / facebook / callback '
Zurück in unserer Node-Anwendung definieren wir jetzt eine Passport-Strategie für die Authentifizierung bei Facebook mithilfe von FacebookStrategie Verwenden Sie die obigen Einstellungen, um das Facebook-Profil des Benutzers abzurufen und die Details in der Ansicht anzuzeigen.
Accentsconagua
passport.use ('facebook', neue FacebookStrategy (clientID: fbConfig.appID, clientSecret: fbConfig.appSecret, callbackURL: fbConfig.callbackUrl), // Facebook sendet die Token und die Profilfunktion (access_token, refresh_token, Profil abgeschlossen ) // asynchronous process.nextTick (function () // Finde den Benutzer in der Datenbank anhand seiner Facebook-ID User.findOne ('id': profile.id, function (err, user) // if Es gibt einen Fehler, stoppen Sie alles und geben Sie // zurück, dh einen Fehler bei der Verbindung zur Datenbank, wenn (err) return done (err); // wenn der Benutzer gefunden wird, melden Sie ihn dann an, wenn (user) return done (null) , Benutzer); // Benutzer gefunden, diesen Benutzer zurückgeben else // Wenn mit dieser Facebook-ID kein Benutzer gefunden wurde, erstellen Sie diese. var newUser = new User (); // Alle Facebook-Informationen in unserem Benutzermodell festlegen newUser.fb.id = profile.id; // Benutzer der Facebook-ID setzen newUser.fb.access_token = access_token; // Wir speichern das von Facebook bereitgestellte Token für den Benutzer newUser.fb.firstName = profile.n ame.givenName; newUser.fb.lastName = profile.name.familyName; // Schauen Sie sich das Passport-Benutzerprofil an, um zu sehen, wie Namen zurückgegeben werden. newUser.fb.email = profile.emails [0] .value; // facebook kann mehrere E-Mails zurücksenden, so dass der erste Benutzer // in die Datenbank gespeichert wird. newUser.save (function (err) if (err) throw err; // Wenn erfolgreich, geben Sie den neuen Benutzer zurück. null, newUser);); ); ); ));Nun müssen wir bestimmte Routen hinzufügen, um die Anmeldung bei Facebook zu ermöglichen und den Rückruf abzuwickeln, nachdem der Benutzer die Anwendung zur Verwendung seines Facebook-Kontos autorisiert hat.
// Route für die Facebook-Authentifizierung und Anmeldung // verschiedene Bereiche während der Anmeldung in router.get ('/ login / facebook', passport.authenticate ('facebook', scope: 'email')); // den Rückruf bearbeiten, nachdem facebook den Benutzer router.get authentifiziert hat ('/ login / facebook / callback', passport.authenticate ('facebook', successRedirect: '/ home', failureRedirect: '/'));Die Anmeldeseite für unsere Demoanwendung sieht folgendermaßen aus:
Wenn Sie auf klicken Mit Facebook einloggen Schaltfläche, wird versucht, sich mit Facebook zu authentifizieren. Wenn Sie bereits bei Facebook angemeldet sind, wird das folgende Dialogfeld angezeigt, in dem Sie um Erlaubnis gefragt werden. Andernfalls werden Sie aufgefordert, sich bei Facebook anzumelden und dieses Dialogfeld anzuzeigen.
Wenn Sie zulassen, dass die App Ihr öffentliches Profil und Ihre E-Mail-Adresse erhält, wird unsere registrierte Rückruffunktion mit den Benutzerdetails aufgerufen. Wir können diese als zukünftige Referenz speichern oder anzeigen oder einfach ignorieren, je nachdem, was Sie mit den Informationen machen möchten. Fühlen Sie sich frei, um rechtzeitig voranzukommen und sehen Sie sich den gesamten Code in diesem Git-Repo an.
Es ist gut zu beachten, dass Sie neben den grundlegenden Informationen, die diese Demo-App bietet, den gleichen Authentifizierungsmechanismus verwenden können, um weitere nützliche Informationen über den Benutzer wie seine Freundesliste zu extrahieren, indem Sie den entsprechenden Geltungsbereich verwenden und die Facebook-APIs verwenden das Zugriffstoken, das mit dem Benutzerprofil empfangen wurde.
Ein ähnliches Authentifizierungsmodul muss für die Authentifizierung über Twitter und Passport-Chips für das Pass-Twitter-Modul angeschlossen werden.
Zunächst müssen Sie eine neue Twitter-App mit der Anwendungsverwaltungsoberfläche erstellen. Hierbei ist zu beachten, dass Twitter bei der Angabe der Callback-URL scheinbar nicht gut damit funktioniert, wenn im Feld für die Callback-URL "localhost" angegeben ist. Um diese Einschränkung während der Entwicklung zu überwinden, können Sie anstelle von "localhost" die spezielle Loopback-Adresse oder "127.0.0.1" verwenden. Notieren Sie sich nach dem Erstellen der App die folgenden API-Schlüssel und geheimen Informationen in einer Konfigurationsdatei wie folgt:
// Twitter-App-Einstellungen - twitter.js module.exports = 'apikey': '',' apisecret ':' ',' callbackUrl ':' http://127.0.0.1:3000/login/twitter/callback '
Die Login-Strategie für Twitter ist eine Instanz von TwitterStrategieund es sieht so aus:
passport.use ('twitter', neue TwitterStrategy (consumerKey: twitterConfig.apikey, consumerSecret: twitterConfig.apisecret, callbackURL: twitterConfig.callbackURL), Funktion (token, tokenSecret, Profil, fertig) // den Code asynchron erstellen // User.findOne wird erst ausgelöst, wenn alle Daten aus Twitter process.nextTick (function () User.findOne ('twitter.id': profile.id, function (err, user) // if Es gibt einen Fehler, stoppen Sie alles und geben Sie // zurück, dh einen Fehler bei der Verbindung zur Datenbank, wenn (err) return done (err); // wenn der Benutzer gefunden wird, dann melden Sie ihn an if (user) return done (null, user); // Benutzer gefunden, diesen Benutzer zurückgeben else // Wenn kein Benutzer vorhanden ist, erstellen Sie ihn. var newUser = new User (); // Alle Benutzerdaten setzen, die newUser.twitter.id = profile benötigen .id; newUser.twitter.token = token; newUser.twitter.username = profile.username; newUser.twitter.displayName = profile.displayName; newUser.twitter.lastStatus = profile._json.status.text; // Speichern Sie unseren Benutzer in die Datenbank newUser.save (function (err) if (err) werfen err; return done (null, neuer Benutzer); ); ); ); ));// Route für Twitter-Authentifizierung und Anmeldung // unterschiedliche Bereiche während der Anmeldung in router.get ('/ login / twitter', passport.authenticate ('twitter')); // den Rückruf bearbeiten, nachdem facebook den Benutzer router.get authentifiziert hat ('/ login / twitter / callback', passport.authenticate ('twitter', successRedirect: '/ twitter', failureRedirect: '/')); / * GET Twitter View Page * / router.get ('/ twitter', isAuthenticated, Funktion (req, res) res.render ('twitter', user: req.user););Um dies zu testen, verwenden Sie unbedingt http://127.0.0.1:http: // localhost:. Wie bereits oben erwähnt, scheint es ein Problem zu geben, wenn Sie mit Twitter Token mit "localhost" als Hostnamen austauschen. Beim Klicken auf die Mit Twitter anmelden Diese Schaltfläche fordert erwartungsgemäß die Zustimmung des Benutzers zur Verwendung von Twitter durch diese Anwendung.
Wenn Sie der Anwendung den Zugriff auf Ihr Twitter-Konto und eingeschränkte Informationen erlauben, wird der in der Anmeldestrategie registrierte Callback-Handler aufgerufen, der dann zum Speichern dieser Details in einer Back-End-Datenbank verwendet wird
Und da hast du es !! Wir haben erfolgreich Facebook- und Twitter-Logins zu unserer Beispielanwendung hinzugefügt, ohne viel Code zu schreiben und die mit dem Authentifizierungsmechanismus verbundenen Feinheiten zu handhaben, indem Passport das schwere Abheben überlassen wurde. Ähnliche Anmeldestrategien können für eine Reihe von Anbietern geschrieben werden, die Passport unterstützt. Den Code für die gesamte Anwendung finden Sie in diesem git-Repository. Fühlen Sie sich frei, es zu erweitern und in Ihren eigenen Projekten zu verwenden.
