Introducere

La fel ca autentificarea este importantă în API-uri, este, de asemenea, o caracteristică importantă în anumite aplicații web - cele cu pagini și secrete care ar trebui să fie accesibile doar utilizatorilor înregistrați și autentificați.

În acest tutorial, veți crea o aplicație web simplă în timp ce învățați cum să creați înregistrarea utilizatorilor.

Setarea aplicației

Creați un nou director de unde veți lucra. De dragul acestui tutorial, am sunat pe a mea Site-auth. Inițializați npm în noul director pe care tocmai l-ați creat. Iată cum să inițializați npm.

npm init -y 

-y steagul spune npm să utilizeze opțiunile implicite.

Editați o parte a dependențelor dvs. package.json fișier să arate ca ceea ce am în mine.

# "pachet.json " nume ":" site-auth "," versiune ":" 1.0.0 "," descriere " : "echo \" Eroare: nici un test specificat \ "&& ieșire 1", "cuvinte cheie": [], "autor": "izuchukwu1", "license": "ISC", "dependencies": "bcryptjs" "2.4.3", "corp-parser": "^ 1.17.1", "connect-flash": "^ 0.1.1", "cookie-parser": "^ 1.4.3", "express": "4.15.2", "expres-ghidon": "^ 3.0.0", "mesaje exprese": "^ 1.0.1", "sesiune expres": "^ 1.15.2", "joi": "13.0.1", "mongoose": "^ 4.11.12", "morgan": "^ 1.8.1", "pașaport": "^ 0.4.0", "pașaport local": "^ 1.0. 0 "

Cu asta, executați comanda pentru a instala dependențele.

npm install

Creați un fișier din directorul de lucru numit app.js.

Începeți prin a solicita dependențele instalate și fișierele necesare.

# app.js const express = solicită ("expres"); const morgan = necesită ('morgan') const path = require ('path'); const cookieParser = necesită ("cookie-parser"); const bodyParser = necesită ('body-parser'); const expresHandlebars = necesită ("ghidon expres"); const flash = necesită ('connect-flash'); const = necesită ('session-session'); const mongoose = necesită ('mongoose') const pasport = necesită ('pașaport') necesită ('./ config / passport')

Aceste dependențe au fost instalate când ați rulat npm install. Pentru a le folosi în aplicația dvs., trebuie să le solicitați și să le salvați în constantele respective.

Pentru acest tutorial, veți folosi MongoDB ca bază de date. Va trebui să stocați informațiile despre utilizator în baza de date. Pentru a lucra cu MongoDB, veți folosi Mongoose-un instrument de modelare MongoDB pentru Node.js. Configurarea Mongoose este ușor, ca asta.

# app.js mongoose.Promise = global.Promise mongoose.connect ("mongodb: // localhost: 27017 / site-auth")

În acest moment, să ne configurați middleware-ul nostru.

// 1 app app = express () app.use (morgan ('dev')) // 2 app.set ('views', path.join (__ dirname, 'views' expressHandlebars (defaultLayout: 'aspect')) app.set ( 'motor vedere', 'ghidoane') // 3 app.use (bodyParser.json ()) app.use (bodyParser.urlencoded (extins: false )) app.use (cookieParser ()) app.use (express.static (path.join (__ dirname, 'public'), sesiunea app.use)) ((cookie: maxAge: 60,000, secret: 'codeworkrsecret' , saveUninitialized: false, resave: false); app.use (passport.initialize ()) app.use (passport.session ()) // 4 app.use (flash ()) app.use ((req, res, next) => res.locals.success_mesages = req.flash ('succes') res.locals.error_messages = req.flash ('error') next ()) // 5 app.use ('/', necesita './ rute / index') app.use ('/ users', necesită ('./ rute / utilizatori')) // 6 // captură 404 și redirecționați spre app.use ((req, res, next) => res.render 'nu a fost gasit') ); // 7 app.listen (5000, () => console.log ("Serverul a început să asculte pe portul 5000!"))

1. Express este inițializat și alocat aplicaţia.
2. Software-ul Middleware pentru a gestiona vizualizările este setat. Pentru opiniile pe care le veți folosi ghidonul.
3. Ați creat un middleware pentru bodyparser, fursec, sesiune, și pașaport. Va fi utilizat pașaportul când utilizatorii vor să se conecteze.
4. În anumite momente, veți afișa mesaje flash. Astfel, trebuie să configurați un middleware pentru acest lucru și, de asemenea, să creați tipul de mesaje flash pe care le doriți.
5. Routes middleware - aceasta va face față oricărei solicitări adresate unei căi de adrese URL. Căile URL specificate aici sunt pentru calea indexului și a utilizatorilor.
6. Middleware pentru a face față erorilor 404. Acest middleware intră în joc atunci când o cerere nu se referă la niciunul dintre middleware-ul creat deasupra lui.
7. Serverul este setat să asculte la portul 5000.

