TypeScript-autentisering: JWT-typsäkerhetsmönster för globala applikationer

I dagens sammankopplade värld är det av största vikt att bygga säkra och pålitliga globala applikationer. Autentisering, processen att verifiera en användares identitet, spelar en kritisk roll för att skydda känslig data och säkerställa auktoriserad åtkomst. JSON Web Tokens (JWT:er) har blivit ett populärt val för att implementera autentisering på grund av deras enkelhet och portabilitet. När de kombineras med TypeScripts kraftfulla typsystem kan JWT-autentisering göras ännu mer robust och underhållbar, särskilt för storskaliga, internationella projekt.

Varför använda TypeScript för JWT-autentisering?

TypeScript ger flera fördelar när man bygger autentiseringssystem:

• Typsäkerhet: TypeScripts statiska typning hjälper till att fånga fel tidigt i utvecklingsprocessen, vilket minskar risken för överraskningar vid körning. Detta är avgörande för säkerhetskänsliga komponenter som autentisering.
• Förbättrad kodunderhåll: Typer tillhandahåller tydliga kontrakt och dokumentation, vilket gör det enklare att förstå, modifiera och refaktorera kod, särskilt i komplexa globala applikationer där flera utvecklare kan vara involverade.
• Förbättrad kodkomplettering och verktyg: TypeScript-medvetna IDE:er erbjuder bättre kodkomplettering, navigering och refaktoreringsverktyg, vilket ökar utvecklarens produktivitet.
• Minskad boilerplate: Funktioner som gränssnitt och generiska kan hjälpa till att minska boilerplate-kod och förbättra kodens återanvändbarhet.

Förstå JWT:er

En JWT är ett kompakt, URL-säkert sätt att representera anspråk som ska överföras mellan två parter. Den består av tre delar:

1. Header: Specificerar algoritmen och typen av token.
2. Payload: Innehåller anspråk, såsom användar-ID, roller och utgångstid.
3. Signatur: Säkerställer tokenens integritet med hjälp av en hemlig nyckel.

JWT:er används vanligtvis för autentisering eftersom de enkelt kan verifieras på serversidan utan att behöva fråga en databas för varje begäran. Det avråds dock generellt från att lagra känslig information direkt i JWT-payloaden.

Implementera typsäker JWT-autentisering i TypeScript

Låt oss utforska några mönster för att bygga typsäkra JWT-autentiseringssystem i TypeScript.

1. Definiera payload-typer med gränssnitt

Börja med att definiera ett gränssnitt som representerar strukturen för din JWT-payload. Detta säkerställer att du har typsäkerhet när du kommer åt anspråk inom token.

interface JwtPayload {
  userId: string;
  email: string;
  roles: string[];
  iat: number; // Utfärdad (tidsstämpel)
  exp: number; // Utgångstid (tidsstämpel)
}

Detta gränssnitt definierar den förväntade formen av JWT-payloaden. Vi har inkluderat standard JWT-anspråk som `iat` (utfärdad) och `exp` (utgångstid) som är avgörande för att hantera tokenens giltighet. Du kan lägga till andra anspråk som är relevanta för din applikation, som användarroller eller behörigheter. Det är god praxis att begränsa anspråken till endast nödvändig information för att minimera tokenstorleken och förbättra säkerheten.

Exempel: Hantera användarroller i en global e-handelsplattform

Tänk dig en e-handelsplattform som betjänar kunder över hela världen. Olika användare har olika roller:

• Admin: Full åtkomst för att hantera produkter, användare och beställningar.
• Säljare: Kan lägga till och hantera sina egna produkter.
• Kund: Kan bläddra och köpa produkter.

Arrayen `roles` i `JwtPayload` kan användas för att representera dessa roller. Du kan utöka egenskapen `roles` till en mer komplex struktur som representerar användarens åtkomsträttigheter på ett granulärt sätt. Du kan till exempel ha en lista över länder som användaren får verka i som säljare, eller en array med butiker som användaren har administratörsåtkomst till.

2. Skapa en typad JWT-tjänst

Skapa en tjänst som hanterar JWT-skapande och verifiering. Denna tjänst bör använda gränssnittet `JwtPayload` för att säkerställa typsäkerhet.

import jwt from 'jsonwebtoken';

const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key'; // Lagra säkert!

class JwtService {
  static sign(payload: Omit, expiresIn: string = '1h'): string {
    const now = Math.floor(Date.now() / 1000);
    const payloadWithTimestamps: JwtPayload = {
        ...payload,
        iat: now,
        exp: now + parseInt(expiresIn) * 60 * 60,
    };
    return jwt.sign(payloadWithTimestamps, JWT_SECRET);
  }

  static verify(token: string): JwtPayload | null {
    try {
      const decoded = jwt.verify(token, JWT_SECRET) as JwtPayload;
      return decoded;
    } catch (error) {
      console.error('JWT verification error:', error);
      return null;
    }
  }
}

