Suomi
  • auth
  • autentikointi
  • identiteetti
  • integraatio
  • kapasitori
  • capacitorjs
  • oidc
  • oauth
  • moneen alustaan

Rakenna CapacitorJS-autentikointi Logton avulla

Tässä opetusohjelmassa näytämme, kuinka rakentaa autentikointivirtaus Logton avulla Capacitorissa. Tämä mahdollistaa alustarajat ylittävien sisään- ja rekisteröitymisvirtausten luomisen helposti.

Gao
Gao
Founder

Johdanto

  • Logto on moderni Auth0-vaihtoehto asiakasidentiteetin infrastruktuurin rakentamiseen minimaalisella vaivalla. Se tukee erilaisia sisäänkirjautumismenetelmiä, mukaan lukien käyttäjänimi, sähköposti, puhelinnumero ja suositut sosiaaliset kirjautumiset kuten Google ja GitHub.
  • Capacitor on avoimen lähdekoodin natiivinen ajonaika Web Native -sovellusten rakentamiseen.

Tässä opetusohjelmassa näytämme, kuinka rakentaa autentikointivirtaus Logton avulla Capacitorissa. Tämä mahdollistaa alustarajat ylittävien sisään- ja rekisteröitymisvirtausten luomisen helposti.

Alkutoimet

Ennen aloitusta, varmista, että sinulla on seuraavat:

Luo Logto-sovellus

Päästäksesi alkuun, luo Logto-sovellus "Native"-tyypillä. Logto-sovellukset toimivat asiakassovelluksina OAuth 2.0 ja OpenID Connect (OIDC) virtauksissa. Seuraa näitä vaiheita luodaksesi Logto-sovelluksen:

  1. Kirjaudu sisään Logto Cloud Consoliin.
  2. Napsauta vasemmalla navigointipalkissa Sovellukset.
  3. Napsauta Luo sovellus.
  4. Valitse Native sovellustyypiksi ja syötä sovelluksen nimi.
  5. Napsauta Luo.
Luo Logto-sovellus

Sovelman luomisen jälkeen, määritä uudelleenohjaus URI. Uudelleenohjaus URI:ta käytetään ohjaamaan käyttäjä takaisin sovellukseesi autentikointivirran jälkeen.

Varmista, että URI ohjaa Capacitor-sovellukseen, esimerkiksi com.example.app://callback. Arvo voi vaihdella Capacitor-sovelluksen kokoonpanon mukaan. Lisätietoja löydät kohdasta Capacitor Deep Links.

Muista napsauttaa Tallenna muutokset päivitettyäsi uudelleenohjaus URI:n.

Jos et ole varma uudelleenohjaus URI:sta, voit jättää sen tyhjäksi nyt ja päivittää sen myöhemmin.

Aseta Capacitor

Oletetaan, että sinulla on jo Capacitor-projekti, tämä opetusohjelma on kehysagnostinen, joten voit käyttää mitä tahansa haluamaasi käyttöliittymäkehystä ja päivittää koodin vastaavasti.

Asenna riippuvuudet

Alusta Logto-client

  • endpoint on Logto API:n päätepiste. Löydät sen sisäänrakennetusta oppaasta tai Toimialueet-osiosta vuokrausasetuksissa.
  • appId on Logto-sovelluksen tunnus. Löydät sen sovelluksen tietosivulta.

Toteuta sisäänkirjautumisnappi

Lisää seuraava koodi sisäänkirjautumisnapin onClick-käsittelijään:

Korvaa com.example.app://callback uudelleenohjaus URI:lla, jonka määritit Logto-sovelluksessa.

Tarkistuspiste: Laukaise autentikointivirta

Aja Capacitor-sovellus ja napsauta kirjautumisnappia. Selainikkuna avautuu ja uudelleenohjaa Logto-sisäänkirjautumissivulle.

Logto-sisäänkirjautumissivu

Uloskirjautuminen

Koska Capacitor hyödyntää Safari View Controlleria iOS:ssä ja Chrome Custom Tabeja Androidissa, autentikointitila voi säilyä jonkin aikaa. Joskus käyttäjä voi kuitenkin haluta kirjautua ulos sovelluksesta heti. Tässä tapauksessa voimme käyttää signOut-metodia kirjautuaksemme käyttäjän ulos:

signOut-metodilla on optionalinen parametri uloskirjautumisen jälkeiselle uudelleenohjaus URI:lle. Jos sitä ei anneta, käyttäjä ohjataan Logto-uloskirjautumissivulle:

Logto-uloskirjautumissivu

Käyttäjän tulee napsauttaa "Valmis" sulkeakseen verkkonäytön ja palatakseen Capacitor-sovellukseen. Jos haluat automaattisesti ohjata käyttäjän takaisin Capacitor-sovellukseen, voit antaa uloskirjautumisen jälkeiselle uudelleenohjaus URI:lle:

Varmista, että uloskirjautumisen jälkeinen uudelleenohjaus URI ohjaa Capacitor-sovellukseen, ja muista lisätä uloskirjautumisen jälkeinen uudelleenohjaus URI Logto Consoleen:

Logto uudelleenohjaus URI -määritys

Tarkistuspiste: Viimeistele autentikointivirta

Aja Capacitor-sovellus uudelleen ja napsauta kirjautumisnappia. Jos kaikki menee hyvin, kun autentikointivirta on valmis, Capacitor-sovellus vastaanottaa kirjautumisen tuloksen ja tulostaa käyttäjän väitteet konsoliin.

Capacitor iOS -sovellus

Sitten napsauta uloskirjautumisnappia, ja Capacitor-sovellus ohjataan Logto-uloskirjautumissivulle. Se ohjautuu automaattisesti takaisin Capacitor-sovellukseen, jos uloskirjautumisen jälkeinen uudelleenohjaus URI on määritetty.

Nyt voit määrittää autentikointivirran Logto Cloud Consolessa kirjoittamatta monimutkaista koodia. Määritys koskee kaikkia asiakassovelluksia, taaten yhtenäisen käyttäjäkokemuksen.

Jos kohtaat ongelmia integraation aikana, älä epäröi ottaa meihin yhteyttä sähköpostitse osoitteessa [email protected] tai liity Discord-palvelimellemme!

Lisälukemista