## Johdanto - [Logto](https://logto.io/) 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](https://capacitorjs.com/) 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](https://cloud.logto.io/). - Capacitor-projekti. Voit seurata [virallista ohjetta](https://capacitorjs.com/docs/getting-started) 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](https://cloud.logto.io/). 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](https://capacitorjs.com/docs/guides/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 ```bash # tai yarn, pnpm npm install @logto/capacitor # Asenna vertaistuet npm install @capacitor/browser @capacitor/app @capacitor/preferences ``` ### Alusta Logto-client ```ts import LogtoClient from '@logto/capacitor'; const logtoClient = new LogtoClient({ endpoint: 'https://your-logto-endpoint', appId: '', }); ``` - `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: ```ts const onClick = async () => { await logtoClient.signIn('com.example.app://callback'); console.log(await logtoClient.isAuthenticated()); // true console.log(await logtoClient.getIdTokenClaims()); // { sub: '...', ... } }; ``` 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.

Jos käyttäjä sulkee selainikkunan suorittamatta autentikointivirtausta loppuun, Capacitor-sovellus saa `LogtoClientError`-virheen. ## 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: ```ts const onClick = async () => { await logtoClient.signOut(); console.log(await logtoClient.isAuthenticated()); // false }; ``` `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: ```ts const onClick = async () => { await logtoClient.signOut('com.example.app://callback/sign-out'); }; ``` 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 contact@logto.io tai [liity Discord-palvelimellemme](https://discord.gg/UEPaF3j5e6)! ## Lisälukemista - [Mukauta kirjautumiskokemusta](https://docs.logto.io/docs/recipes/customize-sie/) - [Määritä liittimet](https://docs.logto.io/docs/recipes/configure-connectors/) - [Suojaa API:si](https://docs.logto.io/docs/recipes/protect-your-api/) Kokeile Logtoa tänään