Toont hoe je Netlify-webapps en serverloze functies kunt beveiligen met Logto-authenticatie, compleet met voorbeelden van broncode en een live demo preview.
Netlify is een krachtig platform voor het implementeren en hosten van moderne webprojecten, met naadloze Git-integratie, geautomatiseerde builds en serverloze functies voor een snelle en schaalbare ontwikkelworkflow.
In deze uitgebreide gids leer je hoe je:
Bekijk de online demo preview.
Dit zijn de dingen die je moet instellen voordat je met deze tutorial begint:
Volg Vite's Getting Started Guide om een React-app te maken.
Volg de creatiegids en selecteer je gewenste technologiestack. In dit artikel kiezen we voor React + TypeScript.
Ga vervolgens naar de projectrootdirectory, installeer de afhankelijkheden volgens de gids en start de applicatie.
Volg de Aan de slag met Netlify gidsen om je applicatie te implementeren.
Zodra je je app hebt geïmplementeerd, kun je de live site zien op https://<your-site-name>.netlify.app.
Maak een aantekening van deze URL, aangezien we deze later nodig hebben om Logto te configureren.
Om te beginnen met Logto-authenticatie:
https://<your-instance>.logto.app/)
Deze referenties zijn nodig in de volgende stappen.Merk op dat we in onze demo de /callback-route gebruiken om de Sign-in omleiding van Logto af te handelen. De Redirect URIs in Logto moeten worden geconfigureerd als https://<your-site-name>.netlify.app/callback.
Nadat gebruikers uitloggen, keren we terug naar de startpagina, dus stellen we de Post sign-out redirect URIs in op https://<your-site-name>.netlify.app.
Stel vervolgens de informatie van onze aangemaakte Logto Applicatie in de Omgevingsvariabelen van Netlify in (Je website -> siteconfiguratie -> Omgevingsvariabelen):
Daarna gebruiken we deze configuraties in ons frontendproject:
Je kunt de finaal geïntegreerde code hier bekijken: example-vite-react-logto.
Merk op dat wanneer we naar Netlify implementeren en inloggen via Logto, onze URL niet automatisch naar onze Callback-pagina omleidt. Dit komt omdat Netlify standaard geen client-side routing ondersteunt voor single-page applications (SPA).
Wanneer je paden zoals /callback bezoekt, probeert Netlify overeenkomende bestanden op de server te vinden in plaats van het verzoek door te sturen naar je React-applicatie.
Op dit punt moeten we een _redirects bestand maken in de openbare map van je Netlify-project om Netlify te vertellen alle verzoeken door te sturen naar je index.html:
Alternatief kun je een netlify.toml bestand maken in je projectroot:
Nu zou onze routing correct moeten werken.
Netlify Functions biedt een eenvoudige maar krachtige manier om backend-API's te bouwen. Met Netlify Functions kunnen we server-side logica schrijven zonder ons zorgen te maken over traditionele serverconfiguratie en -onderhoud.
Deze functies worden versiebeheer, gebouwd en geïmplementeerd naast je website, waardoor het ontwikkel- en implementatieproces naadloos verloopt tussen frontend en backend.
Laten we beginnen met het bouwen van onze backend-API's met Netlify Functions.
Eerst moeten we een functions map maken onder de map van het netlify-project en dan een hello.ts bestand maken:
Wanneer we https://<your-site-name>.netlify.app/.netlify/functions/hello bezoeken, zal deze functie worden aangeroepen en "Hello world!"" retourneren.
Als je denkt dat het pad /.netlify/functions/hello er een beetje vreemd uitziet, kun je een redirect instellen om de functie aan te roepen door een redirect-regel toe te voegen in het public/_redirects bestand:
Op deze manier, wanneer we https://<your-site-name>.netlify.app/api/hello bezoeken, zal het onze functie aanroepen en "Hello world!" retourneren. Dit is eigenlijk de gebruikelijke manier om API's te bouwen met behulp van Netlify-functies.
En we kunnen deze API in ons frontendproject openen met behulp van fetch:
Nu we een backend-API hebben, moeten we ervoor zorgen dat alleen geauthentiseerde gebruikers er toegang toe hebben. We zullen onze Netlify-functies beschermen met behulp van de authenticatiemechanisme van Logto.
Om onze API-eindpunten te beschermen:
https://api.backend.com)Laten we nu de tokenvalidatie in onze backend implementeren om ervoor te zorgen dat alleen verzoeken met geldige access tokens worden verwerkt.
Ten eerste moeten we de jose afhankelijkheid installeren om ons te helpen het JWT-token te verifiëren:
Dan kunnen we de tokenvalidatie in onze backend implementeren:
Laten we nu onze Netlify-functie bijwerken om de verifyLogtoToken functie te gebruiken:
Dat is alles! Nu wordt onze Netlify-functie beschermd door Logto en worden alleen verzoeken met geldige access tokens verwerkt.
Implementeer je app nu op Netlify en test het uit! Je kunt naar de online demo preview verwijzen hier.
https://<your-site-name>.netlify.appapi/hello eindpunt.Deze gids demonstreert hoe je Logto-authenticatie integreert in een webapplicatie geïmplementeerd op Netlify.
Door Logto-applicaties en API-resources te configureren, hebben we frontend-authenticatie geïmplementeerd en Netlify Functions-eindpunten beschermd.
Voor meer verfijnde toegangscontrole kun je gebruik maken van Logto's RBAC (Role-Based Access Control) mogelijkheden door rollen en permissies te definiëren in de Logto Console en gebruikersrollen te valideren binnen Netlify-functions.