Denna tjänst tillhandahåller två metoder:

• `sign()`: Skapar en JWT från en payload. Den tar en `Omit` för att säkerställa att `iat` och `exp` genereras automatiskt. Det är viktigt att lagra `JWT_SECRET` säkert, helst med hjälp av miljövariabler och en hemlighetshanteringslösning.
• `verify()`: Verifierar en JWT och returnerar den avkodade payloaden om den är giltig, eller `null` om den är ogiltig. Vi använder en typassertion `as JwtPayload` efter verifiering, vilket är säkert eftersom metoden `jwt.verify` antingen kastar ett fel (fångat i `catch`-blocket) eller returnerar ett objekt som matchar den payloadstruktur vi definierade.

Viktiga säkerhetsöverväganden:

• Hantering av hemlig nyckel: Hårdkoda aldrig din JWT-hemliga nyckel i din kod. Använd miljövariabler eller en dedikerad tjänst för hantering av hemligheter. Rotera nycklarna regelbundet.
• Val av algoritm: Välj en stark signeringsalgoritm, t.ex. HS256 eller RS256. Undvik svaga algoritmer som `none`.
• Tokenutgång: Ange lämpliga utgångstider för dina JWT:er för att begränsa effekten av komprometterade tokens.
• Tokenlagring: Lagra JWT:er säkert på klientsidan. Alternativen inkluderar HTTP-only cookies eller lokal lagring med lämpliga försiktighetsåtgärder mot XSS-attacker.

3. Skydda API-slutpunkter med middleware

Skapa middleware för att skydda dina API-slutpunkter genom att verifiera JWT i rubriken `Authorization`.

import { Request, Response, NextFunction } from 'express';

interface RequestWithUser extends Request {
  user?: JwtPayload;
}

function authenticate(req: RequestWithUser, res: Response, next: NextFunction) {
  const authHeader = req.headers.authorization;

  if (!authHeader) {
    return res.status(401).json({ message: 'Unauthorized' });
  }

  const token = authHeader.split(' ')[1]; // Antar Bearer-token
  const decoded = JwtService.verify(token);

  if (!decoded) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  req.user = decoded;
  next();
}

export default authenticate;

Denna middleware extraherar JWT från rubriken `Authorization`, verifierar den med hjälp av `JwtService` och bifogar den avkodade payloaden till objektet `req.user`. Vi definierar också ett gränssnitt `RequestWithUser` för att utöka standardgränssnittet `Request` från Express.js och lägga till en egenskap `user` av typen `JwtPayload | undefined`. Detta ger typsäkerhet när du kommer åt användarinformation i skyddade rutter.

Exempel: Hantera tidszoner i en global applikation

Tänk dig att din applikation tillåter användare från olika tidszoner att schemalägga händelser. Du kanske vill lagra användarens föredragna tidszon i JWT-payloaden för att korrekt visa händelsetider. Du kan lägga till ett anspråk `timeZone` till gränssnittet `JwtPayload`:

interface JwtPayload {
  userId: string;
  email: string;
  roles: string[];
  timeZone: string; // t.ex. 'America/Los_Angeles', 'Asia/Tokyo'
  iat: number;
  exp: number;
}

Sedan, i din middleware eller rutthanterare, kan du komma åt `req.user.timeZone` för att formatera datum och tider enligt användarens preferenser.

4. Använda den autentiserade användaren i rutthanterare

I dina skyddade rutthanterare kan du nu komma åt den autentiserade användarens information via objektet `req.user`, med fullständig typsäkerhet.

import express, { Request, Response } from 'express';
import authenticate from './middleware/authenticate';

const app = express();

app.get('/profile', authenticate, (req: Request, res: Response) => {
  const user = (req as any).user; // eller använd RequestWithUser
  res.json({ message: `Hej, ${user.email}!`, userId: user.userId });
});

Detta exempel visar hur du kommer åt den autentiserade användarens e-postadress och ID från objektet `req.user`. Eftersom vi definierade gränssnittet `JwtPayload` vet TypeScript den förväntade strukturen för objektet `user` och kan tillhandahålla typkontroll och kodkomplettering.

5. Implementera rollbaserad åtkomstkontroll (RBAC)

För mer finkornig åtkomstkontroll kan du implementera RBAC baserat på de roller som lagras i JWT-payloaden.

function authorize(roles: string[]) {
  return (req: RequestWithUser, res: Response, next: NextFunction) => {
    const user = req.user;

    if (!user || !user.roles.some(role => roles.includes(role))) {
      return res.status(403).json({ message: 'Forbidden' });
    }

    next();
  };
}

Denna `authorize`-middleware kontrollerar om användarens roller innehåller någon av de obligatoriska rollerna. Om inte returneras ett 403 Forbidden-fel.

app.get('/admin', authenticate, authorize(['admin']), (req: Request, res: Response) => {
  res.json({ message: 'Välkommen, Admin!' });
});

Detta exempel skyddar rutten `/admin` och kräver att användaren har rollen `admin`.

