Introduksjon

Akkurat som autentisering er viktig i APIer, er det også en viktig funksjon i visse webapplikasjoner, de med sider og hemmeligheter som bare skal være tilgjengelige for registrerte og autentiserte brukere.

I denne opplæringen vil du bygge en enkel webapplikasjon mens du lærer å lage brukerregistrering.

Programoppsett

Opprett en ny katalog hvor du skal jobbe fra. For denne tutorials skyld ringte jeg min site-auth. Initialiser npm i den nye katalogen du nettopp har opprettet. Her er hvordan du initialiserer npm.

npm init -y 

De -y flagg forteller npm å bruke standardalternativene.

Rediger avhengighetsdelen av din package.json fil for å se ut som jeg har i meg.

# package.json "name": "site-auth", "versjon": "1.0.0", "beskrivelse": "", "main": "app.js", "scripts" : "echo \" Feil: ingen test oppgitt \ "&& avslutte 1", "søkeord": [], "forfatter": "izuchukwu1", "lisens": "ISC", "avhengigheter": "bcryptjs" "^ 2.4.3", "body-parser": "^ 1.17.1", "connect-flash": "^ 0.1.1", "cookie-parser": "^ 1.4.3", "express": "^ 4.15.2", "express-styrer": "^ 3.0.0", "express-meldinger": "^ 1.0.1", "express-økt": "^ 1.15.2", "joi": "^ 13.0.1", "mongoose": "^ 4.11.12", "morgan": "^ 1.8.1", "pass": "^ 0.4.0", "pass-lokalt": "^ 1.0. 0 "

Med det gjort, kjør kommandoen for å installere avhengighetene.

npm installasjon

Opprett en fil i arbeidskatalogen som heter app.js.

Begynn med å kreve avhengighetene du installerte og de nødvendige filene.

# app.js const express = krever ('express'); const morgan = krever ('morgan') const path = krever ('path'); const cookieParser = krever ('cookie-parser'); const bodyParser = krever ('body-parser'); const expressHandlebars = krever ('ekspresstyre'); const flash = krever ('connect-flash'); const session = krever ('express-session'); const mongoose = krever ('mongoose') const passport = krever ('pass') krever ('./ config / passport')

Disse avhengighetene ble installert når du kjørte npm installasjon. For å bruke dem i søknaden din, må du kreve dem og lagre dem i deres respektive konstanter.

For denne opplæringen bruker du MongoDB som din database. Du må lagre brukerinformasjon i databasen. For å jobbe med MongoDB, vil du gjøre bruk av Mongoose-a MongoDB modelleringsverktøy for Node.js. Å sette opp Mongoose er enkelt, slik som dette.

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

La oss nå sette opp vår mellomvare på dette tidspunktet.

// 1 const app = express () app.use (morgan (dev)) // 2 app.set ('visninger', path.join (__ dirname, 'views')) app.engine ('styrer' expressHandlebars (defaultLayout: 'layout')) app.set ('view engine', 'handlebars') // 3 app.use (bodyParser.json ()) app.use (bodyParser.urlencoded (extended: false )) app.use (cookieParser ()) app.use (express.static (path.join (__ dirname, 'public'))) app.use (økt (cookie: maxAge: 60000, hemmelig: 'codeworkrsecret' , lagreUnitialisert: 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 ('suksess') res.locals.error_messages = req.flash ('feil') neste ()) // 5 app.use ('/', krever ('./ ruter / indeks')) app.use ('/ users', krever ('./ ruter / brukere')) // 6 // fangst 404 og videre til feilbehandler app.use ((req, res, next) => res.render 'ikke funnet') ); // 7 app.listen (5000, () => console.log ('Server startet å lytte på port 5000!'))

1. Express er initialisert og tilordnet til app.
2. Middleware for å håndtere visninger er satt opp. For visningene vil du gjøre bruk av styret.
3. Du setter opp mellomvare for bodyparser, cookie, økt, og pass. Passport vil bli brukt når brukerne vil logge inn.
4. På noen punkter vil du vise flashmeldinger. Dermed må du sette opp middleware for det, og du må også opprette typen flashmeldinger du vil ha.
5. Ruter mellomvare-dette vil håndtere enhver forespørsel som gjøres til en URL-bane. URL-banene som er angitt her, er for indeksen og brukerbanen.
6. Middleware å håndtere 404 feil. Denne mellomprogramvaren begynner når en forespørsel ikke kartlegger noe av mellomprogramvaren som er opprettet over det.
7. Serveren er satt til å høre på port 5000.

Visningsoppsett

