Visar hur man skyddar Netlify-webbappar och serverlösa funktioner med Logto-autentisering, komplett med exempel på källkod och en förhandsvisning av en direktdemo.
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:
Kolla in online demoförhandsvisningen.
Det här är sakerna du behöver ställa in innan du börjar den här handledningen:
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.
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.
För att komma igång med Logto-autentisering:
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.
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:
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:
https://api.backend.com)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.
Nu, distribuera din app till Netlify och testa den! Du kan hänvisa till online demoförhandsvisningen här.
https://<your-site-name>.netlify.appapi/hello slutpunkten.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.