## 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](https://logto.io/). 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](https://cloud.logto.io/). - 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)](https://datatracker.ietf.org/doc/html/rfc7519). Vi förstår att RFC:n kan vara lång. Kort sagt är en JWT en base64-kodad sträng som består av tre delar: header, payload och signatur. Payload lagrar informationen du vill, medan signaturen säkerställer tokenintegritet. ## Definiera din API-resurs i Logto Logto utnyttjar fullt ut [RFC 8707: Resource Indicators for OAuth 2.0](https://datatracker.ietf.org/doc/html/rfc8707) 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. ![Skapa API-resurs](https://uploads.strapi.logto.io/1/create_api_resource_13a2c8e660.png) ## 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: ```tsx import { LogtoProvider } from '@logto/react'; const App = () => { return ( ); }; ``` När en användare loggar in med Logto, kommer `isAuthenticated` inom Logto SDK att bli `true`: ```tsx import { useLogto } from '@logto/react'; const Content = () => { const { isAuthenticated } = useLogto(); console.log(isAuthenticated); // true }; ``` Nu kan du använda metoden `getAccessToken` för att hämta en access-token för ditt API: ```tsx const Content = () => { const { getAccessToken, isAuthenticated } = useLogto(); useEffect(() => { if (isAuthenticated) { const accessToken = await getAccessToken('https://yourdomain.com/api/products'); console.log(accessToken); // eyJhbG... } }, [isAuthenticated, getAccessToken]); }; ``` Slutligen, inkludera denna access-token i `Authorization`-huvudet när du gör förfrågningar till ditt API: ```tsx const Content = () => { const { getAccessToken, isAuthenticated } = useLogto(); useEffect(() => { if (isAuthenticated) { const accessToken = await getAccessToken('https://yourdomain.com/api/products'); const response = await fetch('https://yourdomain.com/api/products', { headers: { Authorization: `Bearer ${accessToken}`, }, }); } }, [isAuthenticated, getAccessToken]); }; ``` ## Verifiera access-token i ditt API I din Express.js-applikation, installera `jose`-biblioteket för JWT-verifiering: ```bash npm install jose ``` Eftersom vi använder Bearer-autentisering, extrahera access-token från `Authorization`-huvudet: ```ts import { IncomingHttpHeaders } from 'http'; const extractBearerTokenFromHeaders = ({ authorization }: IncomingHttpHeaders) => { if (!authorization) { throw new Error('Authorization header saknas'); } if (!authorization.startsWith('Bearer')) { throw new Error('Authorization header är inte i Bearer-schemat'); } return authorization.slice(7); // Längden av 'Bearer ' är 7 }; ``` Skapa därefter ett middleware för att verifiera access-token: ```ts import { createRemoteJWKSet, jwtVerify } from 'jose'; // Generera en JWKS med jwks_uri som erhålls från Logto-servern // Ersätt `` med din Logto-slutpunkt, t.ex. `abc123.logto.app` const jwks = createRemoteJWKSet(new URL('https:///oidc/jwks')); export const authMiddleware = async (req, res, next) => { // Extrahera token med hjälp av hjälpfunktionen definierad ovan const token = extractBearerTokenFromHeaders(req.headers); const { payload } = await jwtVerify( // Den råa Bearer Token extraherad från förfrågningshuvudet token, jwks, { // Förväntad utfärdare av token, utfärdad av Logto-servern issuer: 'https:///oidc', // Förväntad publik token, resursindikatorn för den nuvarande API audience: 'https://yourdomain.com/api/products', } ); // Sub är användar-ID, används för användaridentifiering const { scope, sub } = payload; // För rollbaserad åtkomstkontroll, diskuterar vi det senare assert(scope.split(' ').includes('read:products')); return next(); }; ``` Du kan nu använda detta middleware för att skydda dina API-ändpunkter: ```ts app.get('/api/products', authMiddleware, (req, res) => { // ... }); ``` 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](https://docs.logto.io/docs/recipes/rbac/) 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: ```tsx ``` 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: ```json { "scope": "read:products", "sub": "1234567890" } ``` 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: ```json { "scope": "read:products write:products", "sub": "1234567890" } ``` 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: ```ts assert(scope.split(' ').includes('read:products')); ``` ## 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](https://discord.gg/UEPaF3j5e6). Vårt community hjälper dig gärna. Prova Logto idag