Full-stack auktoriseringslösning med Logto på Netlify: Skyddar webbappar och serverlösa funktioner

Netlify är en kraftfull plattform för att distribuera och vara värd för moderna webbprojekt, med sömlös Git-integration, automatiserade byggnader och serverlösa funktioner för ett snabbt och skalbart utvecklingsflöde.

I den här omfattande guiden kommer du att lära dig hur man:

• Implementerar autentisering i en Single-Page Application (SPA) med Logto på Netlify, demonstrerat med ett Vite + React-exempel
• Skydda dina serverlösa funktioner på Netlify med Logto-autentisering
• Distribuera en produktionsklar applikation med vår referensimplementering: example-vite-react-logto

Kolla in online demoförhandsvisningen.

Förutsättningar#

Det här är sakerna du behöver ställa in innan du börjar den här handledningen:

• Ett Netlify-konto
• Ett Logto Cloud konto eller en självhostad Logto-instans

Skapa en React-app med Vite#

Följ Vite's Guiden Kom Igång för att skapa en React-app.

Enligt skapelseguiden och välj din önskade teknologibunt. I denna artikel väljer vi React + TypeScript.

Gå sedan till projektets rotkatalog, installera beroenden enligt guiden och kör applikationen.

Distribuera appen med Netlify#

Följ Kom igång med Netlify guiderna för att distribuera din applikation.

När du har distribuerat din app kan du se den live webbplatsen på https://<your-site-name>.netlify.app.

Anteckna denna URL eftersom vi kommer att behöva den senare för att konfigurera Logto.

Integrera Logto i din app#

För att komma igång med Logto-autentisering:

1. Navigera till "Applikationer" sidan i Logto Console
2. Skapa en ny applikation
   • Välj ditt frontend-ramverk (React i vårt exempel)
   • Obs! Du kan skapa vilket Single-Page Application (SPA) eller inbyggd app utifrån dina behov
3. Följ integrationsguiden som tillhandahålls i antingen:
   • Logto Console's inbyggda guide, eller
   • Den officiella React-autentiseringsguiden
