Skydda din Express.js API med JWT och Logto

Introduktion#

När du utvecklar en webbapplikation är det avgörande att skydda dina API-ändpunkter från obehörig åtkomst. Föreställ dig att du bygger en webbplats för online shopping; du vill definitivt inte att nätbevingarna utnyttjar ditt API.

Förutsatt att du redan har byggt en Express.js-applikation med användarautentisering, där användare måste logga in innan de vidtar vissa åtgärder. Om inte, kan du komma igång med Logto. Det kräver bara några rader kod för att etablera ett användarautentiseringsflöde.

Men även efter användarautentisering står du inför olika val för att skydda dina API-ändpunkter. Tyvärr har de flesta av dessa alternativ sina nackdelar:

• Sessionsbaserad autentisering: Knyta ditt API till ett sessionstore, vilket inte är skalbart och inte passar bra för mikrotjänster.
• Anropa en autentiseringstjänst: Detta introducerar ett extra nätverksanrop, vilket ökar latens och kostnader. Vissa autentiseringstjänster debiterar till och med baserat på API-anropsvolym, vilket potentiellt leder till stora kostnader.

I den här handledningen visar vi hur du stärker dina API-ändpunkter med hjälp av JSON Web Tokens (JWT) och Logto. Denna metod erbjuder skalbarhet och minimala extra kostnader.

Förutsättningar#

Innan du dyker in, se till att du har följande:

• Ett Logto-konto. Om du inte har ett kan du registrera dig gratis.
• Ett Express.js-projekt som behöver API-skydd och en klientapplikation som använder API:et.
• Grundläggande bekantskap med JSON Web Token (JWT).

Definiera din API-resurs i Logto#

Logto utnyttjar fullt ut RFC 8707: Resource Indicators for OAuth 2.0 för att säkra dina API-ändpunkter. Detta innebär att du kan definiera dina API-resurser med hjälp av deras faktiska URL:er.

Navigera till fliken "API-resurser" i Logto Console och klicka på "Skapa API-resurs" för att skapa en ny. Till exempel, om du vill skydda ändpunkten /api/products, kan du använda URL:en https://yourdomain.com/api/products som identifierare.

Skaffa en access-token i din klientapplikation#

För att fortsätta behöver du integrera Logto SDK i din klientapplikation. Denna applikation kan skilja sig från din Express.js-backend; till exempel kan du ha en React-app som använder Express.js som backend-API-server.

Du måste också justera Logto SDK-konfigurationen för att informera Logto om att du vill begära ett access-token för ditt API i denna grant. Här är ett exempel med React:

När en användare loggar in med Logto, kommer isAuthenticated inom Logto SDK att bli true:

Nu kan du använda metoden getAccessToken för att hämta en access-token för ditt API:

Slutligen, inkludera denna access-token i Authorization-huvudet när du gör förfrågningar till ditt API:

Verifiera access-token i ditt API#

I din Express.js-applikation, installera jose-biblioteket för JWT-verifiering:

Eftersom vi använder Bearer-autentisering, extrahera access-token från Authorization-huvudet:

Skapa därefter ett middleware för att verifiera access-token:

Du kan nu använda detta middleware för att skydda dina API-ändpunkter:

Med denna metod behöver du inte kontakta Logto-servern varje gång en begäran kommer in. Istället hämtar du JSON Web Key Set (JWKS) från Logto-servern en gång och verifierar sedan access-token lokalt.

Rollbaserad åtkomstkontroll#

Fram till denna punkt har vi endast verifierat att en användare har loggat in med Logto. Vi vet fortfarande inte om användaren har lämplig behörighet för att få åtkomst till API-ändpunkten. Detta beror på att Logto tillåter vem som helst att få en access-token för en befintlig API-resurs.

För att hantera detta kan vi använda rollbaserad åtkomstkontroll (RBAC). I Logto kan du definiera roller och tilldela behörigheter till dem. Konsultera denna handledning för att lära dig hur du definierar roller och behörigheter i Logto.

Efter att ha definierat roller och behörigheter kan du lägga till scopes-alternativet till LogtoProvider-komponenten:

Logto kommer då endast att utfärda en access-token med lämplig scope(s) till användaren. Till exempel, om en användare bara har read:products-scope kommer access-token endast att innehålla den scopen:

Om en användare har både read:products och write:products scopes kommer access-token att innehålla båda scoperna med ett mellanslag som avgränsare:

I din Express.js-applikation kan du verifiera om access-token innehåller rätt scope(s) innan du ger tillgång till API-ändpunkten:

Slutsats#

Att skydda API-ändpunkter samtidigt som man säkerställer skalbarhet är ingen lätt uppgift. På Logto strävar vi efter att förenkla begäransautentisering för utvecklare, så att du kan fokusera mer på din affärslogik.

För eventuella frågor, tveka inte att gå med i vår Discord-server. Vårt community hjälper dig gärna.