Einführung

So wie die Authentifizierung in APIs wichtig ist, ist sie auch in bestimmten Webanwendungen ein wichtiges Merkmal - solche mit Seiten und Geheimnissen, die nur registrierten und authentifizierten Benutzern zugänglich sein sollten.

In diesem Lernprogramm erstellen Sie eine einfache Webanwendung, während Sie lernen, wie Sie eine Benutzerregistrierung erstellen.

Anwendungs-Setup

Erstellen Sie ein neues Verzeichnis, in dem Sie arbeiten werden. Für dieses Tutorial habe ich meine angerufen site-auth. Initialisieren Sie npm in dem neuen Verzeichnis, das Sie gerade erstellt haben. So initialisieren Sie npm.

npm init -y 

Das -y Flag weist npm an, die Standardoptionen zu verwenden.

Bearbeiten Sie die Abhängigkeiten Ihrer package.json Datei wie das aussehen, was ich in meinem habe.

# package.json "name": "site-auth", "version": "1.0.0", "description": "", "main": "app.js", "scripts": "test" : "echo \" Fehler: Kein Test angegeben \ "&& exit 1", "Schlüsselwörter": [], "author": "izuchukwu1", "license": "ISC", "Abhängigkeiten": "bcryptjs": "^ 2.4.3", "body-parser": "^ 1.17.1", "connect-flash": "^ 0.1.1", "cookie-parser": "^ 1.4.3", "express": "^ 4.15.2", "express-handlebars": "^ 3.0.0", "express-messages": "^ 1.0.1", "express-session": "^ 1.15.2", "joi": "^ 13.0.1", "mongoose": "^ 4.11.12", "morgan": "^ 1.8.1", "passport": "^ 0.4.0", "pass-local": "^ 1.0. 0 "

Führen Sie danach den Befehl aus, um die Abhängigkeiten zu installieren.

npm installieren

Erstellen Sie eine Datei in Ihrem Arbeitsverzeichnis mit dem Namen app.js.

Beginnen Sie, indem Sie die installierten Abhängigkeiten und die erforderlichen Dateien anfordern.

# app.js const express = required ('express'); const morgan = required ('morgan') const pfad = required ('pfad'); const cookieParser = required ('cookie-parser'); const bodyParser = required ('Body-Parser'); const expressHandlebars = requir ('express-handlebars'); const flash = erfordern ('connect-flash'); const session = required ('express-session'); const mongoose = required ('mongoose') const Passport = Requirement ('Passport') Required ('./config / Passport')

Diese Abhängigkeiten wurden bei der Ausführung von npm install installiert. Um sie in Ihrer Anwendung verwenden zu können, müssen Sie sie anfordern und in ihren jeweiligen Konstanten speichern.

In diesem Lernprogramm verwenden Sie MongoDB als Datenbank. Sie müssen Benutzerinformationen in der Datenbank speichern. Um mit MongoDB zu arbeiten, verwenden Sie Mongoose, ein MongoDB-Modellierungswerkzeug für Node.js. Das Einrichten von Mongoose ist einfach.

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

Lassen Sie uns an dieser Stelle unsere Middleware einrichten.

// 1 const app = express () app.use (morgan ('dev')) // 2 app.set ('views', path.join (__ dirname, 'views')) app.engine ('handlebars', 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 (session (cookie: maxAge: 60000), geheim: '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 ('success') res.locals.error_messages = req.flash ('error') next ()) // 5 app.use ('/', required ('./routen / index')) app.use ('/ users', erfordern ('./routen / users')) // 6 // fange 404 und leite an den Fehlerbehandler app.use ((req, res, next) => res.render ( 'nicht gefunden') ); // 7 app.listen (5000, () => console.log ('Server hat an Port 5000 zugehört!'))

