Heim > Web-Frontend > js-Tutorial > Authentifizierung von Node.js -Anwendungen mit Pass

Authentifizierung von Node.js -Anwendungen mit Pass

尊渡假赌尊渡假赌尊渡假赌
Freigeben: 2025-03-13 10:54:10
Original
920 Leute haben es durchsucht

In diesem Tutorial entwickeln wir eine Node.js -Anwendung von Grund auf und verwenden den beliebten Authentifizierungs -Middleware -Pass, um unsere Authentifizierungsbedenken zu erledigen.

Die Dokumentation des Passports beschreibt sie als "einfache, unauffällige Authentifizierung Middleware für Knoten" und zu Recht.

Durch die Bereitstellung von Middleware wird Passport hervorragende Arbeit darin, die anderen Bedenken einer Webanwendung von ihren Authentifizierungsanforderungen zu trennen. Es ermöglicht es, Passport einfach in eine expressbasierte Webanwendung zu konfigurieren, genau wie wir andere Express Middleware wie Protokollierung, Körper-Parsen, Cookie-Parsing und Sitzungsverarbeitung konfigurieren.

In diesem Tutorial wird ein grundlegendes Verständnis von Node.js und dem Express -Framework angenommen, um sich auf die Authentifizierung zu konzentrieren, obwohl wir eine Beispiel -Express -App von Grund auf neu erstellen. Wir werden die App sichern, indem wir Routen hinzufügen und einige dieser Routen authentifizieren.

Authentifizierungsstrategien

Der Pass bietet uns 500 Authentifizierungsmechanismen zur Auswahl. Sie können sich mit einer lokalen oder Remote-Datenbankinstanz authentifizieren oder die einzelne Sign-On verwenden, um OAuth-Anbieter für Facebook, Twitter, Google usw. zu verwenden, um sich mit Ihren Social-Media-Konten zu authentifizieren.

Machen Sie sich jedoch keine Sorgen: Sie müssen keine Strategie einfügen, die Ihre Anwendung nicht benötigt. Alle diese Strategien sind unabhängig voneinander und als separate Knotenmodule verpackt, die bei der Installation von Passport's Middleware: NPM Installation Express -Save nicht enthalten sind

Sie können den Express-Generator auch mit dem folgenden Code-Snippet installieren:

serializeUser function is used to persist a user's data into the session after successful authentication, while a passport , and create a file init.js with the following code snippets:

 var user = require ('../ models/user');<br><br> module.exports = function (passport) {<br><br> // Pass muss in der Lage sein, Benutzer zu serialisieren und zu deserialisieren, um anhaltende Anmeldesitzungen zu unterstützen<br> passport.Serializeiser (Funktion (Benutzer, fertig) {<br> console.log ('Serialisierender Benutzer:', Benutzer);<br> fone (null, user._id);<br> });<br><br> passport.DeserializEeuser (Funktion (id, erledigt) {<br> User.findbyId (id, Funktion (err, user) {<br> console.log ('Deserialisierender Benutzer:', Benutzer);<br> erledigt (ähm, Benutzer);<br> });<br> });<br> }<br>
Nach dem Login kopieren

Mit Passstrategien

We will now define Passport's strategies for handling login and signup . Each of them would be an instance of the Local Authentication Strategy of Passport and would be created using the npm i connect-flash .

Login -Strategie

Create a login.js file in the bcryptjs by executing the command passport.use() function.

 var bcrypt = required ('bcrypt-nodejs');<br><br> module.exports = function (passport) {<br><br> passport.use ('Login', ...)<br> );<br><br> var isvalidpassword = Funktion (Benutzer, Passwort) {<br> return bcrypt.comParesync (Passwort, user.Password);<br> }<br> }<br>
Nach dem Login kopieren

Wenn Sie sich mit den Code -Snippets unwohl fühlen und den vollständigen Code in Aktion vorziehen, können Sie den Code hier durchsuchen.

Registrierungsstrategie

Now, we create a signup.js file in the views folder of our application, we should see .jade files. Jade ist eine Templating-Engine, die hauptsächlich für die serverseitige Vorlagen in node.js. verwendet wird. Es ist eine leistungsstarke Art, Markup- und Rendering -Seiten dynamisch mit Express zu schreiben. Es gibt viel mehr Flexibilität als die Verwendung einer statischen HTML -Datei. Um mehr über Jade und wie es funktioniert, können Sie sich die Dokumentation ansehen.

Als nächstes erstellen wir die folgenden vier Ansichten für unsere Anwendung:

  1. layout.jade contains the basic layout and styling information.
  2. index.jade contains the login page providing the login form and giving the option to create a new account.
  3. register.jade contains the registration form.
  4. home.jade says hello and shows the logged-in user's details.
 docType html<br> html<br> Kopf<br> Titel = Titel<br> link (rel = 'stylesheet', href = '/stylesheets/style.css'))<br> link (rel = 'stylesheet', href = 'http: //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'))<br> Körper<br> Blockinhalt blockieren<br>
Nach dem Login kopieren

