Volledige stack auth-oplossing met Logto op Netlify: Beveiligen van webapps en serverloze functies

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:

• Authenticatie implementeert in een Single-Page Application (SPA) met Logto op Netlify, gedemonstreerd met een Vite + React-voorbeeld
• Je Netlify serverloze functies beveiligt met Logto-authenticatie
• Een productieklare applicatie implementeert met behulp van onze referentie-implementatie: example-vite-react-logto

Bekijk de online demo preview.

Vereisten#

Dit zijn de dingen die je moet instellen voordat je met deze tutorial begint:

• Een Netlify-account
• Een Logto Cloud account of een zelfgehoste Logto-instantie

Maak een React-app met Vite#

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.

Implementeer de app met Netlify#

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.

Integreer Logto in je app#

Om te beginnen met Logto-authenticatie:

1. Navigeer naar de "Applications" pagina in de Logto Console
2. Maak een nieuwe applicatie aan
   • Selecteer je frontend framework (React in ons voorbeeld)
   • Opmerking: Je kunt elke Single-Page Application (SPA) of native app maken op basis van je behoeften
3. Volg de integratiegids die wordt verstrekt in ofwel:
   • De ingebouwde gids van de Logto Console, of
   • De officiële React-authenticatie-integratiegids
4. Noteer vanaf de applicatiedetailpagina:
   • Je applicatie-ID
   • Het Logto-eindpunt (te vinden in de sectie "Endpoints & Credentials", meestal in het formaat 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.

Maak backend-API's met Netlify-functies#

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:

Bescherm je Netlify-functies met Logto#

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:

1. Maak een API-resource aan in de Logto Console om onze backend-API weer te geven:

• Ga naar "API Resources" in de Logto Console en maak een nieuwe API aan
• Stel een naam en API-identificator in (bijvoorbeeld https://api.backend.com)
• Noteer de API-identificator op de API-resource detailpagina, want we hebben deze later nodig

2. Configureer je applicatie om deze API-resource te gebruiken door de identificator toe te voegen aan je Netlify-omgevingsvariabelen:

3. Update je Logto-configuratie om deze API-resource op te nemen:

4. Wanneer je verzoeken doet naar beveiligde eindpunten, moet je frontend een geldige access token opnemen. Hier is hoe je deze kunt aanvragen en gebruiken:

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.

Onze demo testen#

Implementeer je app nu op Netlify en test het uit! Je kunt naar de online demo preview verwijzen hier.

1. Bezoek de live site op https://<your-site-name>.netlify.app
2. Klik op de "Sign in" knop in de navigatiebalk
3. Log in met een Logto-gebruikersaccount en je zult zien dat je bent ingelogd.
4. Klik op het tabblad "Protected Resource" in de navigatiebalk en je wordt doorgestuurd naar de beveiligde pagina.
5. Klik op de "View Protected Resource" knop en je zult de responsgegevens zien van het api/hello eindpunt.
6. Klik op de "Sign out" knop in de navigatiebalk en je wordt doorgestuurd naar de startpagina.

Conclusie#

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.