Soluzione di autenticazione full-stack con Logto su Netlify: Proteggere applicazioni web e funzioni serverless

Netlify è una piattaforma potente per il deploy e l'hosting di progetti web moderni, offrendo integrazione Git senza interruzioni, build automatizzati e funzioni serverless per un flusso di lavoro di sviluppo rapido e scalabile.

In questa guida completa, imparerai come:

• Implementare l'autenticazione in un'Applicazione Singola Pagina (SPA) utilizzando Logto su Netlify, dimostrato con un esempio Vite + React
• Proteggere le tue funzioni serverless Netlify con l'autenticazione Logto
• Distribuire un'applicazione pronta per la produzione utilizzando la nostra implementazione di riferimento: example-vite-react-logto

Guarda l'anteprima demo online.

Prerequisiti#

Queste sono le cose che devi impostare prima di iniziare questo tutorial:

• Un account Netlify
• Un account Logto Cloud o un'istanza Logto auto-ospitata

Crea un'app React con Vite#

Segui la Guida Iniziale di Vite per creare un'app React.

Segui la guida alla creazione e seleziona lo stack tecnologico desiderato. In questo articolo, sceglieremo React + TypeScript.

Poi entra nella directory principale del progetto, installa le dipendenze secondo la guida e avvia l'applicazione.

Distribuire l'app usando Netlify#

Segui la guida Inizia con Netlify per distribuire la tua applicazione.

Una volta che hai distribuito la tua app, puoi vedere il sito live a https://<your-site-name>.netlify.app.

Prendi nota di questo URL poiché ne avremo bisogno più tardi per configurare Logto.

Integra Logto nella tua app#

Per iniziare con l'autenticazione Logto:

1. Naviga alla pagina "Applicazioni" nel Logto Console
2. Crea una nuova applicazione
   • Seleziona il framework frontend (React nel nostro esempio)
   • Nota: Puoi creare qualsiasi Applicazione Singola Pagina (SPA) o app nativa in base alle tue esigenze
3. Segui la guida all'integrazione fornita in:
   • La guida integrata nel Logto Console, o
   • La guida ufficiale all'integrazione dell'autenticazione React
4. Dalla pagina dei dettagli dell'Applicazione, nota:
   • Il tuo ID Applicazione
   • L'endpoint Logto (si trova nella sezione "Endpoints & Credentials", tipicamente nel formato https://<your-instance>.logto.app/) Queste credenziali saranno richieste nei passaggi successivi.

Nota che nel nostro demo, usiamo la rotta /callback per gestire il reindirizzamento di accesso di Logto. Gli URI di reindirizzamento in Logto devono essere configurati come https://<your-site-name>.netlify.app/callback. Dopo che gli utenti escono, ritorniamo alla homepage, quindi impostiamo gli URI di reindirizzamento post disconnessione su https://<your-site-name>.netlify.app.

Poi imposta le informazioni della nostra Applicazione Logto creata nelle variabili d'ambiente di Netlify (Il tuo sito web -> configurazione sito -> Variabili d'ambiente):

Poi usiamo queste configurazioni nel nostro progetto frontend:

Puoi visualizzare il codice finale integrato qui: example-vite-react-logto.

Nota che quando distribuiamo su Netlify e accediamo tramite Logto, il nostro URL non si reindirizza automaticamente alla nostra pagina di Callback. Questo perché Netlify non supporta il routing lato client per le applicazioni a pagina singola (SPA) di default.

Quando visiti percorsi come /callback, Netlify proverà a trovare file corrispondenti sul server anziché indirizzare la richiesta alla tua applicazione React.

A questo punto, dobbiamo creare un file _redirects nella directory pubblica del tuo progetto Netlify per dire a Netlify di reindirizzare tutte le richieste al tuo index.html:

In alternativa, puoi creare un file netlify.toml nella radice del tuo progetto:

Ora il nostro routing dovrebbe funzionare correttamente.

Crea API backend con funzioni Netlify#

