Leer hoe je een gebruikersauthenticatiestroom met Angular bouwt door de Angular OIDC client bibliotheek te integreren.
In deze handleiding laten we je zien hoe je een gebruikersauthenticatieflow kunt bouwen met Angular door Logto SDK te integreren. De handleiding gebruikt TypeScript als programmeertaal.
Voordat je begint, zorg ervoor dat je het volgende hebt:
Om te beginnen, maak een Logto-toepassing met het type "Single page app". Volg deze stappen om een Logto-toepassing te maken:
Dan zou je een interactieve gids moeten zien die je door het proces van het integreren van Logto SDK met je Angular toepassing leidt. De volgende inhoud kan als referentie voor toekomstig gebruik dienen.
Installeer de Logto JS core SDK en Angular OIDC client bibliotheek:
Voeg in je Angular-project de auth-provider toe aan je app.config.ts:
Schakel over naar de toepassingsdetailpagina van Logto Console. Voeg een Omleidings-URI http://localhost:3000/callback toe.
Omleidings-URI is een concept uit OAuth 2.0 dat impliceert waarnaar moet worden omgeleid na authenticatie.
Voeg op dezelfde manier http://localhost:3000/ toe aan de sectie "Omleidings-URI na afmelden".
Omleidings-URI na afmelden is een concept uit OAuth 2.0 dat impliceert waarnaar moet worden omgeleid na afmelden.
Klik vervolgens op "Opslaan" om de wijzigingen op te slaan.
In de component waar je inloggen en uitloggen wilt implementeren (bijvoorbeeld app.component.ts), injecteer de OidcSecurityService en gebruik deze om in en uit te loggen.
Voeg vervolgens in de template knoppen toe om in en uit te loggen:
De OidcSecurityService biedt een handige manier om je te abonneren op de authenticatiestatus:
En gebruik het in de template:
Nu kun je de toepassing uitvoeren en proberen in te loggen/uit te loggen met Logto:
Als je problemen ondervindt tijdens de integratie, aarzel dan niet om onze Discord-server te joinen om te chatten met de gemeenschap en het Logto-team!