Advertisement
  1. Code
  2. Databases

Passport mit Sequelize und MySQL verwenden

by
Read Time:18 minsLanguages:

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Sequelize ist ein auf Versprechen basierendes Node.js-ORM. Es kann mit PostgreSQL, MySQL, MariaDB, SQLite und MSSQL verwendet werden. In diesem Tutorial implementieren wir die Authentifizierung für Benutzer einer Web-App. Und wir werden Passport, die beliebte Authentifizierungs-Middleware für Node, zusammen mit Sequelize und MySQL verwenden, um die Benutzerregistrierung und -anmeldung zu implementieren.

Einstieg

Stellen Sie sicher, dass Folgendes auf Ihrem Computer installiert ist:

  • Node
  • MySQL

Für dieses Tutorial verwenden wir Node.js zusammen mit Express, also beginnen wir mit der Installation, was wir brauchen.

Schritt 1: Generieren Sie eine package.json-Datei

Erstellen Sie ein Verzeichnis für Ihre App. Führen Sie dies in diesem Verzeichnis von Ihrem Terminal oder Ihrer Eingabeaufforderung aus:

Dadurch wird der npm-Abhängigkeitsmanager initialisiert. Dies wird eine Reihe von Eingabeaufforderungen präsentieren, die wir schnell durchgehen werden.

  • Geben Sie den Namen Ihrer App ohne Leerzeichen ein und drücken Sie die Eingabetaste für "name".
  • Drücken Sie die Eingabetaste für die 'version'.
  • Für "description" geben wir in diesem Tutorial "Using Passport with Sequelize and MySQL" als Beschreibung ein und drücken die Eingabetaste. Dies kann auch leer sein.
  • Geben Sie für 'entry point (index.js)' server.js ein und drücken Sie die Eingabetaste.
  • Drücken Sie für 'test command' die Eingabetaste.
  • Für 'git repository' können Sie das Git-Repository eingeben, in dem sich Ihre App befindet, falls Sie eines haben, oder einfach die Eingabetaste drücken, um dieses Feld leer zu lassen.
  • Drücken Sie für 'Keywords' die Eingabetaste.
  • Drücken Sie für 'author' die Eingabetaste oder geben Sie Ihren Namen ein, bevor Sie dies tun.
  • Drücken Sie für 'license' die Eingabetaste.
  • Für '(Is this okay)' zeigt Ihnen dies, wie Ihre package.json aussehen wird. Geben Sie Ja ein und drücken Sie die Eingabetaste.

Schritt 2: Abhängigkeiten installieren

Die wichtigsten Abhängigkeiten für dieses Tutorial sind:

  • Express
  • Sequelize
  • MySQL
  • Passport
  • Passport Local Strategy
  • Body Parser
  • Express Session
  • Bcrypt Nodejs
  • Express Handlebars für die Ansichten

Um sie zu installieren, führen Sie von Ihrem Terminal oder Ihrer Eingabeaufforderung die folgenden Schritte nacheinander aus.

Wenn Sie Git für dieses Projekt verwenden:

Erstellen Sie in Ihrem Projektordner eine .gitignore-Datei.

Fügen Sie diese Zeile der .gitignore-Datei hinzu.

node_modules

Schritt 3: Einrichten der App

Nun erstellen wir eine Serverdatei. Dies ist die Hauptdatei, die aufgerufen wird, wenn Sie Folgendes eingeben:

Dadurch wird die App ausgeführt. Sie können die App auch ausführen, indem Sie node server.js eingeben.

Dann erstellen wir in unserem Projektordner eine neue Datei und nennen diese Datei server.js.

In die Datei server.js fügen wir Folgendes ein:

Die erste Zeile weist das Express-Modul einer Variablen express zu. Wir initialisieren dann express und nennen es eine Variable: app.

Dann lassen wir die App auf Port 5000 lauschen. Sie können eine beliebige freie Portnummer auf Ihrem Computer wählen.

Als nächstes rufen wir die Express-Routing-Funktion app.get() auf, um mit "Welcome to Passport with Sequelize" zu antworten, wenn eine GET-Anfrage an "/" gestellt wird.