Opprett en ny katalog som heter visninger. Inne i visningsmappen, opprett to andre kataloger som heter oppsett og partials. Du vil oppnå en trestruktur som dette i dine synspunkter, så opprett de nødvendige filene i deres respektive kataloger.

├── dashboard.handlebars ├── index.handlebars ├── layout │ └── layout.handlebars ├── login.handlebars ├── notFound.handlebars ├── partials │ └── navbar.handlebars └── register .handlebars

Med det gjort, tid til å slippe koden.

# dashboard.handlebars  
 
User DashBoard
 

Dette er et dashbord som skal være synlig for kun registrerte brukere. For denne opplæringen blir det din hemmelige side.

Nå skal indekssiden for søknaden se slik ut.

# index.handlebars  
 
Nettstedautentisering!
 
Velkommen ombord.
 

Søknaden trenger et oppsett som skal brukes, og her er den oppsettet du skal bruke.

# layout / layout.handlebars          #if suksess_meldinger 
success_messages
 / if #if error_messages 
error_messages
 /hvis 
 > navbar body 
   

Du trenger en påloggingsside for registrerte brukere.

# visninger / login.handlebars 
 
Vennligst logg inn
 Epostadresse  Passord  
 Logg inn 

De ikke funnet.styret filen vil bli brukt som feilside.

# visninger / notFound.handlebars  
 
Feil
 
 

Din registreringsside skal se slik ut.

 
Vennligst registrer deg
 Epostadresse  Brukernavn  Passord  bekreft passord  
 Melde deg på 
 

Til slutt for dine synspunkter, her er navigasjonslinjen din.

# partials / navbar.handlebars 
 
Nettstedautentisering
  
 

Med det gjort, er du god til å gå inn i noen dype deler.

Datavalidering

Du trenger en brukermodell. Fra visningskoden ovenfor kan du utlede at egenskapene som trengs for brukermodellen er e-post, brukernavn og passord. Opprett en katalog som heter modeller, og en fil i den heter user.js.

# modeller / user.js // 1 const mongoose = krever ('mongoose') const Schema = mongoose.Schema const bcrypt = krever ('bcryptjs') // 2 const userSchema = nytt skjema (email: String, brukernavn: String , passord: String, // 3 tidsstempler: createdAt: 'createdAt', updatedAt: 'updatedAt') // 4 const Bruker = mongoose.model ('bruker', userSchema) module.exports = Bruker

1. Import avhengigheter og lagrer dem i konstanter.
2. Et nytt skjema er opprettet. For hver bruker vil du lagre e-post, brukernavn, og passord til databasen. Skjemaet viser hvordan modellen skal bygges for hvert dokument. Her vil du ha e-post, brukernavn og passord for å være av typen String.
3. For hver bruker som er lagret i databasen, vil du også opprette tidsstempler. Du bruker Mongoose til å skaffe createdAt og updatedAt, og dette lagres deretter i databasen.
4. Modellen er definert og tilordnet en konstant kalt Bruker, som deretter eksporteres som en modul slik at den kan brukes i andre deler av applikasjonen.

Salting og hashing av passordet

Du vil ikke lagre brukerens passord som vanlig tekst. Her er hva du vil gjøre når en bruker skriver inn et vanlig tekstpassord mens du registrerer. Sletttekstpassordet skal være hashed ved hjelp av et salt som vil bli generert av søknaden din (ved hjelp av bcryptjs). Dette hashed-passordet lagres deretter i databasen. 

Høres bra ut, ikke sant? La oss implementere det i user.js fil.

#modeller / user.js module.exports.hashPassword = async (passord) => prøv const salt = venter bcrypt.genSalt (10) returner venter bcrypt.hash (passord, salt) fangst (feil) kast ny feil ('Hashing mislyktes', feil)

Du har nettopp opprettet en metode som vil bli kalt i hendelser for brukerregistrering. Metoden vil motta det enkle tekstpassordet brukeren skrev inn. Som jeg nevnte tidligere, vil det enkle tekstpassordet være hashed ved hjelp av et generert salt. Det hakkede passordet vil bli returnert som passord for brukeren.

Indeks og brukerruter 

Opprett en ny katalog som heter ruter. I denne nye katalogen, opprett to nye filer: index.js og users.js.

De index.js filen blir veldig enkel. Det vil kartlegge til indeksen for søknaden din. Husk at du konfigurerer mellomvare for ruter i din app.js fil når du gjorde dette.

app.use ('/', krever ('./ ruter / indeks')) app.use ('/ users', krever ('./ ruter / brukere'))

Så indeksruten din, som bare gjør indekssiden, burde se slik ut.

