Lär dig hur du bygger ett användarautentiseringsflöde med Angular genom att integrera Angular OIDC-klientbiblioteket.
I denna handledning visar vi dig hur du bygger ett användarautentiseringsflöde med Angular genom att integrera Logto SDK. Handledningen använder TypeScript som programmeringsspråk.
Innan du börjar, se till att du har följande:
För att komma igång, skapa en Logto-applikation med typen "Ensidig app". Följ dessa steg för att skapa en Logto-applikation:
Då bör du se en interaktiv guide som leder dig genom processen att integrera Logto SDK med din Angular applikation. Följande innehåll kan vara en referens för framtida bruk.
Installera Logto JS core SDK och Angular OIDC-klientbiblioteket:
I ditt Angular-projekt, lägg till auth-leverantören i din app.config.ts:
Byt till applikationsdetaljsidan i Logto Console. Lägg till en omdirigerings-URI http://localhost:3000/callback.
Omdirigerings-URI är ett OAuth 2.0-koncept som innebär platsen ska omdirigeras efter autentisering.
På samma sätt, lägg till http://localhost:3000/ i sektionen "Omdirigering efter utloggning".
Omdirigering efter utloggning är ett OAuth 2.0-koncept som innebär platsen ska omdirigeras efter utloggning.
Klicka sedan på "Spara" för att spara ändringarna.
I komponenten där du vill implementera inloggning och utloggning (till exempel, app.component.ts), injektera OidcSecurityService och använd den för att logga in och logga ut.
Sedan, i mallen, lägg till knappar för att logga in och utlogga:
OidcSecurityService erbjuder ett bekvämt sätt att prenumerera på autentiseringsstatusen:
Och använd det i mallen:
Nu kan du köra applikationen och försöka logga in/ut med Logto:
Om du stöter på några problem under integrationen, tveka inte att gå med i vår Discord-server för att chatta med communityn och Logto-teamet!