Um auf Ihrem Computer zu testen, führen Sie dies in Ihrem Projektordner aus:

Wenn Sie beim Besuch von http://localhost:5000/ den Text "Welcome to Passport with Sequelize" sehen, dann herzlichen Glückwunsch! Überprüfen Sie andernfalls, ob Sie alles genau so gemacht haben, wie es oben beschrieben wurde.

Als nächstes importieren wir einige Module, die wir benötigen, wie Passport, Express-Session und Body-Parser.

Nach var app = express() fügen wir die folgenden Zeilen hinzu:

In den ersten beiden Zeilen importieren wir das Passport-Modul und die Express-Session, die wir beide für die Authentifizierung benötigen.

Dann importieren wir das Body-Parser-Modul. Dadurch wird der gesamte Textteil einer eingehenden Anforderung extrahiert und in einem Format bereitgestellt, mit dem die Arbeit einfacher ist. In diesem Fall verwenden wir das JSON-Format.

Damit unsere App den Body-Parser verwenden kann, fügen wir diese Zeilen einige Leerzeichen unter den Importzeilen hinzu:

Als nächstes initialisieren wir Passport und die Express- und Passport-Sitzung und fügen beide als Middleware hinzu. Dazu fügen wir diese Zeilen einige Leerzeichen nach der bodyParser-Importzeile hinzu.

Wir werden jetzt mit der eigentlichen Authentifizierung beginnen.

Wir machen das in vier Schritten:

  • Sequelize mit MySQL einrichten.
  • Erstellen Sie das Benutzermodell.
  • Ansichten einrichten.
  • Schreiben Sie eine Passstrategie.

1. Sequelize mit MySQL einrichten

Zuerst erstellen wir eine Datenbank in MySQL. Geben Sie ihm Ihren bevorzugten Namen. Lassen Sie uns für dieses Tutorial eine Datenbank mit dem Namen sequelize_passport in MySQL erstellen.

Dann richten wir die Konfiguration ein, um DB-Details zu verarbeiten.

Lassen Sie uns zunächst das dot-env-Modul importieren, um Umgebungsvariablen zu verarbeiten.

Führen Sie dies in Ihrem Stammprojektordner aus:

Dann importieren wir es in die Hauptserverdatei server.js, direkt unter den anderen Importen.

Als nächstes erstellen wir eine Datei in unserem Projektordner und nennen sie .env.

Dieser nächste Schritt ist optional, wenn Sie Git nicht verwenden:

Wir fügen die .env-Datei zu Ihrer .gitignore-Datei hinzu.

Ihre .gitignore-Datei sollte so aussehen:

Danach fügen wir unsere Umgebung der .env-Datei hinzu, indem wir diese Zeile hinzufügen:

NODE_ENV='development'

Dann erstellen wir eine config.json-Datei, die von Sequelize verwendet wird, um verschiedene Umgebungen zu verwalten.

Als erstes erstellen Sie einen Ordner namens config in unserem Projektordner. In diesem Ordner erstellen wir eine config.json-Datei. Diese Datei sollte ignoriert werden, wenn Sie auf ein Repository pushen. Fügen Sie dazu Ihrer .gitignore-Datei den folgenden Code hinzu:

config/config.json

Dann fügen wir den folgenden Code in unsere Datei config.json ein.

Denken Sie daran, die Werte im obigen Entwicklungsblock durch Ihre Datenbankauthentifizierungsdetails zu ersetzen.

Als nächstes installieren wir Sequelize mit npm. Führen Sie dazu den folgenden Befehl im Stammordner des Projekts aus:

Jetzt ist es an der Zeit, den models-Ordner zu erstellen.

Zuerst erstellen wir ein Verzeichnis namens app in unserem Projektordner.

Innerhalb des app-Ordners erstellen wir einen neuen Ordner namens models und erstellen eine neue Datei namens index.js im Ordner models.

In die Datei index.js fügen wir den folgenden Code ein.

Diese Datei wird verwendet, um alle Modelle, die wir im models-Ordner platzieren, zu importieren und zu exportieren.