1. Express wird initialisiert und zugewiesen App.
2. Die Middleware für den Umgang mit Ansichten ist eingerichtet. Für die Ansichten werden Sie Gebrauch machen Lenker.
3. Sie richten Middleware für ein Bodyparser, Plätzchen, Session, und Reisepass. Passport wird verwendet, wenn sich Benutzer anmelden möchten.
4. An einigen Stellen zeigen Sie Flash-Nachrichten an. Daher müssen Sie die Middleware dafür einrichten und auch die Art der gewünschten Flash-Nachrichten erstellen.
5. Routes-Middleware: Dies behandelt alle Anfragen, die an einen URL-Pfad gestellt werden. Die hier angegebenen URL-Pfade beziehen sich auf den Index und den Benutzerpfad.
6. Middleware für 404-Fehler. Diese Middleware setzt ein, wenn eine Anfrage keiner der darüber erstellten Middleware zugeordnet wird.
7. Der Server ist so eingestellt, dass er Port 5000 überwacht.

Ansichten Setup

Erstellen Sie ein neues Verzeichnis mit dem Namen Ansichten. Erstellen Sie im Ansichtenverzeichnis zwei weitere Verzeichnisse mit dem Namen Layouts und partials. Sie möchten eine solche Baumstruktur in Ihren Ansichten erstellen. Erstellen Sie also die erforderlichen Dateien in den entsprechenden Verzeichnissen.

├── dashboard.handlebars ├── index.handlebars ├── layouts └── layout.handlebars s login.handlebars ├── notFound.handlebars s partials └── navbar.handlebars registrieren .Lenker

Damit ist es Zeit, den Code zu löschen.

# dashboard.handlebars  
 
Benutzer-Dashboard
 

Dies ist ein Dashboard, das nur registrierten Benutzern angezeigt werden sollte. Für dieses Tutorial ist dies Ihre geheime Seite.

Nun sollte die Indexseite für die Anwendung so aussehen.

# index.handlebars  
 
Site-Authentifizierung!
 
Willkommen an Bord.
 

Die Anwendung benötigt ein Layout, das verwendet wird, und hier ist das Layout, das Sie verwenden werden.

# layout / layout.handlebars          #if success_messages 
Erfolgsmeldungen
 / if #if Fehlernachrichten 
Fehlermeldungen
 /ob 
 > navbar body 
   

Sie benötigen eine Anmeldeseite für registrierte Benutzer.

# views / login.handlebars 
 
Bitte einloggen
 E-Mail-Addresse  Passwort  
 Einloggen 

Das nicht gefunden.Lenker Datei wird als Fehlerseite verwendet.

# views / notFound.handlebars  
 
Error
 
 

Ihre Registrierungsseite sollte so aussehen.

 
Bitte melden Sie sich an
 E-Mail-Addresse  Nutzername  Passwort  Passwort bestätigen  
 Anmelden 
 

Zum Schluss für Ihre Ansichten hier die Navigationsleiste.

# partials / navbar.handlebars 
 
Site-Authentifizierung
  
 

Nachdem dies erledigt ist, sind Sie gut in einige tiefe Teile zu gehen.

Datenvalidierung

Sie benötigen ein Benutzermodell. Aus dem Code für die Anzeige oben können Sie ableiten, dass die für das Benutzermodell erforderlichen Eigenschaften E-Mail, Benutzername und Kennwort sind. Erstellen Sie ein Verzeichnis mit dem Namen Modelle, und eine Datei darin heißt user.js.

# models / user.js // 1 const mongoose = required ('mongoose') const Schema = mongoose.Schema const bcrypt = required ('bcryptjs') // 2 const userSchema = neues Schema (email: String, username: String , Kennwort: Zeichenfolge, // 3 Zeitstempel: createdAt: 'createdAt', updatedAt: 'updatedAt') // 4 const User = mongoose.model ('user', userSchema) module.exports = Benutzer