Vizualizări de configurare

Creați un nou director numit vizualizari. În directorul de vizualizări, creați alte două directoare numite aspecte și amprente parțiale. Doriți să obțineți o structură arborescentă în vizualizările dvs., astfel încât să creați fișierele necesare în directoarele respective.

├── dashboard.handlebars ├── index.handlebars ├── dispuneri │ └── layout.handlebars ├── login.handlebars ├── notFound.handlebars ├── │ └── navbar.handlebars amprente parțiale └── înregistrare .handlebars

Cu asta, timp pentru a scăpa de cod.

# dashboard.handlebars  
 
User DashBoard
 

Acesta este un tablou de bord care ar trebui să fie vizibil numai pentru utilizatorii înregistrați. Pentru acest tutorial, acesta va fi pagina secretă.

Acum pagina de index pentru aplicație ar trebui să arate așa.

# index.handlebars  
 
Autentificarea site-ului!
 
Bun venit la bord.
 

Aplicația are nevoie de un aspect care va fi folosit, și aici este acel aspect pe care îl veți folosi.

# Aspect / layout.handlebars          #if succes_messages 
success_messages
 / if #în cazul mesajelor de eroare 
mesaje de eroare
 /dacă 
 > navbar corp 
   

Veți avea nevoie de o pagină de conectare pentru utilizatorii înregistrați.

# vizualizări / login.handlebars 
 
Vă rugăm să vă conectați la contul dvs
 Adresa de email  Parola  
 conectare 

nu a fost gasit.ghidonul fișierul va fi folosit ca pagină de eroare.

# vizualizări / notFound.handlebars  
 
Eroare
 
 

Pagina dvs. de înregistrare ar trebui să arate așa.

 
Vă rugăm să vă înscrieți
 Adresa de email  Nume de utilizator  Parola  confirma parola  
 Inscrie-te 
 

În cele din urmă, pentru opiniile dvs., iată bara de navigare.

# / navbar.handlebars partiale 
 
Autentificarea site-ului
  
 

Cu asta ați făcut bine să mergeți în unele părți adânci.

Data validarii

Veți avea nevoie de un model de utilizator. Din codul de vizualizare de mai sus, puteți deduce că proprietățile necesare pentru modelul Utilizator sunt email, nume de utilizator și parolă. Creați un director numit modele, și un fișier numit în el user.js.

# modele / user.js // 1 = const mongoose nevoie ( 'Mangustă') = const Schema mongoose.Schema const bcrypt = necesita ( 'bcryptjs') // 2 const userSchema = new schemă (email: String, numele de utilizator: String , parola: String, // 3 timestamps: createdAt: 'createdAt', updatedAt: 'updatedAt') // 4 const utilizator = mongoose.model ( 'user', userSchema) module.exports = utilizator

1. Importă dependențele și le salvează în constante.
2. Se creează o schemă nouă. Pentru fiecare utilizator, doriți să salvați e-mail, nume de utilizator, și parola la baza de date. Schema arată modul în care urmează să fie construit modelul pentru fiecare document. Aici doriți ca e-mailul, numele de utilizator și parola să fie de tip String.
3. Pentru fiecare utilizator salvat în baza de date, pe care doriți, de asemenea, să îl creați marcajele de timp. Utilizați Mongoose pentru a obține creat la și updatedAt, iar acest lucru este apoi salvat în baza de date.
4. Modelul este definit și atribuit unei constante numite Utilizator, care este apoi exportat ca un modul, astfel încât acesta poate fi utilizat în alte părți ale aplicației.

Saltarea și distrugerea parolei

Nu doriți să stocați parolele utilizatorilor ca text simplu. Iată ce doriți să faceți atunci când un utilizator introduce o parolă de text simplu în timp ce înregistrează. Parola de text simplu ar trebui să fie hashed folosind o sare care va fi generată de aplicația dvs. (folosind bcryptjs). Această parolă dezordonată este apoi stocată în baza de date. 

Sună grozav, nu? Să implementăm asta în user.js fişier.

# modele / user.js module.exports.hashPassword = asincronă (parolă) => try = sare const aștepta bcrypt.genSalt (10) întoarcere așteaptă bcrypt.hash (parola, sare) catch (eroare) arunca nouă eroare ("Hashing a eșuat", eroare)

Tocmai ați creat o metodă care va fi apelată în evenimente de înregistrare a utilizatorului. Metoda va primi parola de text simplu introdusă de utilizator. Așa cum am menționat mai devreme, parola de text simplu va fi hashed folosind o sare generată. Parola hashed va fi returnată ca parolă pentru utilizator.

Rute index și utilizatori 

Creați un nou director numit rute. În acest nou director, creați două fișiere noi: index.js și users.js.