Um zu testen, ob alles in Ordnung ist, fügen wir dies in unsere Datei server.js ein.

Hier importieren wir die Modelle und rufen dann die Sequelize-Synchronisierungsfunktion auf.

Führen Sie dies aus, um zu sehen, ob alles in Ordnung ist:

Wenn Sie die Meldung "Site is live Nice! Database sieht in Ordnung" erhalten, haben Sie Sequelize erfolgreich eingerichtet.

Wenn nicht, gehen Sie bitte die obigen Schritte sorgfältig durch und versuchen Sie, das Problem mit Hilfe zu beheben.

2. Erstellen Sie das Benutzermodell

Als nächstes erstellen wir das Benutzermodell, das im Grunde die Benutzertabelle ist. Diese enthält grundlegende Benutzerinformationen.

In unserem models-Ordner erstellen wir eine Datei und nennen sie user.js. Der vollständige Pfad für diese Datei sollte app/models/user.js lauten.

Öffnen Sie die Datei user.js und fügen Sie den folgenden Code hinzu:

Führen Sie nun aus:

Sie sollten das bekannte "Site is live. Nice! Database sieht in Ordnung" sehen. Botschaft. Dies bedeutet, dass unsere Sequelize-Modelle erfolgreich synchronisiert wurden, und wenn Sie Ihre Datenbank überprüfen, sollten Sie eine Benutzertabelle mit den angegebenen Spalten sehen.

3: Ansichten einrichten

Zuerst erstellen wir die Ansicht für die Anmeldung und verbinden sie.

Als erstes müssen Sie das Express-Lenkermodul importieren, das wir in diesem Tutorial für Ansichten verwenden.

Fügen Sie diese Zeile der Hauptstartdatei server.js hinzu.

var exphbs = require('express-handlebars')

Ihr Importblock sollte jetzt so aussehen.

Als nächstes fügen wir die folgenden Zeilen in unsere Datei server.js ein.

Jetzt erstellen wir in unserem App-Ordner drei Ordner mit den Namen Ansichten, Controller und Routen.

Im Ordner "views" erstellen wir eine Datei namens signup.hbs und fügen den folgenden Code darin ein.

Dann erstellen wir in unserem controllers-Ordner eine neue Datei und nennen sie authcontroller.js.

In diese Datei fügen wir den folgenden Controller für die Anmelderoute ein, die wir gleich erstellen werden.

Als nächstes erstellen wir eine Route für die Anmeldung. Im Routenordner erstellen wir eine neue Datei namens auth.js und importieren dann in dieser Datei den Auth-Controller und definieren die Anmelderoute.

Jetzt importieren wir diese Route in unsere server.js und übergeben app als Argument.

Fügen Sie im Server nach dem Import der Modelle die folgenden Zeilen hinzu:

Führen Sie dies aus:

Besuchen Sie jetzt http://localhost:5000/signup und Sie sehen das Anmeldeformular.

Wiederholen Sie die Schritte für das Anmeldeformular. Wie zuvor erstellen wir eine Datei namens signin.hbs in unserem Ansichtenordner und fügen den folgenden HTML-Code darin ein:

Fügen Sie dann einen Controller für die Anmeldung in app/controllers/authcontroller.js hinzu.

Dann fügen wir in app/routes/auth.js eine Route für die Anmeldung wie folgt hinzu:

app.get('/signin', authController.signin);

Wenn Sie jetzt laufen:

und besuchen Sie http://localhost:5000/signin/, Sie sollten das Anmeldeformular sehen.

Der letzte und wichtigste Schritt ist das Schreiben unserer Passstrategien.

4. Schreiben Sie eine Pass-Strategie

In app/config erstellen wir einen neuen Ordner namens passport.

Dann erstellen wir in unserem neuen Ordner app/config/passport eine neue Datei und nennen sie passport.js. Diese Datei enthält unsere Passstrategien.

In passport.js verwenden wir das Benutzermodell und den Passport.

Zuerst importieren wir bcrypt, das wir zum Sichern von Passwörtern benötigen.

var bCrypt = require('bcrypt-nodejs');

Dann fügen wir einen module.exports-Block wie folgt hinzu:

