Costruire l'autenticazione Angular con Logto
Impara come costruire un flusso di autenticazione utente con Angular integrando la libreria client Angular OIDC.
Founder
Inizia
Introduzione
- Logto è un'alternativa open-source ad Auth0 per costruire infrastrutture di identità. Supporta vari metodi di accesso, inclusi nome utente, email, numero di telefono e popolari accessi social come Google e GitHub.
- Angular è un framework per lo sviluppo web creato e mantenuto da Google.
In questo tutorial, ti mostreremo come costruire un flusso di autenticazione utente con Angular integrando il Logto SDK. Il tutorial utilizza TypeScript come linguaggio di programmazione.
Prerequisiti
Prima di iniziare, assicurati di avere quanto segue:
- Un account Logto. Se non ne hai uno, puoi iscriverti gratuitamente.
- Un ambiente di sviluppo An Angular e un progetto.
Crea un'applicazione Logto
Per iniziare, crea un'applicazione Logto con il tipo "App a singola pagina". Segui questi passaggi per creare un'applicazione Logto:
- Accedi alla Console Logto.
- Nella barra di navigazione a sinistra, clicca su Applicazioni.
- Clicca su Crea applicazione.
- Nella pagina aperta, trova la sezione "App a singola pagina" e individua la scheda "Angular".
- Clicca su Inizia a costruire e inserisci il nome della tua applicazione.
- Clicca su Crea.
Dovresti quindi vedere una guida interattiva che ti guida attraverso il processo di integrazione del Logto SDK con la tua applicazione Angular. Il seguente contenuto può essere un riferimento per usi futuri.
Integra Logto nel tuo progetto
Installazione
Installa il Logto JS core SDK e la libreria client Angular OIDC:
Configura l'applicazione
Nel tuo progetto Angular, aggiungi il provider di autenticazione nel tuo app.config.ts:
Implementa accesso e disconnessione
Configura gli URI di reindirizzamento
Passa alla pagina dei dettagli dell'applicazione della Console Logto. Aggiungi un URI di reindirizzamento http://localhost:3000/callback.
URI di reindirizzamento è un concetto di OAuth 2.0 che implica la posizione a cui reindirizzare dopo l'autenticazione.
Allo stesso modo, aggiungi http://localhost:3000/ alla sezione "URI di reindirizzamento post-logout".
URI di reindirizzamento post-logout è un concetto di OAuth 2.0 che implica la posizione a cui reindirizzare dopo il logout.
Quindi clicca su "Salva" per salvare le modifiche.
Nel componente in cui desideri implementare l'accesso e la disconnessione (ad esempio, app.component.ts), inietta OidcSecurityService e usalo per accedere e uscire.
Quindi, nel template, aggiungi i pulsanti per accedere e uscire:
Iscriviti allo stato di autenticazione e visualizza le informazioni utente
Il OidcSecurityService fornisce un modo conveniente per iscriversi allo stato di autenticazione:
E usalo nel template:
Punto di controllo: Esegui l'applicazione
Ora puoi eseguire l'applicazione e provare ad accedere/disconnetterti con Logto:
- Apri l'applicazione nel tuo browser, dovresti vedere il pulsante "Accedi".
- Clicca sul pulsante "Accedi" e dovresti essere reindirizzato alla pagina di accesso di Logto.
- Dopo aver effettuato l'accesso, dovresti essere reindirizzato di nuovo all'applicazione e dovresti vedere i dati dell'utente e il pulsante "Disconnetti".
- Clicca sul pulsante "Disconnetti" e dovresti essere reindirizzato alla pagina di disconnessione di Logto e poi di nuovo all'applicazione con uno stato non autenticato.
Se incontri problemi durante l'integrazione, non esitare a unirti al nostro server Discord per parlare con la comunità e il team di Logto!