Share
Det är redan ett väletablerat faktum att lösenorden är i sig svag i naturen. Därför frågar slutanvändare att skapa starka lösenord för varje applikation de använder, gör det enkelt att göra saken värre.
En enkel lösning är att låta användarna autentisera via sina befintliga sociala konton som Facebook, Twitter, Google, etc. I den här artikeln kommer vi att göra just det och lägga till den här sociala inloggningsfunktionen för provet Nodprogrammet som utvecklats i den första delen av denna autentiseringsserie, så att vi kommer att kunna autentisera via våra Facebook- och Twitter-konton med hjälp av Passport middleware.
Om du inte har kollat på föregående artikel rekommenderar jag att du går igenom det, eftersom vi kommer att bygga på grunden som lagts av den artikeln och lägga till nya strategier, rutter och synpunkter på det.
För den oinitierade sociala inloggningen är en typ av Enkelt inloggning med befintlig information från sociala nätverkssajter som Facebook, Twitter etc., där användarna normalt förväntas ha konton redan skapade.
Social inloggning bygger till stor del på ett autentiseringsschema som OAuth 2.0. För att lära dig mer om de olika inloggningsflödena, stödjer OAuth, läs den här artikeln. Vi väljer Passport för att hantera social inloggning för oss, eftersom det ger olika moduler för olika OAuth-leverantörer, det vill säga Facebook, Twitter, Google, GitHub, etc. I den här artikeln kommer vi att använda pass-facebook och pass-twitter moduler att tillhandahålla inloggningsfunktioner via befintliga Facebook- eller Twitter-konton.
För att aktivera Facebook-autentisering måste vi först skapa en Facebook-app med hjälp av Facebook Developer Portal. Notera App ID och App Secret, och ange återuppringningsadressen genom att gå till inställningar och specificera Webbadress i Hemsida avsnitt för ansökan. Se även till att ange en giltig e-postadress för Kontakta E-post fält. Det är nödvändigt att kunna göra denna app offentlig och tillgänglig för allmänheten.
Gå sedan till Status och granskning sektion och vrid reglaget till Ja för att göra appen offentlig. Vi skapar en config-fil, fb.js, för att hålla den konfigurationsinformation som behövs för att ansluta till Facebook.
// facebook app inställningar - fb.js module.exports = 'appID': '',' appSecret ':' ',' callbackUrl ':' http: // localhost: 3000 / login / facebook / callback '
Tillbaka i vår Node-applikation definierar vi nu en Passstrategi för autentisering med Facebook med hjälp av FacebookStrategy modul genom att använda ovanstående inställningar för att hämta användarens Facebook-profil och visa detaljerna i vyn.
Accentsconagua
passport.use ('facebook', ny FacebookStrategy (clientID: fbConfig.appID, clientSecret: fbConfig.appSecret, callbackURL: fbConfig.callbackUrl, // facebook skickar tillbaka tokens och profilfunktionen (access_token, refresh_token, profil, gjort ) // asynkron process.nextTick (funktion () // hitta användaren i databasen baserat på deras Facebook-id User.findOne ('id': profile.id, funktion (fel, användare) // if Det finns ett fel, stoppa allt och returnera det / / det vill säga ett fel som kopplar till databasen om (err) returneras (err); // om användaren hittas, logga in dem om (användaren) , användare); // användaren funnit, returnera den användaren annars // om det inte finns någon användare med det här facebook-idet, skapa dem var newUser = ny användare (); // ställa in all facebook information i vår användarmodell newUser.fb.id = profile.id; // ställa in användarna facebook id newUser.fb.access_token = access_token; // vi sparar token som facebook ger användaren newUser.fb.firstName = profile.n ame.givenName; newUser.fb.lastName = profile.name.familyName; // titta på användarprofil för passet för att se hur namn returneras newUser.fb.email = profile.emails [0] .value; // facebook kan returnera flera e-postmeddelanden så vi tar den första // spara vår användare till databasen newUser.save (funktion (err) om (err) throw err; // om det är framgångsrikt, returnera den nya användaravkastningen null, newUser);); ); ); ));Nu måste vi lägga till vissa rutter för att möjliggöra inloggning med Facebook och för hantering av återuppringning efter att användaren har auktoriserat ansökan att använda sitt Facebook-konto.
// rutt för facebook-autentisering och inloggning // olika omfång medan du loggar in router.get ('/ login / facebook', passport.authenticate ('facebook', scope: 'email')); // hantera återuppringningen efter att facebook har autentiserat användarrouter.get ('/ login / facebook / callback', passport.authenticate ('facebook', successRedirect: '/ home', failureRedirect: '/'));Inloggningssidan för vår demo-applikation ser så här ut:
När du klickar på Logga in med Facebook knappen, kommer den att försöka autentisera med Facebook. Om du redan är inloggad på Facebook visas den nedanstående dialogrutan och frågar om ditt tillstånd, annars frågar du dig om att logga in på Facebook och visa den här dialogen.
Om du tillåter appen att ta emot din offentliga profil och e-postadress, kommer vår registrerade återuppringningsfunktion att ringas med användaruppgifterna. Vi kan spara dessa för framtida referens eller visa dem eller helt enkelt välja att ignorera dem, beroende på vad du vill göra med informationen. Känn dig fri att hoppa framåt i tid och kolla hela koden i denna git repo.
Det skulle vara bra att notera att bortsett från den grundläggande informationen som den här demoprogrammet ger, kan du använda samma autentiseringsmekanism för att extrahera mer användbar information om användaren, som hans vänlista, genom att använda lämplig räckvidd och använda Facebook API med åtkomsttoken mottagen med användarprofilen.
En liknande autentiseringsmodul måste vara uppkopplad för hantering av autentisering via Twitter och Pass-chips för att hjälpa till med sitt pass-twitter-modul.
För det första måste du skapa en ny Twitter App med dess Application Management-gränssnitt. En sak att notera här är att när det gäller att ange återuppringningsadressen tycks inte Twitter fungera bra med det om "localhost" anges i fältet Återuppringningsadress. För att övervinna denna begränsning under utveckling kan du använda den speciella loopbackadressen eller "127.0.0.1" i stället för "localhost". Efter att du skapat appen, notera ner följande API-nyckel och hemlig information i en config-fil enligt följande:
// twitter app inställningar - twitter.js module.exports = 'apikey': '',' apisecret ':' ',' callbackUrl ':' http://127.0.0.1:3000/login/twitter/callback '
Inloggningsstrategin för Twitter är en förekomst av TwitterStrategyoch det ser ut så här:
passport.use (twitterConfig.callbackURL, funktion (token, tokenSecret, profil, gjort) // gör koden asynkron // User.findOne kommer inte att skjuta tills vi har all vår data tillbaka från Twitter process.nextTick (funktion () User.findOne ('twitter.id': profile.id, funktion (fel, användare) // if Det finns ett fel, stoppa allt och returnera det / / det vill säga ett fel som kopplar till databasen om (err) returneras (err); // om användaren hittas loggar du in dem om (användaren) användare); // användaren funnit, returnera den användaren annars // om det inte finns någon användare, skapa dem var newUser = ny användare (); // ange alla användardata som vi behöver newUser.twitter.id = profil .id; newUser.twitter.token = token; newUser.twitter.username = profile.username; newUser.twitter.displayName = profile.displayName; newUser.twitter.lastStatus = profile._json.status.text; // spara vår användare in i databas newUser.save (funktion (err) om (err) throw err; returnera gjort (null, newUser); ); ); ); ));// rutten för twitter-autentisering och inloggning // olika omfång medan du loggar in router.get ('/ login / twitter', passport.authenticate ('twitter')); // hantera återuppringningen efter att facebook har autentiserat användarrouter.get ('/ login / twitter / callback', passport.authenticate ('twitter', successRedirect: '/ twitter', failureRedirect: '/')); / * GET Twitter Visa sida * / router.get ('/ twitter', isAuthenticated, funktion (req, res) res.render ('twitter', user: req.user););För att testa detta, var noga med att använda http://127.0.0.1:http: // localhost:. Som vi redan har nämnt ovan verkar det vara ett problem när du byter tokens med Twitter med "localhost" som värdnamn. När du klickar på Logga in med Twitter knappen, som förväntat ber det om användarens samtycke att tillåta att denna applikation använder Twitter.
När du tillåter programmet att komma åt ditt Twitter-konto och begränsad information, kallas återuppringningsbehandlaren som är registrerad i inloggningsstrategin, som sedan används för att lagra dessa uppgifter i en backend-databas
Och där har du det !! Vi har framgångsrikt lagt till Facebook och Twitter-inloggningar i vår provprogram utan att skriva mycket kod och hantera de komplicerade felaktigheterna med autentiseringsmekanismen genom att låta Passport göra den tunga lyftningen. Liknande inloggningsstrategier kan skrivas för en mängd olika leverantörer som Passport stöder. Koden för hela applikationen finns i detta git-repository. Ta gärna ut det och använd det i dina egna projekt.