4. Från applikationsdetaljsidan, notera:
   • Ditt applikations-ID
   • Logto-endpunkten (kan hittas i "Endpoints & Credentials" sektionen, vanligtvis i formatet https://<your-instance>.logto.app/) Dessa referenser kommer att krävas i följande steg.

Observera att i vårt demo använder vi /callback-rutten för att hantera Logto's inloggningsomdirigering. Omdirigerings-URI:erna i Logto behöver konfigureras som https://<your-site-name>.netlify.app/callback. Efter att användare loggar ut återvänder vi till hemsidan, så vi ställer in efter inloggningsomdirigeringen till https://<your-site-name>.netlify.app.

Ställ sedan in informationen i vår skapade Logto-applikation i Netlify's Miljövariabler (Din webbplats -> webbplatskonfiguration -> Miljövariabler):

Sedan använder vi dessa konfigurationer i vårt frontend-projekt:

Du kan se den slutliga integrerade koden här: example-vite-react-logto.

Observera att när vi distribuerar till Netlify och loggar in via Logto omdirigeras inte vår URL automatiskt till vår Callback-sida. Detta beror på att Netlify inte stödjer klientsidoruttning för Sidor-applikationer (SPA) som standard.

När du besöker vägar som /callback kommer Netlify att försöka hitta motsvarande filer på servern istället för att vidarebefordra begäran till din React-applikation.

Vid denna tidpunkt behöver vi skapa en _redirects fil i den offentliga katalogen i ditt Netlify-projekt för att berätta för Netlify att omdirigera alla förfrågningar till din index.html:

Alternativt kan du skapa en netlify.toml-fil i ditt projektrot:

Nu borde vår routning fungera korrekt.

Skapa backend-API:er med Netlify-funktioner#

Netlify-funktioner ger ett enkelt men kraftfullt sätt att bygga backend-API:er. Med Netlify-funktioner kan vi skriva logik på serversidan utan att behöva oroa oss för traditionell serverkonfiguration och underhåll.

Dessa funktioner är versionskontrollerade, byggda och distribuerade tillsammans med din webbplats, vilket gör utvecklings- och distributionsprocessen sömlös mellan frontend och backend.

Låt oss börja bygga våra backend-API:er med Netlify-funktioner.

Först behöver vi skapa en funktionskatalog under projektets netlify katalog, sedan skapa en hello.ts-fil:

När vi besöker https://<your-site-name>.netlify.app/.netlify/functions/hello, kommer denna funktion att anropas och returnera "Hello world!"".

Om du tycker att sökvägen /.netlify/functions/hello ser lite konstig ut, kan du ställa in en omdirigering för att anropa funktionen genom att lägga till en omdirigeringsregel i den offentliga/_redirects filen:

På det här sättet, när vi besöker https://<your-site-name>.netlify.app/api/hello, kommer det att anropa vår funktion och returnera "Hello world!". Detta är faktiskt det vanliga sättet att bygga API:er med Netlify-funktioner.

Och vi kan komma åt detta API i vårt frontend-projekt med fetch:

Skydda dina Netlify-funktioner med Logto#

Nu när vi har ett backend-API behöver vi se till att endast autentiserade användare kan komma åt det. Vi kommer att skydda våra Netlify-funktioner med Logtos autentiseringsmekanism.

För att skydda våra API-slutpunkter:

1. Skapa en API-resurs i Logto Console för att representera vårt backend-API:

• Gå till "API-resurser" i Logto Console och skapa en ny API
• Ange ett namn och API-identifierare (t.ex. https://api.backend.com)
• Anteckna API-identifieraren på API-resursdetaljsidan eftersom vi kommer att behöva den senare

2. Konfigurera din applikation att använda denna API-resurs genom att lägga till identifieraren till dina Netlify miljövariabler:

3. Uppdatera din Logto-konfiguration för att inkludera denna API-resurs:

4. När du gör förfrågningar till skyddade slutpunkter behöver din frontend inkludera en giltig åtkomsttoken. Så här begär och använder du den:

Nu, låt oss implementera tokenvalideringen i vår backend för att säkerställa att endast förfrågningar med giltiga åtkomsttoken behandlas.

Först, vi behöver installera jose beroendet för att hjälpa oss att verifiera JWT-token:

Sedan kan vi implementera tokenvalideringen i vår backend:

Nu, låt oss uppdatera vår Netlify-funktion för att använda verifyLogtoToken-funktionen:

Det var allt! Nu är vår Netlify-funktion skyddad av Logto och endast förfrågningar med giltiga åtkomsttoken kommer att behandlas.

Testa vår demo#

Nu, distribuera din app till Netlify och testa den! Du kan hänvisa till online demoförhandsvisningen här.

1. Besök den live webbplatsen på https://<your-site-name>.netlify.app
2. Klicka på "Logga in" knappen i navigationsfältet
3. Logga in med ett Logto användarkonto, och du kommer se att du är inloggad.
4. Klicka på "Skyddad Resurs" fliken i navigationsfältet, och du kommer att omdirigeras till den skyddade sidan.
5. Klicka på "Visa Skyddad Resurs" knappen, och du kommer att se svarsdatan från api/hello slutpunkten.
6. Klicka på "Logga ut" knappen i navigationsfältet, och du kommer att omdirigeras till hemsidan.

Slutsats#

Denna guide demonstrerar hur man integrerar Logto autentisering i en webbapplikation distribuerad på Netlify.

Genom att konfigurera Logto-applikationer och API-resurser implementerade vi frontend-autentisering och skyddade Netlify-funktioners slutpunkter.

För mer granulär åtkomstkontroll kan du utnyttja Logto's RBAC (Rollbaserad åtkomstkontroll) funktioner genom att definiera roller och behörigheter i Logto Console och validera användarroller inom Netlify-funktioner.