Node verwendet koa2, um eine einfache JWT-Authentifizierungsmethode zu implementieren

Node verwendet koa2, um eine einfache JWT-Authentifizierungsmethode zu implementieren

Einführung in JWT

Was ist JWT

Der vollständige Name lautet JSON Web Token und ist derzeit die beliebteste domänenübergreifende Authentifizierungslösung. Die grundlegende Implementierung besteht darin, dass der Server nach der Authentifizierung ein JSON Objekt generiert und an den Benutzer zurücksendet. Wenn der Benutzer mit dem Server kommuniziert, muss dieses JSON Objekt zurückgesendet werden.

Das JSON sieht folgendermaßen aus:

{
 "Name": "Zhang San",
 "Rolle": "Administrator",
 "Ablaufzeit": "1. Juli 2018 00:00"
}

Warum brauchen wir JWT?

Schauen wir uns zunächst den allgemeinen Authentifizierungsprozess an, der auf der Implementierung session_id und Cookie basiert.

1. Der Benutzer sendet seinen Benutzernamen und sein Passwort an den Server.

2. Nach bestandener Server-Verifizierung werden relevante Daten wie Benutzerrolle, Login-Zeit etc. in der aktuellen session gespeichert.

3. Der Server gibt dem Benutzer eine session_id zurück und schreibt sie in das Cookie des Benutzers.

4. Jede nachfolgende Anfrage des Benutzers gibt session_id über Cookie an den Server zurück.

5. Der Server empfängt session_id und findet die zuvor gespeicherten Daten. Dadurch erkennt er die Identität des Benutzers.

Hier gibt es jedoch ein großes Problem. Wenn es sich um einen Servercluster handelt, ist eine gemeinsame Nutzung der Sitzungsdaten erforderlich und jeder Server kann die Sitzung lesen. Der Aufwand für diese Umsetzung ist relativ hoch.

JWT ändert die Idee und gibt JSON Daten an das Front-End zurück. Wenn das Front-End erneut anfordert, sendet es die Daten zur Überprüfung an das Back-End. Das heißt, der Server ist zustandslos und lässt sich daher leichter erweitern.

JWT-Datenstruktur

Die drei Teile von JWT sind wie folgt:

Header , ähnlich dem folgenden

{
 "alg": "HS256",
 "typ": "JWT"
}

alg -Attribut gibt den Signaturalgorithmus ( algorithm ) an, der Standard ist HMAC SHA256 (geschrieben als HS256 ). typ Attribut gibt den type des token an. JWT -Token werden als JWT

Payload . Es handelt sich auch um ein JSON , das zum Speichern der eigentlichen Daten verwendet wird, die übertragen werden müssen. JWT gibt 7 offizielle Felder an. Wie unten gezeigt

  • iss (issuer): Emittent
  • exp (Ablaufzeit): Ablaufzeit
  • sub (Betreff): Betreff
  • aud (Publikum): Publikum
  • nbf (Not Before): effektive Zeit
  • iat (Issued At): Ausgabezeitpunkt
  • jti (JWT-ID): ID

Natürlich können Sie auch private Felder anpassen. Beachten Sie jedoch, dass JWT standardmäßig unverschlüsselt ist und von jedem gelesen werden kann. Geben Sie in diesem Teil daher keine geheimen Informationen ein.

Signature . Signature ist eine Signatur der ersten beiden Teile, um Datenmanipulationen zu verhindern. Zuerst müssen Sie einen secret ) angeben. Dieser Schlüssel ist nur dem Server bekannt und kann dem Benutzer nicht mitgeteilt werden. Verwenden Sie dann den im Header angegebenen Signaturalgorithmus (der Standard ist HMAC SHA256 ) und generieren Sie eine Signatur gemäß der folgenden Formel.

HMACSHA256
 base64UrlEncode(Header) + "." +
 base64UrlEncode(Nutzlast),
 Geheimnis)

Nach der Berechnung der Signatur werden die drei Teile Header , Payload und Signature zu einem String zusammengefasst, die einzelnen Teile durch einen „Punkt“ (.) getrennt und können anschließend an den Benutzer zurückgegeben werden. Wie unten gezeigt

Sicherheit von JWT

  • JWT ist standardmäßig nicht verschlüsselt, kann aber verschlüsselt werden. Geheime Daten können nicht ohne JWT in JWT geschrieben werden
  • JWT selbst enthält Authentifizierungsinformationen. Sobald diese durchsickern, kann jeder alle Berechtigungen des Tokens erlangen. Um Diebstahl zu reduzieren, sollte die Gültigkeitsdauer des JWT kürzer eingestellt werden. Bei manchen wichtigen Berechtigungen muss der Benutzer bei der Nutzung erneut authentifiziert werden.
  • Um Diebstahl zu verhindern, sollte JWT nicht im Klartext über HTTP -Protokoll, sondern über das HTTPS -Protokoll übertragen werden.

