Share
Het is al een bekend gegeven dat wachtwoorden van nature zwak zijn. Dus het vragen aan eindgebruikers om sterke wachtwoorden te maken voor elke toepassing die ze gebruiken maakt de zaak alleen maar erger.
Een eenvoudige oplossing is om gebruikers te laten authenticeren via hun bestaande sociale accounts zoals Facebook, Twitter, Google, etc. In dit artikel gaan we precies dat doen en deze sociale login-mogelijkheid toevoegen aan de voorbeeldknooptoepassing die is ontwikkeld in het eerste deel van deze authenticatieserie, zodat we ons kunnen authenticeren via onze Facebook- en Twitter-accounts met behulp van Passport-middleware.
Als je het vorige artikel niet hebt gecontroleerd, raad ik je aan dit te doen, omdat we zullen voortbouwen op de basis die in dat artikel is gelegd en nieuwe strategieën, routes en weergaven eraan toevoegen.
Voor niet-ingewijden, sociale login is een soort Single Sign-on waarbij gebruik wordt gemaakt van bestaande informatie van sociale netwerksites zoals Facebook, Twitter, enz., Waar normaal gesproken wordt verwacht dat gebruikers al accounts hebben aangemaakt.
Social login is meestal afhankelijk van een authenticatieschema zoals OAuth 2.0. Lees dit artikel voor meer informatie over de verschillende inlogstromen die OAuth ondersteunt. We kiezen Passport om sociale login voor ons af te handelen, omdat het verschillende modules biedt voor een verscheidenheid aan OAuth-providers, of het nu Facebook, Twitter, Google, GitHub, etc. is. In dit artikel gebruiken we de paspoort-facebook en paspoort-twitter modules om inlogfunctionaliteit aan te bieden via bestaande Facebook- of Twitter-accounts.
Om Facebook-verificatie mogelijk te maken, moeten we eerst een Facebook-app maken met behulp van de Facebook Developer Portal. Noteer de app-ID en het app-geheim en geef de callback-URL op door naar te gaan instellingen en het opgeven van de Site-URL in de Website sectie voor de toepassing. Zorg er ook voor dat u een geldig e-mailadres opgeeft voor de contact email veld. Het is vereist om deze app openbaar en toegankelijk te maken voor het publiek.
Ga vervolgens naar de Status en beoordeling sectie en draai de schuifregelaar naar Ja om de app openbaar te maken. We maken een configuratiebestand, fb.js, om deze configuratie-informatie vast te houden die nodig is om verbinding te maken met Facebook.
// facebook app-instellingen - fb.js module.exports = 'appID': '',' appSecret ':' ',' callbackUrl ':' http: // localhost: 3000 / login / facebook / callback '
Terug in onze Node-applicatie, definiëren we nu een paspoortstrategie voor authenticatie met Facebook via de FacebookStrategy module, gebruikmakend van de bovenstaande instellingen om het Facebook-profiel van de gebruiker op te halen en de details in de weergave weer te geven.
Accentsconagua
passport.use ('facebook', nieuwe FacebookStrategy (clientID: fbConfig.appID, clientSecret: fbConfig.appSecret, callbackURL: fbConfig.callbackUrl, // facebook zal de tokens en profielfunctie terugsturen (access_token, refresh_token, profiel, klaar ) // asynchronous process.nextTick (function () // zoek de gebruiker in de database op basis van hun Facebook-id User.findOne ('id': profile.id, function (err, user) // if er is een fout, stop alles en retourneer die // ie een fout bij het verbinden met de database als (err) return done (err); // als de gebruiker gevonden is, log dan in als (gebruiker) return done (null , gebruiker); // gebruiker gevonden, geef die gebruiker terug anders // als er geen gebruiker is gevonden met die facebook-id, maak ze var newUser = nieuwe gebruiker (); // stel alle facebook-informatie in ons gebruikersmodel in newUser.fb.id = profile.id; // stel de gebruikers in facebook id newUser.fb.access_token = access_token; // we zullen het token dat facebook aan de gebruiker geeft bewaren newUser.fb.firstName = profile.n ame.givenName; newUser.fb.lastName = profile.name.familyName; // bekijk het paspoort gebruikersprofiel om te zien hoe de namen worden geretourneerd newUser.fb.email = profile.emails [0] .value; // Facebook kan meerdere e-mails retourneren, zodat we de eerste nemen // onze gebruiker opslaan in de database newUser.save (functie (err) if (err) gooi fout; // als het lukt, wordt de nieuwe gebruiker teruggestuurd ( null, newUser);); ); ); ));Nu moeten we bepaalde routes toevoegen om in te loggen bij Facebook en om de callback af te handelen nadat de gebruiker de toepassing heeft geautoriseerd om zijn of haar Facebook-account te gebruiken.
// route voor facebook authenticatie en login // verschillende scopes tijdens het inloggen in router.get ('/ login / facebook', passport.authenticate ('facebook', scope: 'email')); // behandel de callback nadat Facebook de gebruiker router.get ('/ login / facebook / callback', passport.authenticate ('facebook', succesRedirect: '/ home', failureRedirect: '/')) heeft geverifieerd;De inlogpagina voor onze demotoepassing ziet er als volgt uit:
Wanneer u op klikt Inloggen met Facebook knop, zal het proberen te authenticeren met Facebook. Als u al bent aangemeld bij Facebook, wordt het onderstaande dialoogvenster weergegeven waarin om uw toestemming wordt gevraagd, anders wordt u gevraagd u aan te melden bij Facebook en dit dialoogvenster weer te geven.
Als u toestaat dat de app uw openbare profiel en e-mailadres ontvangt, wordt onze geregistreerde callback-functie gebeld met de gebruikersgegevens. We kunnen deze opslaan voor toekomstige referentie of ze weergeven of gewoon kiezen om ze te negeren, afhankelijk van wat u met de informatie wilt doen. Voel je vrij om vooruit te springen in de tijd en bekijk de volledige code in deze git repo.
Het zou goed zijn om op te merken dat naast de basisinformatie die deze demo-app biedt, u hetzelfde authenticatiemechanisme kunt gebruiken om meer nuttige informatie over de gebruiker te extraheren, zoals zijn vriendenlijst, door het juiste bereik te gebruiken en de Facebook-API's te gebruiken met het toegangstoken ontvangen met het gebruikersprofiel.
Een vergelijkbare authenticatiemodule moet worden aangesloten voor het afhandelen van authenticatie via Twitter en paspoortchips in om te helpen met zijn paspoort-twittermodule.
Allereerst moet u een nieuwe Twitter-app maken met behulp van de interface voor toepassingsbeheer. Een ding om op te merken is dat tijdens het specificeren van de callback-URL, Twitter niet goed lijkt te werken als "localhost" wordt gegeven in het veld callback-URL. Om deze beperking tijdens het ontwikkelen te omzeilen, zou je het speciale loopback-adres of "127.0.0.1" kunnen gebruiken in plaats van "localhost". Noteer na het maken van de app de volgende API-sleutel en geheime informatie in een configuratiebestand als volgt:
// app-instellingen voor twitter - twitter.js module.exports = 'apikey': '',' apisecret ':' ',' callbackUrl ':' http://127.0.0.1:3000/login/twitter/callback '
De inlogstrategie voor Twitter is daar een voorbeeld van TwitterStrategyen het ziet er als volgt uit:
passport.use ('twitter', nieuwe TwitterStrategy (consumerKey: twitterConfig.apikey, consumerSecret: twitterConfig.apisecret, callbackURL: twitterConfig.callbackURL, function (token, tokenSecret, profile, done) // maak de code asynchroon // User.findOne zal niet vuren totdat we al onze gegevens terug hebben van Twitter process.nextTick (function () User.findOne ('twitter.id': profile.id, function (err, user) // if er is een fout, stop alles en retourneer die // ie een fout die verbinding maakt met de database als (err) return done (err); // is als de gebruiker gevonden is, log dan in als (gebruiker) return done (null, gebruiker); // gebruiker gevonden, geef die gebruiker terug anders // als er geen gebruiker is, maak ze var newUser = nieuwe gebruiker (); // stel alle gebruikersgegevens in die we nieuw nodig hebben User.twitter.id = profile .id; newUser.twitter.token = token; newUser.twitter.username = profile.username; newUser.twitter.displayName = profile.displayName; newUser.twitter.lastStatus = profile._json.status.text; // bewaar onze gebruiker in de database newUser.save (functie (err) if (err) gooi fout; return done (null, newUser); ); ); ); ));// route voor twitterverificatie en inloggen // verschillende scopes tijdens het inloggen in router.get ('/ login / twitter', passport.authenticate ('twitter')); // behandel de callback nadat Facebook de gebruiker router.get ('/ login / twitter / callback', passport.authenticate ('twitter', succesRedirect: '/ twitter', failureRedirect: '/')) heeft geverifieerd; / * KRIJGEN Twitter View Page * / router.get ('/ twitter', isAuthenticated, function (req, res) res.render ('twitter', user: req.user););Om dit te testen, moet je het gebruiken http://127.0.0.1:http: // localhost:. Zoals we hierboven al vermeldden, lijkt er een probleem te zijn bij het uitwisselen van tokens met Twitter met "localhost" als de hostnaam. Door op de te klikken Inloggen met Twitter knop, zoals verwacht, vraagt het de toestemming van de gebruiker om deze applicatie Twitter te laten gebruiken.
Als u de toepassing toegang verleent tot uw Twitter-account en beperkte informatie, wordt de callback-handler gebeld die is geregistreerd in de inlogstrategie en die vervolgens wordt gebruikt om deze gegevens op te slaan in een back-enddatabase
En daar heb je het !! We hebben met succes Facebook- en Twitter-aanmeldingen aan onze voorbeeldtoepassing toegevoegd zonder veel code te schrijven en de complexiteit van het authenticatiemechanisme aan te pakken door Passport het zware werk te laten doen. Vergelijkbare inlogstrategieën kunnen worden geschreven voor verschillende providers die door Passport worden ondersteund. De code voor de hele applicatie is te vinden in deze git repository. Voel je vrij om het uit te breiden en te gebruiken in je eigen projecten.