Exempel: Hantera olika valutor i en global applikation

Om din applikation hanterar finansiella transaktioner kan du behöva stödja flera valutor. Du kan lagra användarens föredragna valuta i JWT-payloaden:

interface JwtPayload {
  userId: string;
  email: string;
  roles: string[];
  currency: string; // t.ex. 'USD', 'EUR', 'JPY'
  iat: number;
  exp: number;
}

Sedan, i din backend-logik, kan du använda `req.user.currency` för att formatera priser och utföra valutakonverteringar efter behov.

6. Uppdateringstokens

JWT:er är kortlivade av design. För att undvika att användare behöver logga in ofta, implementera uppdateringstokens. En uppdateringstoken är en långlivad token som kan användas för att erhålla en ny åtkomsttoken (JWT) utan att användaren behöver ange sina referenser igen. Lagra uppdateringstokens säkert i en databas och associera dem med användaren. När en användares åtkomsttoken upphör att gälla kan de använda uppdateringstoken för att begära en ny. Denna process måste implementeras noggrant för att undvika säkerhetsbrister.

Avancerade typsäkerhetstekniker

1. Diskriminerade unioner för finkornig kontroll

Ibland kan du behöva olika JWT-payloader baserat på användarens roll eller typ av begäran. Diskriminerade unioner kan hjälpa dig att uppnå detta med typsäkerhet.

interface AdminJwtPayload {
  type: 'admin';
  userId: string;
  email: string;
  roles: string[];
  iat: number;
  exp: number;
}

interface UserJwtPayload {
  type: 'user';
  userId: string;
  email: string;
  iat: number;
  exp: number;
}

type JwtPayload = AdminJwtPayload | UserJwtPayload;

function processToken(payload: JwtPayload) {
  if (payload.type === 'admin') {
    console.log('Admin e-post:', payload.email); // Säkert att komma åt e-post
  } else {
    // payload.email är inte tillgängligt här eftersom typen är 'user'
    console.log('Användar-ID:', payload.userId);
  }
}

Detta exempel definierar två olika JWT-payloadtyper, `AdminJwtPayload` och `UserJwtPayload`, och kombinerar dem till en diskriminerad union `JwtPayload`. Egenskapen `type` fungerar som en diskriminator, vilket gör att du säkert kan komma åt egenskaper baserat på payloadtypen.

2. Generics för återanvändbar autentiseringslogik

Om du har flera autentiseringsscheman med olika payloadstrukturer kan du använda generics för att skapa återanvändbar autentiseringslogik.

interface BaseJwtPayload {
  userId: string;
  iat: number;
  exp: number;
}

function verifyToken(token: string): T | null {
  try {
    const decoded = jwt.verify(token, JWT_SECRET) as T;
    return decoded;
  } catch (error) {
    console.error('JWT verification error:', error);
    return null;
  }
}

const adminToken = verifyToken('admin-token');
if (adminToken) {
  console.log('Admin e-post:', adminToken.email);
}

Detta exempel definierar en funktion `verifyToken` som tar en generisk typ `T` som utökar `BaseJwtPayload`. Detta gör att du kan verifiera tokens med olika payloadstrukturer samtidigt som du säkerställer att de alla åtminstone har egenskaperna `userId`, `iat` och `exp`.

Överväganden för globala applikationer

När du bygger autentiseringssystem för globala applikationer bör du överväga följande:

• Lokalisering: Se till att felmeddelanden och gränssnittselement är lokaliserade för olika språk och regioner.
• Tidszoner: Hantera tidszoner korrekt när du ställer in tokenens utgångstider och visar datum och tider för användare.
• Dataskydd: Följ dataskyddsförordningar som GDPR och CCPA. Minimera mängden personuppgifter som lagras i JWT:er.
• Tillgänglighet: Designa dina autentiseringsflöden så att de är tillgängliga för användare med funktionsnedsättningar.
• Kulturell känslighet: Var uppmärksam på kulturella skillnader när du designar användargränssnitt och autentiseringsflöden.

Slutsats

Genom att utnyttja TypeScripts typsystem kan du bygga robusta och underhållbara JWT-autentiseringssystem för globala applikationer. Att definiera payloadtyper med gränssnitt, skapa typade JWT-tjänster, skydda API-slutpunkter med middleware och implementera RBAC är viktiga steg för att säkerställa säkerhet och typsäkerhet. Genom att beakta globala applikationshänsyn som lokalisering, tidszoner, dataskydd, tillgänglighet och kulturell känslighet kan du skapa autentiseringsupplevelser som är inkluderande och användarvänliga för en mångfaldig internationell publik. Kom ihåg att alltid prioritera säkerhetspraxis när du hanterar JWT:er, inklusive säker nyckelhantering, val av algoritmer, tokenutgång och tokenlagring. Omfamna TypeScripts kraft för att bygga säkra, skalbara och pålitliga autentiseringssystem för dina globala applikationer.