Einfache Node-Demo – Implementierung von Koa JWT

Nachdem wir über theoretisches Wissen gesprochen haben, schauen wir uns an, wie JWT implementiert wird. Der allgemeine Prozess ist wie folgt:

Zunächst generiert der Server nach der Anmeldung des Benutzers token und gibt es basierend auf den Benutzerinformationen an den Client zurück. Das Frontend bringt token in der nächsten Anfrage zum Server. Nachdem der Server überprüft hat, dass es gültig ist, gibt er die Daten zurück. Wenn ungültig, geben Sie den Statuscode 401 zurück

Hier verwenden wir Node , um es zu implementieren. Die beiden wichtigsten verwendeten Bibliotheken sind

jsonwebtoken, kann token generieren, überprüfen usw.

Die Koa-jwt-Middleware kapselt jsonwebtoken weiter ein und wird hauptsächlich zur Überprüfung token verwendet.

Erstellen Sie schnell ein Koa-Projekt

Ich habe festgestellt, dass es derzeit keine offizielle Möglichkeit wie Vue-cli gibt, schnell ein koa Projekt zu erstellen. (Es kann sein, dass die Kosten für den Bau eines koa -Projekts auch niedrig sind). Aber ich bin faul, also habe ich ein Tool gefunden - den Koa-Generator, der relativ einfach zu verwenden ist, wie folgt

Installieren

npm install -g koa-generator

koa2 my-project erstellt ein neues koa2 -Projekt namens my-project

cd my-project und npm install

Starten Sie das Projekt npm start

Öffnen Sie localhost:3000

Token generieren

Zur Vereinfachung der Demonstration definiere ich die Variable userList direkt zum Speichern von Benutzerinformationen, die eigentlich in der Datenbank gespeichert werden sollten.

const crypto = erfordern("Krypto"),
 jwt = erforderlich("jsonwebtoken");
// TODO: Datenbank verwenden // Dies sollte in einer Datenbank gespeichert werden, dient aber nur zur Demonstration let userList = [];

Klasse UserController {
 // Benutzeranmeldung static async login(ctx) {
  Konstante Daten = ctx.request.body;
  wenn (!data.name || !data.password) {
   Rückgabewert ctx.body = {
    Code: "000002", 
    Meldung: „Ungültiger Parameter“
   }
  }
  const Ergebnis = Benutzerliste.find(Element => Element.name === Daten.name && Element.Passwort === crypto.createHash('md5').update(Daten.Passwort).digest('hex'))
  wenn (Ergebnis) {
   Konstantentoken = jwt.sign(
    {
     Name: Ergebnis.Name
    },
    "Gopal_token", // geheim
    { expiresIn: 60 * 60 } // 60 * 60 Sekunden
   );
   Rückgabewert ctx.body = {
    Code: "0",
    Meldung: "Anmeldung erfolgreich",
    Daten: {
     Zeichen
    }
   };
  } anders {
   Rückgabewert ctx.body = {
    Code: "000002",
    Meldung: „Falscher Benutzername oder falsches Passwort“
   };
  }
 }
}

module.exports = BenutzerController;

Generieren Sie ein token durch die sign von jsonwebtoken . Der erste Parameter dieser Methode bezieht sich auf Payload , also die Daten, die nach token gespeichert sind. Dies sind auch die Daten, die nach der Überprüfung token abgerufen werden können. Der zweite ist der geheime Schlüssel, der für den Server eindeutig ist. Beachten Sie, dass sie während der Überprüfung identisch sein müssen, um dekodiert zu werden, und dass sie vertraulich behandelt werden . Im Allgemeinen ist es am besten, eine öffentliche Variable zu definieren. Hier dient sie nur der Vereinfachung der Demonstration und ist direkt fest kodiert. Der dritte Parameter ist option , mit der token definiert werden kann

Der Client erhält ein Token

Nachdem sich das Front-End angemeldet und token erhalten hat, kann es in cookie oder im localStorage gespeichert werden. Hier speichere ich es direkt im localStorage

anmelden() {
 dies.$axios
  .post("/api/login", {
   ...diese.RegelForm,
  })
  .then(res => {
   wenn (res.code === "0") {
    this.$message.success('Anmeldung erfolgreich');
    localStorage.setItem("Token", res.data.token);
    dies.$router.push("/");
   } anders {
    dies.$Nachricht(res.Nachricht);
   }
  });
}