index.js fișierul va fi foarte simplu. Acesta va hărți la indexul aplicației dvs. Amintiți-vă că ați creat middleware pentru rutele dvs. în dvs. app.js fișier atunci când ați făcut acest lucru.

app.use ('/', necesită ('./ rute / index')) app.use ('/ users', necesită './ rute / users')

Deci, ruta dvs. de index, care redă pur și simplu pagina index, ar trebui să arate așa.

# rută / index.js const expres = necesită ('express') const router = expres.Router () router.get ('/', (req, res) .exports = router

Acum, la ruta utilizatorilor. Deocamdată, acest fișier de rutare va face patru lucruri.

1. Necesită dependențe. Va trebui să solicitați dependențele pe care le-ați instalat utilizând NPM.
2. Validați intrările utilizatorilor. Doriți să vă asigurați că utilizatorul nu trimite un formular gol. Toate intrările sunt necesare și toate trebuie să fie de tip String. E-mailul are o validare specială numită .e-mail() care asigură faptul că ceea ce este introdus se potrivește cu formatul de e-mail, în timp ce parola este validată utilizând o expresie regulată. Pentru parola de confirmare, doriți să fie aceeași cu parola introdusă. Aceste validări se fac folosind Joi.
3. Configurați routerul. OBȚINE cererea face pagina de înregistrare, în timp ce POST solicită lovituri atunci când utilizatorul atinge butonul pentru a trimite formularul.
4. Router-ul este exportat ca un modul.

Iată cum arată codul.

# trasee / users.js const express = necesită ('express'); const constanta = constanta = constanta = constanta = constanta = constanta () ), chei (email: Joi.string (), e-mail () .comandat (), username: Joi.string Z0-9] 6,30 $ /) cerut (), confirmarePassword: Joi.any () valid (Joi.ref ('parola' ) .get (req, res) => res.render ('register')) .post (async (req, res, next) ) if (result.error) req.flash ('error', 'Data introdusă nu este validă. Încercați din nou.') res.redirect ('/ users / register') return const user = await User.findOne 'email': result.value.email) if (user) req.flash ('error', 'Email este deja folosit') res.redirect (' așteptați User.hashPassword (result.value.password) șterge result.value.confirmationPassword result.value.password = hash const newUser = asteapta utilizator nou (result.value) asteapta newUser.save () req.flash ('succes', 'inregistrarea cu succes, ) următor (eroare)) module.exports = router 

Să ne uităm mai profund la ceea ce se întâmplă în această privință POST cerere.

Valorile introduse în formularul de înregistrare sunt accesibile prin req.body, iar valorile arata asa.

valoare: email: '[email protected]', numele de utilizator: 'izu', parola: 'chinedu', confirmationPassword: 'chinedu',

Acest lucru este validat folosind userSchema ați creat mai sus, iar valorile introduse de utilizator sunt atribuite unui rezultat numit constant.

Dacă se întâlnește o eroare din cauza validării, un mesaj de eroare este afișat utilizatorului și are loc o redirecționare către pagina de înregistrare.

În caz contrar, încercăm să aflăm dacă există un utilizator cu aceeași adresă de e-mail, deoarece nu doriți să aveți doi sau mai mulți utilizatori cu aceeași adresă de e-mail. Dacă se găsește un utilizator, utilizatorului i se spune că adresa de e-mail este deja utilizată.

Într-un scenariu în care nici un utilizator înregistrat nu are acea adresă de e-mail, următorul pas este de a hash parola. Aici numiți hashPassword pe care ați creat-o în fișierul user.js. Noua parolă hashed este atribuită unei constante numite hash.

Nu este nevoie să stocați confirmationPassword în baza de date. Prin urmare, acest lucru este șters. Parola disponibilă din rezultatul este încă parola simplă. Deoarece nu doriți să stocați parola simplă în baza dvs. de date, este important să alocați valoarea parolei la hash-ul creat. Aceasta se face cu o linie de cod.

result.value.password = hash

Noua instanță de utilizator este salvată în baza de date. A fost afișat un mesaj flash care indică faptul că înregistrarea a avut succes și utilizatorul este redirecționat către pagina de conectare.

Porniți serverul de pe terminalul dvs. executând:

nod app.js

Punctați browserul la http: // localhost: 5000 și ar trebui să vedeți noua aplicație.

Concluzie

Acum știți cum să implementați caracteristica de înregistrare într-o aplicație web Nod. Ați învățat importanța validării intrărilor de utilizatori și a modului în care puteți face acest lucru utilizând Joi. De asemenea, ați folosit bcryptjs să-ți sară și să-ți spargi parola.

Apoi, veți vedea cum să implementați o funcție de conectare pentru utilizatorii înregistrați. Am încredere că te-ai bucurat de tine!