Impara come costruire un flusso di autenticazione utente con Angular integrando la libreria client Angular OIDC.
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.
Prima di iniziare, assicurati di avere quanto segue:
Per iniziare, crea un'applicazione Logto con il tipo "App a singola pagina". Segui questi passaggi per creare un'applicazione Logto:
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.
Installa il Logto JS core SDK e la libreria client Angular OIDC:
Nel tuo progetto Angular, aggiungi il provider di autenticazione nel tuo app.config.ts:
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:
Il OidcSecurityService fornisce un modo conveniente per iscriversi allo stato di autenticazione:
E usalo nel template:
Ora puoi eseguire l'applicazione e provare ad accedere/disconnetterti con Logto:
Se incontri problemi durante l'integrazione, non esitare a unirti al nostro server Discord per parlare con la comunità e il team di Logto!