Soluzione di autenticazione full-stack con Logto su Netlify: Proteggere applicazioni web e funzioni serverless
Mostra come proteggere app web Netlify e funzioni serverless con l'autenticazione Logto, completo di esempi di codice sorgente e un'anteprima dimostrativa live.
YijunDeveloper
Smetti di sprecare settimane sull'autenticazione degli utenti
Lancia app sicure più velocemente con Logto. Integra l'autenticazione degli utenti in pochi minuti e concentrati sul tuo prodotto principale.
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
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.
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:
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:
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
Configura la tua applicazione per usare questa risorsa API aggiungendo l'identificativo alle variabili d'ambiente di Netlify:
Aggiorna la tua configurazione Logto per includere questa risorsa API:
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.
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.