Le funzioni Netlify forniscono un modo semplice ma potente per costruire API backend. Con le funzioni Netlify, possiamo scrivere logica lato server senza preoccuparci della configurazione e manutenzione del server tradizionale.

Queste funzioni sono versionate, costruite e distribuite insieme al tuo sito web, rendendo lo sviluppo e il deploy un processo senza interruzioni tra frontend e backend.

Iniziamo a costruire le nostre API backend usando le funzioni Netlify.

Prima, dobbiamo creare una directory functions sotto la directory netlify del progetto, poi creare un file hello.ts:

Quando visiti https://<your-site-name>.netlify.app/.netlify/functions/hello, questa funzione verrà chiamata e restituirà "Hello world!".

Se pensi che il percorso /.netlify/functions/hello sembri un po' strano, puoi impostare un reindirizzamento per invocare la funzione aggiungendo una regola di reindirizzamento nel file pubblica/_redirects:

In questo modo, quando visiti https://<your-site-name>.netlify.app/api/hello, chiamerà la nostra funzione e restituirà "Hello world!". Questo è in realtà il modo comune per costruire API utilizzando le funzioni Netlify.

E possiamo accedere a questa API nel nostro progetto frontend usando fetch:

Proteggi le tue funzioni Netlify con Logto#

Ora che abbiamo un'API backend, dobbiamo assicurarci che solo gli utenti autenticati possano accedervi. Proteggeremo le nostre funzioni Netlify utilizzando il meccanismo di autenticazione di Logto.

Per proteggere i nostri endpoint API:

1. Crea una risorsa API nel Logto Console per rappresentare la nostra API backend:

• Vai a "Risorse API" nel Logto Console e crea una nuova API
• Imposta un nome e un identificativo API (ad es. https://api.backend.com)
• Nota l'identificativo API sulla pagina dei dettagli della risorsa API poiché ne avremo bisogno più tardi

2. Configura la tua applicazione per usare questa risorsa API aggiungendo l'identificativo alle variabili d'ambiente di Netlify:

3. Aggiorna la tua configurazione Logto per includere questa risorsa API:

4. Quando fai richieste agli endpoint protetti, il tuo frontend deve includere un token di accesso valido. Ecco come richiedere e usarlo:

Ora, implementiamo la validazione del token nel nostro backend per garantire che solo le richieste con token di accesso validi vengano elaborate.

In primo luogo, dobbiamo installare la dipendenza jose per aiutarci a verificare il token JWT:

Poi, possiamo implementare la validazione del token nel nostro backend:

Ora, aggiorniamo la nostra funzione Netlify per utilizzare la funzione verifyLogtoToken:

È tutto! Ora, la nostra funzione Netlify è protetta da Logto e solo le richieste con token di accesso validi verranno elaborate.

Test del nostro demo#

Ora, distribuisci la tua app su Netlify e testala! Puoi fare riferimento all'anteprima demo online qui.

1. Visita il sito live a https://<your-site-name>.netlify.app
2. Clicca il pulsante "Sign in" nella barra di navigazione
3. Accedi con un account utente Logto, e vedrai che sei collegato.
4. Clicca la scheda "Risorsa Protetta" nella barra di navigazione, e verrai reindirizzato alla pagina protetta.
5. Clicca il pulsante "Visualizza Risorsa Protetta", e vedrai i dati di risposta dall'endpoint api/hello.
6. Clicca il pulsante "Sign out" nella barra di navigazione, e verrai reindirizzato alla pagina principale.

Conclusione#

Questa guida dimostra come integrare l'autenticazione Logto in un'applicazione web distribuita su Netlify.

Configurando applicazioni e risorse API Logto, abbiamo implementato l'autenticazione frontend e protetto gli endpoint delle funzioni Netlify.

Per un controllo più granulare degli accessi, puoi sfruttare le capacità di RBAC (Controllo Accesso Basato sui Ruoli) di Logto definendo ruoli e permessi nel Logto Console e validando i ruoli utente all'interno delle funzioni Netlify.