# ruter / index.js const express = kreve (ekspress) const router = express.Router () router.get ('/', (req, res) => res.render ('index')) modul .exports = ruteren

Nå til brukerens rute. For nå vil denne rutefilen gjøre fire ting.

1. Krev avhengigheter. Du må kreve avhengighetene du installerte ved hjelp av NPM.
2. Bekreft brukerinngangene. Du vil sørge for at brukeren ikke sender inn en tom skjema. Alle innganger er påkrevd, og alle må være av typen String. E-posten har en spesiell validering kalt .e-post () som sikrer at det som er lagt inn, samsvarer med e-postformatet, mens passordet er validert ved hjelp av et vanlig uttrykk. For bekreftelsespassordet, vil du at det skal være det samme som det oppgitte passordet. Disse valideringene gjøres ved å bruke Joi.
3. Sett opp ruteren din. De FÅ forespørsel gjør registreringssiden, mens POST Forespørsel sparker inn når brukeren treffer knappen for å sende skjemaet.
4. Ruteren blir eksportert som en modul.

Her ser koden ut.

# ruter / users.js const express = krever ('express'); const router = express.Router () const Joi = krever ('joi') const passport = krever ('pass') const Bruker = krever ('... / modeller / bruker') // validering skjema const userSchema = Joi.object ) .keys (email: Joi.string (). email (). required (), brukernavn: Joi.string (). required (), passord: Joi.string (). regex (/ ^ [a-zA- Z0-9] 6,30 $ /). Kreves (), bekreftelsePassword: Joi.any () .gyldig (Joi.ref ('passord')). Required ()) router.route ('/ register' ) .get ((req, res) => res.render ('register')) .post (async (req, res, next) => prøv const result = Joi.validate (req.body, userSchema ) hvis (result.error) req.flash ('error', 'Oppgi data er ikke gyldig. Vennligst prøv igjen.') res.redirect ('/ users / register') return const user = avvent User.findOne 'email': result.value.email) hvis (bruker) req.flash ('error', 'Email er allerede i bruk.') res.redirect ('/ users / register') return const hash = venter User.hashPassword (result.value.password) slette result.value.confirmationPassword result.value.password = hash const newUser = venter ny bruker (result.value) venter newUser.save () req.flash ('suksess', 'Registrering vellykket, fortsett og logg inn.') res.redirect ('/ users / login') catch ) neste (feil)) module.exports = ruteren 

La oss se nærmere på hva som skjer i det POST be om.

Verdiene som er oppgitt i registreringsskjemaet er tilgjengelige via req.body, og verdiene ser slik ut.

verdi: email: '[email protected]', brukernavn: 'izu', passord: 'chinedu', confirmationPassword: 'chinedu',

Dette er validert ved hjelp av userSchema du opprettet over, og verdiene som er oppgitt av brukeren, tilordnes et konstant oppkalt resultat.

Hvis det oppdages en feil på grunn av valideringen, vises en feilmelding til brukeren, og en omdirigering til registreringssiden finner sted..

Ellers prøver vi å finne om en bruker med samme e-postadresse eksisterer, da du ikke vil ha to eller flere brukere med samme e-postadresse. Hvis en bruker blir funnet, blir brukeren fortalt at e-postadressen allerede er i bruk.

I et scenario der ingen registrert bruker har den e-postadressen, er neste trinn å hash passordet. Det er her du ringer til hashPassword Metode du opprettet i user.js-filen. Det nye hashed-passordet er tilordnet en konstant kalt hash.

Det er ikke nødvendig å lagre confirmationPassword i databasen. Dermed slettes dette. Passordet som er tilgjengelig fra resultatet er fortsatt det enkle passordet. Siden du ikke vil lagre det enkle passordet i databasen, er det viktig å tilordne passordverdien til hash som ble opprettet. Dette er gjort med en linje med kode.

result.value.password = hash

Den nye brukerens forekomst blir lagret i databasen. En flashmelding som angir at registreringen var vellykket, vises, og brukeren blir omdirigert til påloggingssiden.

Start opp serveren din fra terminalen ved å kjøre:

node app.js

Pek nettleseren din til http: // localhost: 5000, og du bør se din nye app.

Konklusjon

Nå vet du hvordan du implementerer registreringsfunksjonen i et Nød-webprogram. Du har lært viktigheten av å validere brukerinngang og hvordan du gjør det ved hjelp av Joi. Du har også gjort bruk av bcryptjs å salt og hash ditt passord.

Deretter ser du hvordan du implementerer en påloggingsfunksjon for registrerte brukere. Jeg stoler på at du likte deg selv!