JWT-strategie implementeren
Integreer JSON Web Tokens (JWT) voor stateless authenticatie, inclusief het genereren en verifiëren van tokens.
JWT-strategie implementeren is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-les op CoddyKit. Dit is les 2 van 6. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackontwikkeling met Next.js 15 (App Router + Server Actions). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 6 lessen.
Wat is een JSON Web Token (JWT)?
Welkom! In deze les gaan we dieper in op JSON Web Tokens (JWT's), een populaire methode om API's te beveiligen.
- JWT's zijn compacte, URL-veilige middelen om claims weer te geven die tussen twee partijen worden overgedragen.
- Ze worden vaak gebruikt voor stateless authenticatie, wat betekent dat de server geen sessiegegevens hoeft op te slaan.
- Hierdoor zijn API's beter schaalbaar en gemakkelijker te beheren, vooral in gedistribueerde systemen.
De drie belangrijkste onderdelen van een JWT
Een JWT is in wezen een lange tekenreeks, maar deze is opgebouwd uit drie afzonderlijke onderdelen die door punten (.) van elkaar worden gescheiden:
- Header: Bevat metagegevens over het token zelf (bijvoorbeeld het type token en het ondertekeningsalgoritme).
- Payload: Bevat de daadwerkelijke claims of gegevens over de gebruiker en aanvullende eigenschappen.
- Signature: Wordt gebruikt om de integriteit en authenticiteit van het token te verifiëren.
Elk onderdeel is gecodeerd met Base64Url.
Header en payload in detail
Laten we de eerste twee onderdelen nader bekijken:
- Header: Bevat meestal twee velden:
"alg"(algoritme, bijvoorbeeld HS256) en"typ"(type, namelijk JWT). - Payload: Hier plaats je je gegevens, die bekendstaan als 'claims'. Veelgebruikte claims zijn:
sub(subject): Meestal de gebruikers-ID.exp(expiration time): Wanneer het token verloopt.iat(issued at): Wanneer het token is uitgegeven.- Aangepaste claims: Alle andere gegevens die je nodig hebt, zoals
"username"of"role".
De cryptografische signature
De signature is het cruciale derde onderdeel dat de beveiliging waarborgt:
- Deze wordt gemaakt door de gecodeerde header, de gecodeerde payload, een geheime sleutel en het in de header opgegeven algoritme te nemen.
- Deze combinatie wordt vervolgens cryptografisch gehasht.
- Waarom is dit belangrijk? Als iemand de header of payload probeert te wijzigen, mislukt de verificatie van de signature. Dat geeft aan dat het token ongeldig is of is gewijzigd.
- De geheime sleutel moet vertrouwelijk blijven aan de serverkant!
NestJS en JWT's
NestJS biedt uitstekende ondersteuning voor de integratie van JWT's en maakt onder de motorkap gebruik van de kracht van de bibliotheek jsonwebtoken.
We gebruiken voornamelijk het pakket @nestjs/jwt, dat een JwtModule en JwtService biedt om tokens naadloos binnen je applicatie te genereren en te verifiëren.
Eerst moet je het pakket installeren als je dat nog niet hebt gedaan:
npm install @nestjs/jwt passport-jwt --saveDe JwtModule configureren
Om JWT's in NestJS te gebruiken, moet je de JwtModule importeren en configureren in de module van je applicatie (bijvoorbeeld AppModule of een speciale AuthModule).
De belangrijkste optie is de sleutel secret, die wordt gebruikt om tokens te ondertekenen en te verifiëren.
import { Module } from '@nestjs/common';
import { JwtModule } from '@nestjs/jwt';
@Module({
imports: [
JwtModule.register({
secret: 'yourSuperSecretKey',
signOptions: { expiresIn: '60s' }, // e.g., 60s, 7d, 1h
}),
],
// ... other providers, controllers
})
export class AppModule {}
Een JWT genereren in NestJS
Nadat JwtModule is geconfigureerd, kun je JwtService in je services injecteren om nieuwe tokens te genereren (ondertekenen). De methode sign() neemt een payload (meestal een object) en maakt de JWT-tekenreeks.
import { Injectable } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';
@Injectable()
export class AuthService {
constructor(private jwtService: JwtService) {}
async signIn(user: any): Promise<string> {
const payload = { username: user.username, sub: user.userId };
return this.jwtService.sign(payload); // Signs with configured secret & options
}
}Coderegio: token genereren
Laten we conceptueel bekijken hoe een token wordt gegenereerd. In dit voorbeeld wordt de onderliggende bibliotheek jsonwebtoken rechtstreeks gebruikt, vergelijkbaar met de manier waarop NestJS dit doet.
Voer deze code uit om een JWT te maken:
// To run this, install 'jsonwebtoken':
// npm install jsonwebtoken --save
const jwt = require('jsonwebtoken');
const payload = {
sub: 'user123',
username: 'coder_kit'
};
const secret = 'mySuperSecretKey123'; // Keep this secret safe!
// Sign the token with an expiration of 1 hour
const token = jwt.sign(payload, secret, { expiresIn: '1h' });
console.log('--- Generated JWT ---');
console.log(token);
console.log('\nThis token is valid for 1 hour.');
Een JWT verifiëren in NestJS
Wanneer een client een JWT verstuurt, moet je server dit verifiëren. De methode JwtService.verify() controleert verschillende zaken:
- Is de signature geldig (oftewel: is deze met ons geheim ondertekend)?
- Is het token verlopen?
- Zijn er nog andere opgegeven validatieregels?
Als het token geldig is, retourneert de methode de gedecodeerde payload. Als het ongeldig is, wordt er een fout gegenereerd.
import { Injectable } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';
@Injectable()
export class AuthService {
constructor(private jwtService: JwtService) {}
async verifyToken(token: string): Promise<any> {
try {
const payload = this.jwtService.verify(token);
return payload; // Token is valid, return its data
} catch (error) {
// Token is invalid or expired
throw new Error('Invalid or expired token');
}
}
}Coderegio: token verifiëren
Zo werkt tokenverificatie. Je kunt het token gebruiken dat in de vorige stap is gegenereerd (of het gegeven voorbeeld) en bekijken hoe het wordt geverifieerd.
Let op: het voor de verificatie gebruikte secret MOET hetzelfde zijn als het geheim dat voor de ondertekening is gebruikt!
// To run this, install 'jsonwebtoken':
// npm install jsonwebtoken --save
const jwt = require('jsonwebtoken');
// IMPORTANT: Replace with a REAL token you generated,
// or use this example token (signed with 'mySuperSecretKey123')
const testToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c2VyMTIzIiwidXNlcm5hbWUiOiJjb2Rlcl9raXQiLCJpYXQiOjE3MDcwOTMyMTMsImV4cCI6MTcwNzE3OTYxM30.4i-J_q_e_x_a_m_p_l_e_s_i_g_n_a_t_u_r_e_f_o_r_d_e_m_o';
const secret = 'mySuperSecretKey123'; // Must match the signing secret!
console.log('--- Attempting to Verify Token ---');
try {
const decoded = jwt.verify(testToken, secret);
console.log('Token is VALID!');
console.log('Decoded Payload:');
console.log(decoded);
} catch (error) {
console.error('Token is INVALID or EXPIRED!');
console.error('Error:', error.message);
}
Controle van het JWT-concept
Je hebt de drie belangrijkste onderdelen van een JWT geleerd. Welk van de volgende onderdelen is voornamelijk verantwoordelijk voor het waarborgen van de integriteit van het token (dat er niet mee is geknoeid)?
Samenvatting: de essentie van JWT
Goed gedaan! Je hebt de basisprincipes van JWT's behandeld:
- Wat ze zijn: Compacte, stateless tokens voor authenticatie.
- Hun structuur: Header, Payload en Signature.
- Belangrijke concepten: Hoe de handtekening de integriteit beschermt en welke rol de geheime sleutel speelt.
- NestJS-integratie:
@nestjs/jwtgebruiken om tokens te configureren, ondertekenen en verifiëren.
Vervolgens bekijken we hoe je routes beschermt met Guards en toegangscontrole op basis van rollen implementeert!
Leer TypeScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 22
- Lessen
- 88
Veelgestelde vragen
Is de les “JWT-strategie implementeren” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackontwikkeling met Next.js 15 (App Router + Server Actions), waaronder “JWT-strategie implementeren”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 6 lessen.
Wat leer ik in “JWT-strategie implementeren”?
Integreer JSON Web Tokens (JWT) voor stateless authenticatie, inclusief het genereren en verifiëren van tokens. Je oefent met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) te beginnen?
Ervaring vooraf is niet nodig. Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 6.
Hoe lang duurt de les “JWT-strategie implementeren”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)?
Ja. Elke les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- NextAuth.js integreren
- JWT-strategie implementeren
- Routes en gegevens beveiligen
- Guards en rollen
- Aangepaste authenticatiestrategieën
- Passport.js integreren