Share
Este deja un fapt bine stabilit că parolele sunt în mod inerent de natură slabă. Astfel, solicitarea utilizatorilor finali de a crea parole puternice pentru fiecare aplicație pe care o folosesc face pur și simplu să înrăutățească situația.
O soluție ușoară este să permiteți utilizatorilor să se autentifice prin intermediul conturilor sociale existente, cum ar fi Facebook, Twitter, Google etc. În acest articol, vom face exact acest lucru și vom adăuga această capabilitate de conectare socială la aplicația Node de probă dezvoltată în prima parte a această serie de autentificare, astfel încât să putem autentifica prin intermediul conturilor noastre Facebook și Twitter folosind middleware Passport.
Dacă nu ați verificat articolul precedent, aș recomanda să treceți prin el, deoarece vom construi pe temelia stabilită de acest articol și vom adăuga noi strategii, rute și opinii.
Pentru persoanele neinvocate, conectarea socială este un tip de conectare unică folosind informațiile existente din site-uri de socializare precum Facebook, Twitter etc., unde se așteaptă în mod normal ca utilizatorii să aibă conturi deja create.
Conectarea socială se bazează în cea mai mare parte pe o schemă de autentificare, cum ar fi OAuth 2.0. Pentru a afla mai multe despre fluxurile de conectare diferite acceptate de OAuth, citiți acest articol. Alegem pașaportul pentru a ne gestiona datele de conectare sociale, deoarece oferă diferite module pentru o varietate de furnizori OAuth, fie Facebook, Twitter, Google, GitHub etc. În acest articol vom folosi modulele pașaport-facebook și passport-twitter pentru a vă oferi funcția de conectare prin conturile existente Facebook sau Twitter.
Pentru a activa autentificarea prin Facebook, trebuie mai întâi să creați un App pentru Facebook utilizând Portalul pentru dezvoltatori Facebook. Notați ID-ul aplicației și secretul aplicației și specificați adresa URL de apel apelând la Setări și specificând Adresa paginii în website pentru aplicație. De asemenea, asigurați-vă că ați introdus o adresă de e-mail validă pentru emailul de contact camp. Este necesar să fie capabil să facă această aplicație publică și accesibilă publicului.
Apoi, mergeți la Stare și revizuire și rotiți cursorul spre da pentru a face aplicația publică. Creați un fișier de configurare, fb.js, pentru a ține aceste informații de configurare necesare pentru a vă conecta la Facebook.
// Setările aplicației facebook - fb.js module.exports = 'appID': '"," appSecret ":" ',' callbackUrl ':' http: // localhost: 3000 / login / facebook / callback '
Înapoi în aplicația noastră Nod, definim acum o strategie de pașaport pentru autentificarea cu Facebook utilizând FacebookStrategy modul, utilizând setările de mai sus pentru a prelua profilul Facebook al utilizatorului și a afișa detaliile în vizualizare.
Accentsconagua
passport.use ('facebook', noul FacebookStrategy (clientID: fbConfig.appID, clientSecret: fbConfig.appSecret, callbackURL: fbConfig.callbackUrl, // facebook va trimite jetoanele și profilul profilului (access_token, refresh_token, ) // asincron process.nextTick (functie () // gaseste utilizatorul in baza de date bazata pe ID-ul facebook User.findOne ('id': profile.id, functie (err, user) // daca există o eroare, opriți totul și returnați // ie o eroare la conectarea la baza de date în cazul în care (err) a revenit făcut (err); // în cazul în care utilizatorul a fost găsit, apoi le-ați conectat dacă (user) return done (null , user); // user found, returnați acel utilizator altceva // dacă nu există niciun utilizator găsit cu idul facebook, creați-l var newUser = nou utilizator (); // setați toate informațiile despre facebook în modelul nostru de utilizator newUser.fb.id = profil.id; // setarea utilizatorilor facebook id newUser.fb.access_token = access_token; // vom salva tokenul pe care facebook-ul îl furnizează utilizatorului newUser.fb.firstName = profile.n ame.givenName; newUser.fb.lastName = profil.name.familyName; // uitați-vă la profilul de utilizator al pașaportului pentru a vedea cum sunt returnate numele newUser.fb.email = profile.emails [0] .value; // facebook poate returna mai multe e-mailuri, astfel încât vom lua primul // salvați utilizatorul nostru în baza de date newUser.save (funcția (err) if (err) throw err; // în cazul în care reușiți, returnați întoarcerea noului utilizator făcut ( null, newUser);); ); ); ));Acum trebuie să adăugăm anumite rute pentru activarea conectării cu Facebook și pentru manipularea apelului după ce utilizatorul a autorizat aplicația să utilizeze contul său Facebook.
// ruta pentru autentificarea prin Facebook si login // diferite domenii in timp ce inregistrati router.get ('/ login / facebook', passport.authenticate ('facebook', scope: 'email')); // gestionează apelul după ce facebook a autentificat utilizatorul router.get ('/ login / facebook / callback', passport.authenticate ('facebook', successRedirect: '/ home', failureRedirect: '/'));Pagina de conectare pentru aplicația noastră demo arată astfel:
Când faceți clic pe Logheaza-te cu Facebook butonul va încerca să se autentifice cu Facebook. Dacă sunteți deja conectat (ă) la Facebook, acesta va afișa dialogul de mai jos care vă solicită permisiunea, altfel vă va cere să vă conectați la Facebook și apoi să afișați acest dialog.
Dacă permiteți aplicației să primească profilul dvs. public și adresa de e-mail, atunci funcția noastră de apel inversă înregistrată va fi apelată cu detaliile utilizatorului. Putem să le salvăm pentru referințe ulterioare sau să le afișăm sau pur și simplu să le ignorăm, în funcție de ce doriți să faceți cu informațiile. Simțiți-vă liber să sari înainte în timp și să verificați întregul cod în acest git repo.
Ar fi bine să rețineți că, în afară de informațiile de bază pe care le oferă această aplicație demo, ați putea folosi același mecanism de autentificare pentru a extrage mai multe informații utile despre utilizator, cum ar fi lista de prieteni, folosind domeniul de aplicare adecvat și folosind API-urile Facebook tokenul de acces primit cu profilul utilizatorului.
Un modul de autentificare similar trebuie să fie conectat pentru a gestiona autentificarea prin intermediul Twitter-ului și a jetoanelor Passport pentru a ajuta la modulul său de pasaport-twitter.
În primul rând, trebuie să creați o nouă aplicație Twitter utilizând interfața de administrare a aplicațiilor. Un lucru de observat aici este că, în timp ce specificați URL-ul apelului de apel invers, Twitter nu pare să funcționeze bine cu el dacă "localhost" este dat în câmpul URL de apel invers. Pentru a depăși această limitare în timp ce se dezvoltă, ați putea folosi adresa de loopback specială sau "127.0.0.1" în locul "localhost". După crearea aplicației, rețineți următoarea cheie API și informațiile secrete într-un fișier de configurare după cum urmează:
// setările aplicației twitter - twitter.js module.exports = 'apikey': '"," apisecret ":" ',' callbackUrl ':' http://127.0.0.1:3000/login/twitter/callback '
Strategia de conectare pentru Twitter este o instanță TwitterStrategyși arată astfel:
passport.use ("twitter", noul TwitterStrategy (consumerKey: twitterConfig.apikey, consumerSecret: twitterConfig.apisecret, callbackURL: twitterConfig.callbackURL, funcția (token, tokenSecret, profil, gata) // asincron cod User.findOne ('twitter.id': profile.id, funcția (err, user) // if există o eroare, opriți totul și returnați // ie o eroare la conectarea la baza de date dacă (err) întoarceți-o (err); // dacă utilizatorul este găsit, atunci le-ați conectat dacă (user) return done (null, user); // utilizator găsit, returnați acel utilizator altceva // dacă nu există niciun utilizator, creați-i var newUser = nou utilizator (); // setați toate datele de utilizator de care avem nevoie noiUser.twitter.id = profil .id; newUser.twitter.token = token; newUser.twitter.username = profil.username; newUser.twitter.displayName = profile.displayName; newUser.twitter.lastStatus = profile._json.status.text; // salvează utilizatorul nostru în baza de date newUser.save (funcția (err) if (err) throw err; întoarcerea făcută (null, newUser); ); ); ); ));// cale de autentificare pentru twitter și login // diferite domenii în timp ce vă conectați la router.get ('/ login / twitter', passport.authenticate ('twitter')); // gestionează apelul după ce facebook a autentificat utilizatorul router.get ('/ login / twitter / callback', passport.authenticate ('twitter', successRedirect: '/ twitter', failureRedirect: '/')); / * GET Twitter Vezi pagina * / router.get ('/ twitter', isAuthenticated, function (req, res) res.render ('twitter', user: req.user);Acum, pentru a testa acest lucru, asigurați-vă că utilizați http://127.0.0.1:http: // localhost:. Așa cum am menționat deja mai sus, pare să existe o problemă în schimbul de jetoane cu Twitter cu "localhost" ca nume de gazdă. Când faceți clic pe Conectați-vă cu Twitter butonul, după cum se aștepta, solicită consimțământul utilizatorului de a permite acestei aplicații să utilizeze Twitter.
Pe măsură ce permiteți aplicației să acceseze contul tău Twitter și informații limitate, apelatorul de apel invers care este înregistrat în strategia de conectare se numește, care este apoi folosit pentru a stoca aceste detalii într-o bază de date back-end
Și acolo aveți! Am adăugat cu succes conectările Facebook și Twitter la aplicația noastră de eșantion, fără a scrie multe coduri și manipularea complicațiilor implicate în mecanismul de autentificare, permițând Passportului să facă ridicarea greoaie. Strategiile de conectare similare pot fi scrise pentru o varietate de furnizori pe care Passport le acceptă. Codul pentru întreaga aplicație poate fi găsit în acest depozit git. Simțiți-vă liber să îl extindeți și să îl utilizați în propriile proiecte.