In diesem Block initialisieren wir die Passport-Local-Strategie und das Benutzermodell, das als Argument übergeben wird. So machen wir das:

Dann definieren wir unsere benutzerdefinierte Strategie mit unserer Instanz der LocalStrategy wie folgt:

Jetzt haben wir deklariert, welche Anfragefelder (req) unser usernameField und passwordField (Passport-Variablen) sind.

Die letzte Variable passReqToCallback ermöglicht es uns, die gesamte Anfrage an den Callback zu übergeben, was besonders für die Anmeldung nützlich ist.

Nach dem letzten Komma fügen wir diese Callback-Funktion hinzu.

In dieser Funktion übernehmen wir die Speicherung von Benutzerdaten.

Zuerst fügen wir unsere Funktion zum Generieren von Hash-Passwörtern in die Callback-Funktion ein.

Dann überprüfen wir mit dem Sequelize-Benutzermodell, das wir zuvor als User initialisiert haben, ob der Benutzer bereits existiert, und fügen ihn gegebenenfalls hinzu.

User.create() ist eine Sequelize-Methode zum Hinzufügen neuer Einträge zur Datenbank. Beachten Sie, dass die Werte im data-Objekt aus dem req.body-Objekt stammen, das die Eingabe aus unserem Anmeldeformular enthält.

Ihre passport.js sollte so aussehen:

Jetzt importieren wir die Strategie in server.js.

Dazu fügen wir diese Zeilen unterhalb des Routenimports in server.js hinzu.

Ihre server.js sollte zu diesem Zeitpunkt so aussehen:

Jetzt werden wir die Strategie tatsächlich auf unsere /signup-Route anwenden.

So machen wir das:

Zuerst gehen wir zu app/routes/auth.js und fügen eine Route zum Posten hinzu, um sich wie folgt anzumelden.

Da wir einen Reisepass benötigen, müssen wir ihn an diese Methode übergeben. Wir können den Passport in dieses Skript importieren oder von server.js übergeben. Machen wir letzteres.

Ändern Sie die exportierte Funktion in dieser Datei app/routes/auth.js so, dass sie Passport als Parameter hat. Der Code in app/routes/auth.js sollte nach Ihrer Änderung so aussehen.

Dann ändern wir in server.js den Routenimport und fügen den Passport wie folgt als Argument hinzu:

var authRoute = require('./app/routes/auth.js')(app,passport);

Gehen Sie nun zur Anmelde-URL http://localhost:5000/signup/ und versuchen Sie, sich anzumelden.

Wenn Sie versuchen, sich anzumelden, erhalten Sie eine Fehlermeldung "Fehler beim Serialisieren des Benutzers in die Sitzung". Dies liegt daran, dass Passport eine Benutzer-ID in der Sitzung speichern muss und diese verwendet, um das Abrufen der Benutzerdetails bei Bedarf zu verwalten.

Um dies zu lösen, implementieren wir die Serialisierungs- und Deserialisierungsfunktionen von Passport in unserer Datei app/config/passport/passport.js.

Zuerst fügen wir die Serialisierungsfunktion hinzu. In dieser Funktion speichern wir die user id in der Sitzung.

Dazu fügen wir die folgenden Zeilen unterhalb der Initialisierung der lokalen Strategie ein.

Als nächstes implementieren wir die Deserialize-Funktion. Fügen Sie die Funktion direkt unter der Serialisierungsfunktion hinzu.

In der obigen Deserialize-Funktion verwenden wir das Sequelize findById-Versprechen, um den Benutzer abzurufen, und bei Erfolg wird eine Instanz des Sequelize-Modells zurückgegeben. Um das User-Objekt von dieser Instanz abzurufen, verwenden wir die Sequelize-Getter-Funktion wie folgt: user.get().

Jetzt noch einmal ausführen:

Und versuchen Sie sich anzumelden. Hurra, wenn Sie das "Cannot GET /dashboard" bekommen haben! Dies bedeutet, dass unsere Authentifizierung erfolgreich war. Denken Sie daran, dass wir in unserer Methode Passport.authenticate in routes/auth.js auf /dashboard umgeleitet haben.