In the index.jade file, we will include the following code snippets:

 verlängert Layout<br><br> Blockinhalt blockieren<br> Div.Container<br> Div.row<br> div.col-sm-6.col-md-4.col-md-offset-4<br> H1.Text-center.login-title melden Sie sich in unserer Pass-App an<br> Div.Account-Wall<br> IMG (class = 'Profil-IMG', src = 'https: //lh5.googleusercontent.com/b0-k99fzlye/aaaaaaaaaai/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.jpg = 120')))<br> Formular (class = 'Form-Signin', action = '/login', method = 'post')<br> input (type = 'text', name = 'userername' class = 'form-control', placeholder = 'E-Mail', erforderlich, Autofokus)<br> input (type = 'password', name = 'password' class = 'form-control', placeholder = 'Passwort', erforderlich)<br> Taste (class = 'btn btn-lg btn-primary btn-block', type = 'subieren') Anmelden<br> span.clearFix<br> a (href = '/Signup', class = 'Text-Center New-Account) Erstellen Sie ein Konto<br> #Nachricht<br> Wenn Nachricht<br> H1.Text-center.Error-Message #{message}<br>
Nach dem Login kopieren

In the register.jade file, we'll include the following code snippets:

 verlängert Layout<br><br> Blockinhalt blockieren<br> Div.Container<br> Div.row<br> div.col-sm-6.col-md-4.col-md-offset-4<br> H1.Text-center.login-titelle Registrierungsdetails<br> Div.signup-wall<br> Form (class = 'Form-Signin', action = '/Signup', Method = 'Post')<br> input (type = 'text', name = 'userername', class = 'form-control', placeholder = 'Benutzername', erforderlich, Autofokus)<br> input (type = 'password', name = 'password', class = 'form-control nomargin', placeholder = 'Passwort', erforderlich)<br> input (type = 'E-Mail', name = 'E-Mail', class = 'Form-Control', Placeholder = 'E-Mail', erforderlich)<br> input (type = 'text', name = 'FirstName', class = 'Form-Control', Placeholder = 'Vorname', erforderlich)<br> input (type = 'text', name = 'lastname', class = 'form-control', placeholder = 'Nachname', erforderlich)<br> Taste (class = 'btn btn-lg btn-primary btn-block', type = 'subieren') Register<br> span.clearFix<br> #Nachricht<br> Wenn Nachricht<br> H1.Text-center.Error-Message #{message}<br>
Nach dem Login kopieren

In the home.jade file, we'll include the following code snippets:

 verlängert Layout<br><br> Blockinhalt blockieren<br> Div.Container<br> Div.row<br> div.col-sm-6.col-md-4.col-md-offset-4<br> #Benutzer<br> h1.text-center.login-title willkommen #{user.firstname}. Überprüfen Sie Ihre Details unten:<br> Div.signup-wall<br> Ul.User-Details<br> Li-Benutzername ---> #{user.username}<br> li E-Mail ---> #{user.email}<br> LI Vorname ---> #{user.firstname}<br> Li-Nachname ---> #{user.lastname}<br> a (href = '/champeout', class = 'text-center New-Account') Anmelden<br>
Nach dem Login kopieren

Jetzt sieht die Registrierungsseite so aus:

Authentifizierung von Node.js -Anwendungen mit Pass

Die Anmeldeseite sieht folgt aus:

Authentifizierung von Node.js -Anwendungen mit Pass

Und die Detailseite sieht so aus:

Authentifizierung von Node.js -Anwendungen mit Pass

Implementierung von Abmeldefunktionen

Passport, Middleware, ermöglicht es, bestimmte Eigenschaften und Methoden auf Anfrage- und Antwortobjekte hinzuzufügen. Passport has a very handy request.logout() method which invalidates the user session apart from other properties.

Es ist also einfach, eine Abmelderoute zu definieren:

 / * Logout handeln */<br> Router.get ('/Signout', Funktion (req, res, next) {<br> req.logout (function (err) {<br> if (err) {return next (err); }<br> res.redirect ('/')<br> })<br> });<br>
Nach dem Login kopieren

Strecken schützen

Der Pass bietet auch die Möglichkeit, den Zugriff auf eine Route zu schützen, die für einen anonymen Benutzer als nicht geeignet ist. Dies bedeutet, dass ein Benutzer versucht, auf http: // localhost: 3000/home zuzugreifen, ohne sich in der Anwendung zu authentifizieren, werden er auf die Startseite umgeleitet.

 / * Homepage bekommen */<br> Router.get ('/home', isauthenticated, function (req, res) {<br> res.render ('home', {user: req.user});<br> });<br><br> // Wie bei jeder Middleware ist es typisch, als nächstes aufzurufen ()<br> // Wenn der Benutzer authentifiziert ist<br> var isauthenticated = Funktion (req, res, next) {<br> if (req.isauthenticated ())<br> kehre als nächstes zurück ();<br> res.redirect ('/');<br> }<br>
Nach dem Login kopieren

Abschluss

Der Reisepass ist nicht der einzige Spieler in dieser Arena, wenn es um die Authentifizierung von Node.js -Anwendungen geht, sondern die Modularität, Flexibilität, Unterstützung der Community und die Tatsache, dass nur Middleware Passport eine gute Wahl macht.

Für einen detaillierten Vergleich von Pass und Allauth ist hier eine interessante und informative Perspektive des Entwicklers des Pass selbst.

Sie finden den vollständigen Quellcode für das Beispiel in unserem GitHub -Repo.

Wenn Sie sehen möchten, was Sie sonst noch mit node.js machen können, lesen Sie den Bereich von Node.js -Elementen auf dem Envato -Markt, von einem reaktionsschnellen AJAX -Kontaktformular zu einem URL -Shortener oder sogar einem Datenbank -CRUD -Generator.

Dieser Beitrag wurde mit Beiträgen von Mary Okosun aktualisiert. Mary ist Softwareentwickler mit Sitz in Lagos, Nigeria, mit Fachkenntnissen in Node.js, JavaScript, MySQL und NoSQL Technologies.

Das obige ist der detaillierte Inhalt vonAuthentifizierung von Node.js -Anwendungen mit Pass. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage