Rakenna CapacitorJS-autentikointi Logton avulla

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:

• Logto-tili. Jos sinulla ei ole tiliä, voit rekisteröityä ilmaiseksi.
• Capacitor-projekti. Voit seurata virallista ohjetta luodaksesi sellaisen.

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.

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.

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:

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:

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.

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#

• Mukauta kirjautumiskokemusta
• Määritä liittimet
• Suojaa API:si