Share
Det er allerede et velkjent faktum at passord er iboende svake i naturen. Derfor spør sluttbrukere å lage sterke passord for hver applikasjon de bruker, gjør det bare verre.
En enkel løsning er å la brukerne autentisere via deres eksisterende sosiale kontoer som Facebook, Twitter, Google, etc. I denne artikkelen skal vi gjøre nettopp det og legge til denne sosiale innloggingsfunksjonen til prøven Node-applikasjonen utviklet i første del av denne autentiseringsserien, slik at vi vil kunne godkjenne via våre Facebook- og Twitter-kontoer ved hjelp av Passport middleware.
Hvis du ikke har sjekket ut forrige artikkel, vil jeg anbefale at du går gjennom det, da vi skal bygge på grunnlaget som er lagt av den artikkelen og legge til nye strategier, ruter og synspunkter på det.
For uinitiert, er sosiale pålogginger en type Enkelt pålogging ved hjelp av eksisterende informasjon fra sosiale nettverkssider som Facebook, Twitter, etc., der brukere normalt forventes å ha kontoer allerede opprettet.
Sosial pålogging baserer seg for det meste på en autentiseringsordning som OAuth 2.0. For å lære mer om de forskjellige innloggingsflytene, støtter OAuth, lese denne artikkelen. Vi velger Passport for å håndtere sosial login for oss, da det gir forskjellige moduler for en rekke OAuth-leverandører, det være seg Facebook, Twitter, Google, GitHub, etc. I denne artikkelen bruker vi pass-facebook og pass-twitter moduler å gi innloggingsfunksjonalitet via eksisterende Facebook- eller Twitter-kontoer.
For å aktivere Facebook-godkjenning må vi først opprette en Facebook-app ved hjelp av Facebook Developer Portal. Merk ned App ID og App Secret, og angi tilbakeringingsadressen ved å gå til innstillinger og spesifisere Nettstedets nettadresse i nettsted seksjon for søknaden. Pass også på å skrive inn en gyldig e-postadresse for Kontakt Epost felt. Det er pålagt å kunne gjøre denne appen offentlig og tilgjengelig for publikum.
Deretter går du til Status og gjennomgang delen og sving glidebryteren til Ja for å gjøre appen offentlig. Vi lager en config-fil, fb.js, for å holde denne konfigurasjonsinformasjonen som kreves for å koble til Facebook.
// facebook app innstillinger - fb.js module.exports = 'appID': '',' appSecret ':' ',' callbackUrl ':' http: // localhost: 3000 / login / facebook / callback '
Tilbake i vårt Knuteprogram, definerer vi nå en Passportstrategi for autentisering med Facebook ved hjelp av FacebookStrategy modul, ved å bruke de ovennevnte innstillingene for å hente brukerens Facebook-profil og vise detaljene i visningen.
Accentsconagua
passport.use ('facebook', ny FacebookStrategy (clientID: fbConfig.appID, clientSecret: fbConfig.appSecret, callbackURL: fbConfig.callbackUrl, // facebook sender tilbake tokens og profilfunksjonen (access_token, refresh_token, profil, ferdig ) // asynchronous process.nextTick (funksjon () // finner brukeren i databasen basert på deres Facebook-ID User.findOne ('id': profile.id, funksjon (feil, bruker) // hvis Det er en feil, stopp alt og returner det / / det er en feil som kobler til databasen hvis (err) returneres ferdig (feil); // hvis brukeren er funnet, logg dem inn hvis (bruker) , bruker); // bruker funnet, returner den brukeren annet // hvis det ikke finnes noen bruker med det facebook-ID-en, opprett dem var newUser = ny bruker (); // sett alle facebook-informasjonene i vår brukermodell newUser.fb.id = profile.id; // sett brukerne facebook id newUser.fb.access_token = access_token; // vi vil lagre token som facebook gir til brukeren newUser.fb.firstName = profile.n ame.givenName; newUser.fb.lastName = profile.name.familyName; // se passeprofilen for å se hvordan navnene returneres newUser.fb.email = profile.emails [0] .value; // facebook kan returnere flere e-postadresser, så vi tar den første // lagre brukeren vår til databasen newUser.save (funksjon (feil) hvis (feil) kaste err; // hvis vellykket, returner den nye brukeren returnert null, newUser);); ); ); ));Nå må vi legge til visse ruter for å aktivere innlogging med Facebook og for å håndtere tilbakeringingen etter at brukeren har godkjent søknaden til å bruke hans eller hennes Facebook-konto.
// rute for facebook autentisering og logg inn // forskjellige mål mens du logger inn router.get ('/ login / facebook', passport.authenticate ('facebook', scope: 'email')); // håndter tilbakekallingen etter at facebook har autentisert brukerens router.get ('/ login / facebook / callback', passport.authenticate ('facebook', successRedirect: '/ home', failureRedirect: '/'));Påloggingssiden for vår demo-applikasjon ser slik ut:
Når du klikker på Logg inn med Facebook knappen, vil den prøve å autentisere med Facebook. Hvis du allerede er logget inn på Facebook, vil den vise dialogboksen som ber om din tillatelse, ellers vil det be deg om å logge på Facebook og deretter vise denne dialogboksen.
Hvis du tillater appen å motta din offentlige profil og e-postadresse, blir vår registrerte tilbakeringingsfunksjon kalt med brukerens detaljer. Vi kan lagre disse for fremtidig referanse eller vise dem eller bare velge å ignorere dem, avhengig av hva du vil gjøre med informasjonen. Du er velkommen til å hoppe framover i tide og sjekke ut hele koden i denne git repo.
Det vil være godt å merke seg at bortsett fra grunnleggende informasjonen som denne demoappen gir, kan du bruke samme autentiseringsmekanisme for å trekke ut mer nyttig informasjon om brukeren, som vennelisten, ved å bruke riktig omfang og bruke Facebook APIer med tilgangstoken mottatt med brukerprofilen.
En lignende autentiseringsmodul må kobles opp for å håndtere godkjenning via Twitter, og Passport-chips inn for å hjelpe med pass-twitter-modulen.
For det første må du opprette en ny Twitter App ved hjelp av Application Management-grensesnittet. En ting å merke seg her er at når du spesifiserer tilbakekallingsadressen, virker Twitter ikke fint med det hvis "localhost" er gitt i tilbakekallingsadressefeltet. For å overvinne denne begrensningen mens du utvikler, kan du bruke den spesielle loopback-adressen eller "127.0.0.1" i stedet for "localhost". Når du har opprettet appen, merker du ned følgende API-nøkkel og hemmelig informasjon i en config-fil som følger:
// twitter app innstillinger - twitter.js module.exports = 'apikey': '',' apisecret ':' ',' callbackUrl ':' http://127.0.0.1:3000/login/twitter/callback '
Innloggingsstrategien for Twitter er en forekomst av TwitterStrategyog det ser slik ut:
passport.use ("twitter", ny TwitterStrategy (consumerKey: twitterConfig.apikey, consumerSecret: twitterConfig.apisecret, callbackURL: twitterConfig.callbackURL, funksjon (token, tokenSecret, profil, ferdig) // gjør koden asynkron // User.findOne vil ikke brenne til vi har alle våre data tilbake fra Twitter process.nextTick (funksjon () User.findOne ('twitter.id': profile.id, funksjon (feil, bruker) // if det er en feil, stopp alt og returner det / / det er en feil som kobler til databasen hvis (err) returneres ferdig (feil); // hvis brukeren er funnet, logg dem inn hvis (bruker) brukeren); // bruker funnet, returner den brukeren annet // hvis det ikke er noen bruker, opprett dem var newUser = ny bruker (); // sett alle brukerdataene vi trenger 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; // lagre brukeren inn i det database newUser.save (funksjon (feil) hvis (feil) kaste err; returnere ferdig (null, newUser); ); ); ); ));// rute for kvitteringsautentisering og innlogging // forskjellige mål mens du logger inn router.get ('/ login / twitter', passport.authenticate ('twitter')); // håndter tilbakekallingen etter at facebook har autentisert brukerens router.get ('/ login / twitter / callback', passport.authenticate ('twitter', successRedirect: '/ twitter', failureRedirect: '/')); / * GET Twitter Se side * / router.get ('/ twitter', erAuthenticated, funksjon (req, res) res.render ('twitter', user: req.user););For å teste dette, må du huske å bruke http://127.0.0.1:http: // localhost:. Som vi allerede har nevnt ovenfor, ser det ut til å være et problem mens du bytter tokens med Twitter med "localhost" som vertsnavn. Ved å klikke på Logg inn med Twitter knappen, som forventet, ber det om brukerens samtykke til å tillate dette programmet å bruke Twitter.
Når du tillater at programmet får tilgang til din Twitter-konto og begrenset informasjon, kalles tilbakekallingsbehandleren som er registrert i innloggingsstrategien, som deretter brukes til å lagre disse detaljene i en back-end-database
Og der har du det! Vi har lagt til Facebook og Twitter pålogginger til vårt eksempelprogram uten å skrive mye kode og håndtere de vanskelighetene som er involvert i godkjenningsmekanismen, ved å la Passport gjøre tung løfting. Lignende innloggingsstrategier kan skrives for en rekke tilbydere som Passport støtter. Koden for hele søknaden finnes i dette git-repository. Ta gjerne det ut og bruk det i dine egne prosjekter.
