Bouw Angular-authenticatie met Logto
Leer hoe je een gebruikersauthenticatiestroom met Angular bouwt door de Angular OIDC client bibliotheek te integreren.
Founder
Aan de slag
Inleiding
- Logto is een open-source Auth0 alternatief voor het bouwen van identiteitsinfrastructuren. Het ondersteunt verschillende aanmeldmethoden, waaronder gebruikersnaam, e-mail, telefoonnummer en populaire sociale aanmeldingen zoals Google en GitHub.
- Angular is een webontwikkelingsframework gecreëerd en onderhouden door Google.
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.
Vereisten
Voordat je begint, zorg ervoor dat je het volgende hebt:
- Een Logto-account. Als je er nog geen hebt, kun je je gratis aanmelden.
- An Angular ontwikkelomgeving en een project.
Maak een Logto-toepassing
Om te beginnen, maak een Logto-toepassing met het type "Single page app". Volg deze stappen om een Logto-toepassing te maken:
- Meld je aan bij de Logto Console.
- Klik in de linker navigatiebalk op Toepassingen.
- Klik op Toepassing maken.
- Op de geopende pagina, vind het "Single page app" gedeelte en zoek de "Angular" kaart.
- Klik op Begin met bouwen en voer de naam van je toepassing in.
- Klik op 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.
Logto integreren in je project
Installatie
Installeer de Logto JS core SDK en Angular OIDC client bibliotheek:
Configuratie van de applicatie
Voeg in je Angular-project de auth-provider toe aan je app.config.ts:
Implementeren van inloggen en uitloggen
Configureer omleidings-URI's
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:
Abonneren op authenticatiestatus en gebruikersinformatie weergeven
De OidcSecurityService biedt een handige manier om je te abonneren op de authenticatiestatus:
En gebruik het in de template:
Controlepunt: Start de applicatie
Nu kun je de toepassing uitvoeren en proberen in te loggen/uit te loggen met Logto:
- Open de toepassing in je browser, je zou de knop "Inloggen" moeten zien.
- Klik op de knop "Inloggen", en je zou moeten worden omgeleid naar de Logto-aanmeldpagina.
- Nadat je bent ingelogd, zou je terug moeten worden omgeleid naar de toepassing en zou je de gebruikersgegevens en de knop "Uitloggen" moeten zien.
- Klik op de knop "Uitloggen", en je zou moeten worden omgeleid naar de Logto-afmeldpagina en vervolgens terug naar de toepassing met een niet-ingelogde status.
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!