Introduktion

Precis som autentisering är viktigt i API-er, är det också en viktig funktion i vissa webbapplikationer-de med sidor och hemligheter som endast bör vara tillgängliga för registrerade och autentiserade användare.

I den här handledningen bygger du en enkel webbapplikation samtidigt som du lär dig hur du skapar användarregistrering.

Programinställningar

Skapa en ny katalog där du kommer att arbeta från. För denna handledning skedde jag min site-auth. Initiera npm i den nya katalogen du just skapat. Så här initialiserar du npm.

npm init -y 

De -y flaggan berättar npm att använda standardalternativen.

Redigera beroenden del av din package.json fil för att se ut som vad jag har i mina.

# paket.json "namn": "site-auth", "version": "1.0.0", "beskrivning": "", "main": "app.js", "scripts" : "echo \" Fel: inget test specificerat \ "&& avsluta 1", "nyckelord": [], "författare": "izuchukwu1", "licens": "ISC", "beroenden": "bcryptjs" "^ 2.4.3", "body-parser": "^ 1.17.1", "connect-flash": "^ 0.1.1", "cookie-parser": "^ 1.4.3", "express" "^ 4.15.2", "express-handtag": "^ 3.0.0", "express-meddelanden": "^ 1.0.1", "express-session": "^ 1.15.2", "joi": "^ 13.0.1", "mongoose": "^ 4.11.12", "morgan": "^ 1.8.1", "pass": "^ 0.4.0", "pass-local": "^ 1.0. 0 "

Med det gjort, kör kommandot för att installera beroenden.

npm installera

Skapa en fil i din arbetsbok kallad app.js.

Börja med att kräva de beroenden du installerade och de nödvändiga filerna.

# app.js const express = kräver ("express"); const morgan = kräver ('morgan') const path = kräver ('path'); const cookieParser = kräver ('cookie-parser'); const bodyParser = kräver ("body-parser"); const expressHandlebars = kräver ("express-handtag"); const flash = kräver ('connect-flash'); const session = kräver ("express-session"); const mongoose = kräver ('mongoose') const pass = kräver ('pass') kräver ('./config / pass')

Dessa beroenden installerades när du körde npm installera. För att använda dem i din ansökan måste du kräva dem och spara dem i deras respektive konstanter.

För den här handledningen använder du MongoDB som din databas. Du måste lagra användarinformation i databasen. För att arbeta med MongoDB använder du Mongoose-a MongoDB modelleringsverktyg för Node.js. Att sätta upp Mongoose är lätt, så här.

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

Låt oss nu skapa vår middleware.

// 1 const app = express () app.use (morgan (dev)) // 2 app.set ('visningar', path.join (__ dirname, 'views')) app.engine expressHandlebars (defaultLayout: 'layout')) app.set ('view engine', 'handbars') // 3 app.use (bodyParser.json ()) app.use (bodyParser.urlencoded (extended: false )) app.use (cookieParser ()) app.use (express.static (path.join (__ dirname, "public"))) app.use (session (cookie: maxAge: 60000, hemlighet: 'codeworkrsecret' , sparaUnitialiserad: 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 ('success') res.locals.error_messages = req.flash ('error') nästa ()) // 5 app.use ('/', kräver ('./ routes / index')) app.use ('/ users', kräver ('./ruttar / användare')) // 6 // catch 404 och vidarebefordra till felhanteraren app.use ((req, res, next) => res.render 'hittades inte') ); // 7 app.listen (5000, () => console.log ('Server började lyssna på port 5000!'))

1. Expressen initieras och tilldelas till app.
2. Middleware för att hantera vyer är inställd. För synpunkterna kommer du att använda dig av styret.
3. Du ställer in middleware för bodyparser, kaka, session, och pass. Passet kommer att användas när användarna vill logga in.
4. På vissa punkter kommer du att visa blixtmeddelanden. Således behöver du konfigurera middleware för det, och skapa också vilken typ av flashmeddelanden du vill ha.
5. Rutor middleware-detta kommer att hantera alla begäranden gjorda till en URL-sökväg. URL-banorna som anges här är för sökvägen för index och användare.
6. Middleware att hantera 404 fel. Denna middleware startar när en förfrågan inte kartläggs till någon av middleware skapad ovanför den.
7. Servern är inställd att lyssna på port 5000.

Visningar Setup

