Svenska
  • angular
  • frontend
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

Bygg Angular-autentisering med Logto

Lär dig hur du bygger ett användarautentiseringsflöde med Angular genom att integrera Angular OIDC-klientbiblioteket.

Gao
Gao
Founder

Kom igång

Introduktion

  • Logto är ett öppen källkods alternativ till Auth0 för att bygga identitetsinfrastrukturer. Det stöder olika inloggningsmetoder, inklusive användarnamn, e-post, telefonnummer och populära sociala inloggningar som Google och GitHub.
  • Angular är ett webbteknikramverk skapat och underhållet av Google.

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.

Förutsättningar

Innan du börjar, se till att du har följande:

  • Ett Logto-konto. Om du inte har ett kan du registrera dig gratis.
  • An Angular utvecklingsmiljö och ett projekt.

Skapa en Logto-applikation

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:

  1. Logga in på Logto Console.
  2. I den vänstra navigeringsbaren, klicka på Applikationer.
  3. Klicka på Skapa applikation.
  4. På den öppnade sidan, hitta sektionen "Ensidig app" och lokalisera kortet "Angular".
  5. Klicka på Börja bygga och ange namnet på din applikation.
  6. Klicka på Skapa.

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.

Prova Logto Clouds interaktiva guide

Integrera Logto i ditt projekt

Installation

Installera Logto JS core SDK och Angular OIDC-klientbiblioteket:

Konfigurera applikationen

I ditt Angular-projekt, lägg till auth-leverantören i din app.config.ts:

Implementera inloggning och utloggning

Konfigurera omdirigerings-URI:er

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:

Prenumerera på autentiseringsstatus och visa användarinformation

OidcSecurityService erbjuder ett bekvämt sätt att prenumerera på autentiseringsstatusen:

Och använd det i mallen:

Kontrollpunkt: Kör applikationen

Nu kan du köra applikationen och försöka logga in/ut med Logto:

  1. Öppna applikationen i din webbläsare, du borde se knappen "Logga in".
  2. Klicka på knappen "Logga in", och du borde omdirigeras till Logtos inloggningssida.
  3. Efter att du har loggat in, borde du omdirigeras tillbaka till applikationen, och du borde se användardata och knappen "Logga ut".
  4. Klicka på knappen "Logga ut", och du borde omdirigeras till Logtos utloggningssida, och sedan omdirigeras tillbaka till applikationen med ett utloggat tillstånd.

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!

Vidare läsning

Prova Logto Idag