Opi rakentamaan käyttäjä autentikointiprosessi Angularilla integroimalla Angular OIDC -asiakas kirjasto.
Tässä oppaassa näytämme, miten rakentaa käyttäjän todennusvirta Angular-integraation avulla Logto SDK:lla. Opas käyttää TypeScript ohjelmointikielenä.
Ennen kuin aloitat, varmista, että sinulla on seuraavat:
Aloittaaksesi, luo Logto-sovellus "Yksisivuinen sovellus" tyypillä. Seuraa näitä vaiheita luodaksesi Logto-sovelluksen:
Näet interaktiivisen oppaan, joka opastaa sinua Logto SDK:n integroinnissa Angular-sovellukseen. Seuraava sisältö voi olla viite tulevaa käyttöä varten.
Asenna Logton JS core SDK ja Angular OIDC -asiakas kirjasto:
Angular projektissa, lisää auth -tarjoaja app.config.ts tiedostoon:
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:
OidcSecurityService tarjoaa kätevän tavan tilata autentikointi tila:
Ja käytä sitä mallissa:
Nyt voit ajaa sovelluksen ja yrittää kirjautua sisään/ulos Logton avulla:
Jos kohtaat ongelmia integraation aikana, älä epäröi liittyä Discord-palvelimellemme keskustellaksesi yhteisön ja Logto-tiimin kanssa!