Skapa en ny katalog som heter visningar. Inne i visningskatalogen skapar du två andra kataloger som heter layouter och partials. Du vill uppnå en trädstruktur så här i dina åsikter, så skapa de nödvändiga filerna i respektive katalog.

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

Med det gjort, dags att släppa koden.

# dashboard.handlebars  
 
User DashBoard
 

Det här är en instrumentpanel som ska vara synlig för bara registrerade användare. För denna handledning blir det din hemliga sida.

Nu ska indexsidan för programmet se ut så här.

# index.handlebars  
 
Site Authentication!
 
Välkommen ombord.
 

Applikationen behöver en layout som ska användas, och här är den layout du ska använda.

# layout / layout.handlebars          #if success_messages 
success_messages
 / if #if error_messages 
felmeddelanden
 /om 
 > navbar body 
   

Du behöver en inloggningssida för registrerade användare.

# visningar / login.handlebars 
 
Var god logga in
 E-postadress  Lösenord  
 Logga in 

De hittades inte.styret filen kommer att användas som din fel sida.

# visningar / notFound.handlebars  
 
Fel
 
 

Din registreringssida ska se ut så här.

 
Vänligen anmäl dig
 E-postadress  Användarnamn  Lösenord  Bekräfta lösenord  
 Bli Medlem 
 

Slutligen för dina åsikter, här är din navigeringsfält.

# Partials / navbar.handlebars 
 
Site Authentication
  
 

Med det gjort är det bra att gå in i några djupa delar.

Datavalidering

Du behöver en användarmodell. Från ovanstående vyskod kan du dra nytta av att de egenskaper som behövs för användarmodellen är e-post, användarnamn och lösenord. Skapa en katalog som heter modeller, och en fil i den heter user.js.

# modeller / user.js // 1 const mongoose = kräver ('mongoose') const Schema = mongoose.Schema const bcrypt = kräver ('bcryptjs') // 2 const userSchema = nytt Schema (email: String, användarnamn: String , lösenord: String, // 3 tidsstämplar: createdAt: 'createdAt', updatedAt: 'updatedAt') // 4 const User = mongoose.model ('user', userSchema) module.exports = Användare

1. Importera beroenden och sparar dem i konstanter.
2. Ett nytt schema skapas. För varje användare vill du spara e-post, Användarnamn, och Lösenord till databasen. Schemat visar hur modellen ska konstrueras för varje dokument. Här vill du att e-post, användarnamn och lösenord ska vara av typen Sträng.
3. För varje användare som sparas i databasen vill du också skapa tidsstämplar. Du använder Mongoose för att skaffa skapad vid och updatedAt, och detta sparas sedan i databasen.
4. Modellen definieras och tilldelas en konstant kallad Användare, som sedan exporteras som en modul så att den kan användas i andra delar av applikationen.

Saltning och hashing av lösenordet

Du vill inte lagra användarnas lösenord som vanlig text. Här är vad du vill göra när en användare skriver in ett vanligt textlösenord när du registrerar. Lätttextlösenordet ska ha hashed med ett salt som kommer att genereras av din ansökan (med hjälp av bcryptjs). Det här lösenordet lagras sedan i databasen. 

Låter bra, eller hur? Låt oss genomföra det i user.js fil.

#modeller / user.js module.exports.hashPassword = async (lösenord) => försök const salt = vänta bcrypt.genSalt (10) returnera vänta bcrypt.hash (lösenord, salt) fånga (fel) kasta nytt fel ("Hashing misslyckades", fel)

Du har precis skapat en metod som kommer att kallas i händelser av användarregistrering. Metoden kommer att få det vanliga textlösenordet som användaren angav. Som jag nämnde tidigare kommer plain text lösenordet hashed med ett genererat salt. Det hashed-lösenordet returneras som lösenord för användaren.

Index och Användarvägar 

Skapa en ny katalog som heter rutter. I den här nya katalogen skapar du två nya filer: index.js och users.js.

De index.js filen blir väldigt enkel. Den kommer att kartlägga till indexet för din ansökan. Kom ihåg att du ställer in middleware för dina rutter i din app.js filen när du gjorde det här.

app.use ('/', kräver ('./ routes / index')) app.use ('/ users', kräver ('./ routes / användare'))

Så din indexväg, som bara gör indexsidan, ska se ut så här.

# routes / index.js const express = kräver ('express') const router = express.Router () router.get ('/', (req, res) => res.render ('index')) modul .exports = router