Lassen Sie uns nun fortfahren und diese Route hinzufügen. Fügen Sie dann eine Middleware hinzu, um sicherzustellen, dass die Seite nur aufgerufen werden kann, wenn ein Benutzer bei der Sitzung angemeldet ist.

In unserem app/views-Ordner erstellen wir eine neue Datei namens dashboard.hbs und fügen den folgenden HTML-Code hinzu.

In routes/auth.js fügen wir diese Zeile innerhalb des module.exports-Blocks hinzu:

app.get('/dashboard',authController.dashboard);

Als nächstes gehen wir zu app/controllers/authController.js und fügen den Dashboard-Controller hinzu.

Ihre AuthController.js sollte so aussehen:

Führen Sie nun die App erneut aus und versuchen Sie, sich mit einer anderen E-Mail-Adresse als der zuvor verwendeten anzumelden. Sie werden entsprechend zur /dashboard-Route weitergeleitet.

Aber /dashboard ist keine geschützte Route, das heißt, auch wenn ein Benutzer nicht angemeldet ist, kann er ihn sehen. Wir wollen dies nicht, also fügen wir eine /logout-Route hinzu, um den Benutzer abzumelden, und schützen dann die Route und testen, was wir getan haben.

Lass uns das machen:

In routes/auth.js fügen wir diese Zeile hinzu:

app.get('/logout',authController.logout);

Dann fügen wir den Controller in app/controllers/authController.js hinzu.

Führen Sie nun die App erneut aus und melden Sie sich mit einer anderen E-Mail-Adresse an.

Rufen Sie danach http://localhost:5000/logout auf, um den Benutzer abzumelden. Besuchen Sie jetzt http://localhost:5000/dashboard.

Sie werden feststellen, dass es gut zugänglich ist. Fügen wir eine benutzerdefinierte Middleware hinzu, um diese Route zu schützen.

Dazu öffnen wir app/routes/auth.js und fügen diese Funktion im module.exports-Block unter allen anderen Codezeilen hinzu.

Dann ändern wir den Routen-Handler des Dashboards so, dass er wie folgt aussieht:

app.get('/dashboard',isLoggedIn, authController.dashboard);

Wenn Sie nun die App erneut ausführen und versuchen, die Dashboard-Seite zu besuchen und nicht angemeldet sind, sollten Sie zur Anmeldeseite weitergeleitet werden.

Wütend! Es ist Zeit, den letzten Teil zu implementieren: die Anmeldung.

Zuerst fügen wir eine neue lokale Strategie für die Anmeldung in app/config/passport/passport.js hinzu.

Bei dieser Strategie vergleicht die Funktion isValidPassword das eingegebene Passwort mit der Vergleichsmethode bCrypt, da wir unser Passwort bei bcrypt gespeichert haben.

Wenn die Angaben korrekt sind, wird unser Benutzer angemeldet.

Gehen Sie nun zu routes/auth.js und fügen Sie die Route zum Posten zu /signin hinzu.

Ihre routes/auth.js sollten so aussehen, wenn Sie fertig sind.

Führen Sie nun die App aus und versuchen Sie, sich anzumelden. Sie sollten sich mit allen Details anmelden können, die Sie bei der Anmeldung verwendet haben, und Sie werden zu http://localhost:5000/dashboard/ weitergeleitet.

Herzlichen Glückwunsch, wenn Sie es bis zum Ende dieses Tutorials geschafft haben! Wir haben Sequelize und Passport erfolgreich mit einer MySQL-Datenbank verwendet.

Den vollständigen Code für dieses Tutorial finden Sie auf GitHub.

Abschluss

Damit ist unser Tutorial zur Verwendung von Passport zur Authentifizierung von Benutzern mit Sequelize und MySQL abgeschlossen. Sequelize ist ein wirklich nützliches ORM für den Umgang mit MySQL bei der Verwendung von Node. Ich persönlich fand es sehr nützlich, und Sie sollten auf jeden Fall in Betracht ziehen, es in Ihrer nächsten Node-MySQL-App zu verwenden.

Verweise

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.