1. Importiert Abhängigkeiten und speichert sie in Konstanten.
2. Ein neues Schema wird erstellt. Für jeden Benutzer möchten Sie das speichern Email, Nutzername, und Passwort in die Datenbank. Das Schema zeigt, wie das Modell für jedes Dokument erstellt werden soll. Hier möchten Sie, dass die E-Mail-Adresse, der Benutzername und das Kennwort vom Typ String sind.
3. Für jeden in der Datenbank gespeicherten Benutzer möchten Sie auch erstellen Zeitstempel. Sie verwenden Mongoose, um das zu erhalten hergestellt in und aktualisiert am, und diese wird dann in der Datenbank gespeichert.
4. Das Modell wird definiert und einer aufgerufenen Konstante zugeordnet Nutzer, Dieses wird dann als Modul exportiert, sodass es in anderen Teilen der Anwendung verwendet werden kann.

Salting und Hashing des Passworts

Sie möchten die Passwörter der Benutzer nicht als Klartext speichern. Was Sie tun möchten, wenn ein Benutzer bei der Registrierung ein Klartextpasswort eingibt. Das Klartextkennwort sollte mit einem Salt-Code gehasht werden, der von Ihrer Anwendung generiert wird (mithilfe von bcryptjs). Dieses gehashte Passwort wird dann in der Datenbank gespeichert. 

Klingt gut, richtig? Lassen Sie uns das in implementieren user.js Datei.

# models / user.js module.exports.hashPassword = async (kennwort) => try const salt = wait bcrypt.genSalt (10) Rückkehr erwartet bcrypt.hash (Kennwort, Salt) catch (error) Neuen Fehler auslösen ('Hashing fehlgeschlagen', Fehler)

Sie haben gerade eine Methode erstellt, die bei Ereignissen der Benutzerregistrierung aufgerufen wird. Die Methode erhält das vom Benutzer eingegebene Klartext-Passwort. Wie ich bereits erwähnt habe, wird das Klartextpasswort mit einem generierten Salt gehasht. Das gehashte Passwort wird als Passwort für den Benutzer zurückgegeben.

Index und Benutzerwege 

Erstellen Sie ein neues Verzeichnis mit dem Namen Routen. Erstellen Sie in diesem neuen Verzeichnis zwei neue Dateien: index.js und Benutzer.js.

Das index.js Datei wird sehr einfach sein. Es wird dem Index Ihrer Anwendung zugeordnet. Denken Sie daran, dass Sie für Ihre Routen Middleware für Ihre Routen eingerichtet haben app.js Datei, wenn Sie dies getan haben.

app.use ('/', erfordern ('./routen / index')) app.use ('/ users', erfordern ('./routen / users'))

Ihre Indexroute, die einfach die Indexseite rendert, sollte also so aussehen.

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

Nun zur Benutzerroute. Im Moment wird diese Routendatei vier Dinge tun.

1. Abhängigkeiten erfordern. Sie müssen die mit NPM installierten Abhängigkeiten anfordern.
2. Überprüfen Sie die Benutzereingaben. Sie möchten sicherstellen, dass der Benutzer kein leeres Formular sendet. Alle Eingaben sind erforderlich und alle müssen vom Typ String sein. Die E-Mail hat eine besondere Bestätigung .Email() Dadurch wird sichergestellt, dass das Eingegebene dem E-Mail-Format entspricht, während das Kennwort mit einem regulären Ausdruck überprüft wird. Das Bestätigungskennwort soll mit dem eingegebenen Kennwort identisch sein. Diese Validierungen werden mit durchgeführt Joi.
3. Richten Sie Ihren Router ein. Das ERHALTEN Anfrage rendert die Registrierungsseite, während die POST Die Anfrage tritt ein, wenn der Benutzer die Schaltfläche zum Senden des Formulars drückt.
4. Der Router wird als Modul exportiert.

So sieht der Code aus.