Nu till användarnas rutt. För närvarande kommer denna färdfil att göra fyra saker.

1. Kräv beroenden. Du måste kräva de beroende du installerade med hjälp av NPM.
2. Validera användarinmatningar. Du vill se till att användaren inte skickar in en tom blankett. Alla ingångar är obligatoriska, och alla måste vara av typen String. E-postmeddelandet har en särskild validering som heter .e-post() vilket säkerställer att det som matas in matchar e-postformatet, medan lösenordet valideras med ett vanligt uttryck. För bekräftelse lösenordet, vill du att det ska vara detsamma som det lösenord som anges. Dessa valideringar görs med hjälp av Joi.
3. Ställ in din router. De SKAFFA SIG Förfrågan gör registreringssidan, medan POSTA Förfrågan sparkar in när användaren träffar knappen för att skicka formuläret.
4. Routern exporteras som en modul.

Här ser koden ut.

# rutter / users.js const express = kräver ("express"); const router = express.Router () const Joi = kräver ('joi') const passport = kräver ('pass') const Användare = kräver ('... / modeller / användare') // validering schema const userSchema = Joi.object ) .keys (email: Joi.string (). email (). required (), användarnamn: Joi.string (). krävs (), lösenord: Joi.string (). regex (/ ^ [a-zA- Z0-9] 6,30 $ /). Krävs (), bekräftelsePassword: Joi.any () .giltigt (Joi.ref ('lösenord')). Krävs ()) router.route ('/ register' ) .get ((req, res) => res.render ('register')) .post (async (req, res, next) => försök const result = Joi.validate (req.body, userSchema ) om (result.error) req.flash ('error', 'Inmatade data är inte giltiga. Vänligen försök igen.') res.redirect ('/ users / register') returnera const user = vänta User.findOne 'email': result.value.email) om (användare) req.flash ('error', 'Email är redan i bruk.') res.redirect ('/ users / register') returnera const hash = vänta på User.hashPassword (result.value.password) radera result.value.confirmationPassword result.value.password = hash const newUser = vänta på ny användare (result.value) vänta newUser.save () req.flash ('success', 'Registrera framgångsrikt, fortsätt och logga in.') res.redirect ('/ users / login') fånga ) next (error)) module.exports = router 

Låt oss se djupare på vad som händer i det POSTA begäran.

De värden som anges i registreringsformuläret är tillgängliga via req.body, och värdena ser ut så här.

värde: email: '[email protected]', användarnamn: 'izu', lösenord: 'chinedu', confirmationPassword: 'chinedu',

Detta valideras med hjälp av userSchema du skapade ovan, och värdena som användaren angett har tilldelats ett konstant kallat resultat.

Om ett fel uppstått på grund av valideringen visas ett felmeddelande till användaren och en omdirigering till registreringssidan sker.

Annars försöker vi hitta om en användare med samma e-postadress finns, eftersom du inte vill ha två eller flera användare med samma e-postadress. Om en användare hittas, får användaren veta att e-postadressen redan används.

I ett scenario där ingen registrerad användare har den e-postadressen är nästa steg att lösa lösenordet. Det här heter du hashPassword metod du skapade i din user.js-fil. Det nya hashed-lösenordet är tilldelat en konstant kallad hash.

Det finns inget behov av att lagra confirmationPassword i databasen. Således raderas detta. Lösenordet tillgängligt från resultatet är fortfarande det vanliga lösenordet. Eftersom du inte vill lagra det vanliga lösenordet i din databas är det viktigt att omfördela lösenordsvärdet till den hash som skapades. Detta görs med en kodlinje.

result.value.password = hash

Den nya användarinstansen sparas i databasen. Ett snabbmeddelande som anger att registreringen var framgångsrik visas och användaren vidarebefordras till inloggningssidan.

Starta din server från din terminal genom att köra:

nod app.js

Peka din webbläsare till http: // localhost: 5000 och du ska se din nya app.

Slutsats

Nu vet du hur du implementerar registreringsfunktionen i en nodwebbprogram. Du har lärt dig vikten av att validera användarinmatning och hur du gör det med Joi. Du har också utnyttjat bcryptjs till salt och hash ditt lösenord.

Därefter ser du hur du implementerar en inloggningsfunktion för registrerade användare. Jag litar på att du njöt av dig själv!