Kapseln Sie axios Interceptor ein und senden Sie bei jeder Anforderung token zur Überprüfung im Anforderungsheader an den Server. Wenn es zuvor in Cookie platziert wurde, kann es automatisch gesendet werden, dies kann jedoch nicht domänenübergreifend erfolgen. Daher wird empfohlen, es in den HTTP-Anforderungsheader Authorization einzufügen. Achten Sie hier auf die Authorization und fügen Sie Bearer davor hinzu. Weitere Einzelheiten finden Sie unter Bearer Authentication.

// Axios Request Interceptor verarbeitet Anforderungsdaten axios.interceptors.request.use(config => {
 const token = localStorage.getItem('token');
 config.headers.common['Authorization'] = 'Bearer ' + token; // Notieren Sie hier die Autorisierung
 Konfiguration zurückgeben;
})

Token überprüfen

Die Verwendung koa-jwt -Middleware zur Überprüfung ist relativ einfach, wie unten gezeigt

// Fehlerbehandlung app.use((ctx, next) => {
 returniere weiter().catch((err) => {
   wenn (err.status === 401) {
     ctx.status = 401;
    ctx.body = 'Geschützte Ressource, verwenden Sie den Autorisierungsheader, um Zugriff zu erhalten\n';
   }anders{
     Fehler machen;
   }
 })
})

// Hinweis: Platzieren Sie es vor der Route app.use(koajwt({
 Geheimnis: „Gopal_token“
}).unless({ // Whitelist-Pfad konfigurieren: [/\/api\/register/, /\/api\/login/]
}))

// Routen
app.verwenden(index.routes(), index.allowedMethods())
app.use(Benutzer.Routen(), Benutzer.allowedMethods())

Dabei ist es wichtig, folgende Punkte zu beachten:

  • secret muss das gleiche sein wie beim sign
  • Sie können die Whitelist der Schnittstelle über „es sei denn“ konfigurieren, unless , welche URL nicht überprüft werden müssen, wie z. B. Anmeldung/Registrierung.
  • Die Validierungs-Middleware muss vor der Route platziert werden, die validiert werden muss. Die vorhergehende URL kann nicht validiert werden.

Demo

Wenn Sie direkt auf eine Schnittstelle zugreifen, die eine Anmeldung erfordert, tritt 401 auf.

Registrieren Sie sich zuerst und melden Sie sich dann an. Andernfalls wird die Meldung angezeigt, dass der Benutzername oder das Passwort falsch ist.

Nach dem Einloggen Authorization Sie sich, Sie können normal zugreifen, 200 zurückgeben und die Daten korrigieren

Zusammenfassen

Dieser Artikel fasst das Wissen zur JWT -Authentifizierung zusammen und bietet eine einfache, von koa2 implementierte demo . Ich hoffe, es wird für alle hilfreich sein.

Aufgrund der Länge des Artikels habe ich die Möglichkeit, separat über den Quellcode von koa-jwt zu sprechen, der relativ einfach ist ~

Dieser Artikel demo -Adresse: Client und Server

siehe

JSON Web Token – Erste Schritte

Node.js-Anwendung: Koa2 verwendet JWT zur Authentifizierung

Dies ist das Ende dieses Artikels über die Verwendung von koa2 in Node, um eine einfache JWT-Authentifizierungsmethode zu implementieren. Weitere relevante Inhalte zur Node koa2 JWT-Authentifizierung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Beispiel, wie Node.js Koa2 JWT zur Authentifizierung verwendet

<<:  Trash-Cli: Befehlszeilen-Papierkorb-Tool unter Linux

>>:  Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 unter Windows 10

Artikel empfehlen

Schritte zum Erstellen eines WEBSERVERS mit NODE.JS

Inhaltsverzeichnis Was ist nodejs Installieren Si...

Detailliertes Beispiel des Kettenprogrammierstils von jQuery

Das Implementierungsprinzip der Kettenprogrammier...

Diskussion zur horizontalen und vertikalen Zentrierung von Elementen in HTML

Beim Entwerfen einer Seite müssen wir das DIV häu...

Beispiel und Lösung für einen SQL-Injection-Sicherheitslückenprozess

Codebeispiel: öffentliche Klasse JDBCDemo3 { öffe...

Lösen Sie das Docker.Socket-Berechtigungsproblem des VSCode-Docker-Plugins

Lösung: Beenden Sie alle mit .vscode in Zusammenh...

So verwenden Sie den Vue-Video-Player für eine Live-Übertragung

Inhaltsverzeichnis 1. Installieren Sie den Vue-Vi...

Ein auf Vue-cli basierender Codesatz unterstützt mehrere Projekte

Inhaltsverzeichnis Anwendungsszenario Ideen Proje...

CSS3 erzielt einen coolen Karusselleffekt mit geschnittenen Bildern

Heute lernen wir, wie man mit CSS eine coole Bild...

Lösung für die leere Seite nach einem vue.js-gepackten Projekt

Ich glaube, dass viele Partner, die gerade erst m...