# routes / users.js const express = requir ('express'); const router = express.Router () const Joi = required ('joi') const passport = required ('passport') const Benutzer = required ('… / models / user') // Validierungsschema const userSchema = Joi.object ( ) .keys (email: Joi.string (). email (). required (), Benutzername: Joi.string (). required (), Passwort: Joi.string (). regex (/ ^ [a-zA- Z0-9] 6,30 $ /). Required (), confirmPassword: Joi.any (). Gültig (Joi.ref ('password')). Required ()) router.route ('/ register') ) .get ((req, res) => res.render ('register')) .post (async (req, res, next) => try const result = Joi.validate (req.body, userSchema if (result.error) req.flash ('error', 'Die eingegebenen Daten sind ungültig. Bitte versuchen Sie es erneut.') res.redirect ('/ users / register') return const user = await User.findOne ( 'email': result.value.email) if (user) req.flash ('error', 'email wird bereits verwendet.') res.redirect ('/ users / register') return const hash = waitit User.hashPassword (result.value.password) Lösche result.value.confirmationPassword result.value.password = Hash-Konstante newUser = neuen Benutzer erwarten (result.value) waitit newUser.save () req.flash ('Erfolg', 'Registrierung erfolgreich, fahren Sie fort und melden Sie sich an.') res.redirect ('/ users / login') catch (Fehler Nächste (Fehler)) module.exports = Router 

Schauen wir uns genauer an, was dabei passiert POST anfordern.

Die im Anmeldeformular eingetragenen Werte sind über erreichbar req.body, und die Werte sehen so aus.

Wert: E-Mail: '[email protected]', Benutzername: 'izu', Kennwort: 'chinedu', ConfirmPassword: 'chinedu',

Dies wird mit dem validiert userSchema Sie haben oben erstellt, und die vom Benutzer eingegebenen Werte werden einem konstanten aufgerufenen Ergebnis zugewiesen.

Wenn aufgrund der Überprüfung ein Fehler auftritt, wird dem Benutzer eine Fehlernachricht angezeigt und eine Umleitung auf die Registrierungsseite erfolgt.

Andernfalls versuchen wir herauszufinden, ob ein Benutzer mit derselben E-Mail-Adresse existiert, da Sie nicht zwei oder mehr Benutzer mit derselben E-Mail-Adresse haben möchten. Wenn ein Benutzer gefunden wird, wird dem Benutzer mitgeteilt, dass die E-Mail-Adresse bereits verwendet wird.

In einem Szenario, in dem kein registrierter Benutzer über diese E-Mail-Adresse verfügt, besteht der nächste Schritt darin, das Kennwort zu kennzeichnen. Hier nennen Sie das hashPassword Methode, die Sie in Ihrer Datei user.js erstellt haben. Das neue Hash-Passwort wird einer Konstante namens Hash zugewiesen.

Es ist nicht nötig, das zu lagern ConfirmationPassword in der Datenbank Somit wird dies gestrichen. Das unter result verfügbare Passwort ist immer noch das einfache Passwort. Da Sie das einfache Kennwort nicht in Ihrer Datenbank speichern möchten, ist es wichtig, dass Sie den Kennwortwert dem erstellten Hash erneut zuweisen. Dies geschieht mit einer Codezeile.

result.value.password = Hash

Die neue Benutzerinstanz wird in der Datenbank gespeichert. Es wird eine Flash-Nachricht angezeigt, die besagt, dass die Registrierung erfolgreich war, und der Benutzer wird zur Anmeldeseite umgeleitet.

Starten Sie Ihren Server von Ihrem Terminal aus, indem Sie Folgendes ausführen:

Knoten app.js

Richten Sie Ihren Browser auf http: // localhost: 5000 und Sie sollten Ihre neue App sehen.

Fazit

Jetzt wissen Sie, wie Sie die Registrierungsfunktion in einer Node-Webanwendung implementieren. Sie haben gelernt, wie wichtig es ist, Benutzereingaben zu überprüfen und wie dies mit Joi geschieht. Sie haben auch Gebrauch gemacht bcryptjs um zu salzen und das Passwort einzugeben.

Als Nächstes erfahren Sie, wie Sie eine Anmeldefunktion für registrierte Benutzer implementieren. Ich vertraue darauf, dass es dir Spaß gemacht hat!