Suomi
  • angular
  • frontend
  • opetusohjelma
  • auth
  • autentikointi
  • oauth
  • oidc
  • identiteetti

Rakenna Angular -autentikointi Logton kanssa

Opi rakentamaan käyttäjä autentikointiprosessi Angularilla integroimalla Angular OIDC -asiakas kirjasto.

Gao
Gao
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:

Luo Logto-sovellus

Aloittaaksesi, luo Logto-sovellus "Yksisivuinen sovellus" tyypillä. Seuraa näitä vaiheita luodaksesi Logto-sovelluksen:

  1. Kirjaudu sisään Logto Console.
  2. Vasemmalla olevasta navigointipalkista, napsauta Sovellukset.
  3. Napsauta Luo sovellus.
  4. Avautuvalla sivulla, etsi "Yksisivuinen sovellus" osio ja paikanna "Angular" kortti.
  5. Napsauta Aloita rakentaminen ja syötä sovelluksesi nimi.
  6. 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:

  1. Avaa sovellus selaimessasi, sinun pitäisi nähdä "Kirjaudu sisään" -painike.
  2. Napsauta "Kirjaudu sisään" -painiketta, ja sinut pitäisi ohjata Logto kirjautumissivulle.
  3. 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.
  4. 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!

Lisälukemista