Rakenna Angular -autentikointi Logton kanssa
Opi rakentamaan käyttäjä autentikointiprosessi Angularilla integroimalla Angular OIDC -asiakas kirjasto.
Founder
Aloita
Johdanto
- Logto on avoimen lähdekoodin Auth0-vaihtoehto identiteetti-infrastruktuurien rakentamiseen. Se tukee erilaisia kirjautumistapoja, mukaan lukien käyttäjänimi, sähköposti, puhelinnumero ja suositut sosiaaliset kirjautumiset kuten Google ja GitHub.
- Angular on Googlen luoma ja ylläpitämä web-kehys.
Tässä oppaassa näytämme, miten rakentaa käyttäjän todennusvirta Angular-integraation avulla Logto SDK:lla. Opas käyttää TypeScript ohjelmointikielenä.
Edellytykset
Ennen kuin aloitat, varmista, että sinulla on seuraavat:
- Logto-tili. Jos sinulla ei ole tiliä, voit rekisteröityä ilmaiseksi.
- An Angular kehitysympäristö ja projekti.
Luo Logto-sovellus
Aloittaaksesi, luo Logto-sovellus "Yksisivuinen sovellus" tyypillä. Seuraa näitä vaiheita luodaksesi Logto-sovelluksen:
- Kirjaudu sisään Logto Console.
- Vasemmalla olevasta navigointipalkista, napsauta Sovellukset.
- Napsauta Luo sovellus.
- Avautuvalla sivulla, etsi "Yksisivuinen sovellus" osio ja paikanna "Angular" kortti.
- Napsauta Aloita rakentaminen ja syötä sovelluksesi nimi.
- Napsauta Luo.
Näet interaktiivisen oppaan, joka opastaa sinua Logto SDK:n integroinnissa Angular-sovellukseen. Seuraava sisältö voi olla viite tulevaa käyttöä varten.
Lisää Logto projektiisi
Asennus
Asenna Logton JS core SDK ja Angular OIDC -asiakas kirjasto:
Määritä sovellus
Angular projektissa, lisää auth -tarjoaja app.config.ts tiedostoon:
Toteuta kirjautuminen ja uloskirjautuminen
Määritä uudelleenohjaus-URI:t
Vaihda Logto Consolen sovelluksen yksityiskohtasivulle. Lisää uudelleenohjaus-URI http://localhost:3000/callback.
Uudelleenohjaus-URI on OAuth 2.0 käsite, joka tarkoittaa sijaintia, johon pitäisi ohjata todennuksen jälkeen.
Samoin lisää http://localhost:3000/ "Kirjautumisen jälkeinen uudelleenohjaus-URI" osioon.
Kirjautumisen jälkeinen uudelleenohjaus-URI on OAuth 2.0 käsite, joka tarkoittaa sijaintia, johon pitäisi ohjata uloskirjautumisen jälkeen.
Napsauta sitten "Tallenna" tallentaaksesi muutokset.
Komponentissa, johon haluat toteuttaa kirjautumisen ja uloskirjautumisen (esimerkiksi, app.component.ts), injektoi OidcSecurityService ja käytä sitä kirjautumiseen ja uloskirjautumiseen.
Lisäksi, lisää malliin painikkeet kirjautumiseen ja uloskirjautumiseen:
Tilaa autentikointi tila ja näytä käyttäjätiedot
OidcSecurityService tarjoaa kätevän tavan tilata autentikointi tila:
Ja käytä sitä mallissa:
Tarkistuspiste: Aja sovellus
Nyt voit ajaa sovelluksen ja yrittää kirjautua sisään/ulos Logton avulla:
- Avaa sovellus selaimessasi, sinun pitäisi nähdä "Kirjaudu sisään" -painike.
- Napsauta "Kirjaudu sisään" -painiketta, ja sinut pitäisi ohjata Logto kirjautumissivulle.
- Kun olet kirjautunut sisään, sinut pitäisi ohjata takaisin sovellukseen, ja sinun pitäisi nähdä käyttäjätiedot ja "Kirjaudu ulos" -painike.
- Napsauta "Kirjaudu ulos" -painiketta, ja sinut pitäisi ohjata Logto uloskirjautumissivulle, ja sitten takaisin sovellukseen ilman kirjautumista.
Jos kohtaat ongelmia integraation aikana, älä epäröi liittyä Discord-palvelimellemme keskustellaksesi yhteisön ja Logto-tiimin kanssa!