Suomi

social
connector
passwordless
sign-in
oauth
auth
integration

Sosiaalisen liittimen luominen Logtoolle

Opi luomaan mukautettu sosiaalinen liitin Logtoolle vain muutamalla askeleella.

Charles

Developer

6/18/2024

Lopeta viikkojen tuhlaaminen käyttäjien tunnistautumiseen

Julkaise turvallisia sovelluksia nopeammin Logtolla. Integroi käyttäjien tunnistautuminen minuuteissa ja keskity ydintuotteeseesi.

Aloita

Tausta

Sosiaalinen kirjautuminen on välttämättömyys nykyaikaisille sovelluksille. Se yksinkertaistaa käyttäjän rekisteröintiprosessia, parantaa käyttäjäkokemusta ja lisää käyttäjien sitoutumista sekä konversioastetta. Logtossa käytämme sosiaaliliittimiä kirjautumiseen kolmannen osapuolen sosiaalisen tunnistepalveluntarjoajan avulla.

Mikä on "liitin"?

Liitin on pieni ohjelma, joka yhdistää Logton kolmannen osapuolen palveluun. Se vastaa kirjautumisprosessin käsittelystä, tunnusten vaihtamisesta ja käyttäjätietojen noutamisesta kolmannen osapuolen palvelusta.

Logto tarjoaa laajan valikoiman virallisia liittimiä, jotka on suunniteltu yksinkertaistamaan integraatioita erilaisille sosiaalisille alustoille. Tällä hetkellä on jo yli 30 liitintä, joista yli 10 on avoimen lähdekoodin yhteisömme kehittämiä. Odotamme määrän kasvavan nopeasti tulevaisuudessa.

Ymmärrämme kuitenkin, että on edelleen monia alustoja, joille Logto ei tarjoa virallista tukea tällä hetkellä. Onneksi avoimen lähdekoodin alustana voit aina luoda omia mukautettuja liittimiä helposti. Joten tässä viestissä opastamme, kuinka voit luoda mukautetun sosiaalisen liittimen Logtoolle vain muutamalla yksinkertaisella askeleella.

Kirjautumisprosessi

Ennen kuin aloitamme, ymmärretään miten sosiaalinen kirjautumisprosessi toimii Logtossa.

Nyt aloitetaan

Nopein tapa aloittaa on kopioida koodi olemassa olevasta virallisesta liittimestä ja mukauttaa se tarpeisiisi. Otetaan esimerkiksi GitHub-liitin.

Vaihe 1: Kloonaa olemassa oleva liitinpaketti

Liitinlähdekansiossa löydät seuraavat tiedostot:

index.ts: Liittimen pääsisäänkäyntitiedosto.
constant.ts: Liittimessä käytetyt vakioarvot.
types.ts: Liittimessä käytetyt TypeScript-tyypit.
index.test.ts: Liittimen testitapaukset.
mock.ts: Liittimen testitapauksissa käytetyt mallidatat.

Näiden tiedostojen lisäksi sinun on myös toimitettava README.md -tiedosto, jossa kuvataan liitin, logo.svg (vaihtoehtoisesti logo-dark.svg paremman pimeän tilan käyttäjäkokemuksen takaamiseksi), ja package.json -tiedosto npm-paketin tietojen määrittelemiseksi.

Vaihe 2: Muokkaa pääsisäänkäyntitiedostoa (index.ts)

index.ts -tiedostosta löydät suurimman osan liitinten logiikasta. Yleensä on 4 funktiota, jotka sinun täytyy implementoida:

getAuthorizationUri: Luo valtuutus-URI kolmannen osapuolen sosiaaliseen alustaan. GitHubin tapauksessa se olisi: https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state}. Katso kehittäjän dokumentaatiosta oikea URI kohdesosiaalialustallesi.
authorizationCallbackHandler: Turvaa paluuparametriarvot valtuutuksen takaisinsoitto-URI:ssa, ota valtuutuskoodi ja käsittele mahdolliset virheet.
getAccessToken: Vaihda valtuutuskoodi käyttöoikeustunnukseen.
getUserInfo: Hae käyttäjätietoja kolmannen osapuolen sosiaalialustalta käyttöoikeustunnuksella.

Logton liitinsarjassa on otettu huomioon suurin osa muista yleisistä logiikoista, mikä helpottaa työtäsi.

Lopuksi tiedoston lopussa sinun täytyy vain viedä liitinobjekti noudattaen samaa koodirakennetta kuin GitHub-liitin.

Vaihe 3: Testaa liitin

Yksikkötesti

Kirjoita ensin joitakin yksikkötestitapauksia ja varmista, että perustoiminnot toimivat odotetulla tavalla.

Paikallinen testi

Asenna Logto paikalliseen ympäristöön: Logto tarjoaa useita tapoja suorittaa paikallisesti, voit käyttää joko CLI:tä, dockeria tai jopa kääntää lähdekoodista. Lisätietoja löydät dokumentaatiosta täällä.
Linkitä mukautettu liittimesi Logto-instanssiisi: Käytä CLI:tä luodaksesi liitinten symbolisen linkin Logto-instanssiin. Lisätietoja.
Liitin linkittämisen jälkeen sinun pitäisi nähdä se <logto-root-path>/packages/core/connectors -kansiossa.
Käynnistä Logto-instanssi uudelleen, mene Logto Admin Console -konsoliin, sinun pitäisi nähdä se sosiaalisten liitinten listassa.
Määritä liittimesi kohdassa "Sign-in experience" -> "Sign-up and sign-in" -> "Social sign-in". Ja kokeile sitä demo-sovelluksessa "Live preview" -ominaisuuden avulla.

Vaihe 4 (valinnainen): Julkaise liitin

Voit julkaista liittimesi NPM:ään ja jakaa sen yhteisölle. Voit myös tehdä PR:n ja myötävaikuttaa Logton viralliseen GitHub-repositorioon tehdäkseen siitä virallisesti tuetun liittimen. Virallisia liittimiä ylläpitää Logton kehitystiimi ja ne ovat saatavilla sekä avoimen lähdekoodin että Logto Cloud -käyttäjille.

Yhteenveto

Mukautetun sosiaalisen liittimen luominen Logtoolle ei ole niin vaikeaa kuin luulisi. Logton liitinsarjan ja hyvien koodiesimerkkien avulla voit helposti luoda liittimen vain muutamalla vaiheella.

Myötävaikuttamalla liittimesi avulla voit auttaa enemmän käyttäjiä nauttimaan tuomastasi sosiaalialustasta Logto-perheeseen.

Kokeile Logto Cloudia ilmaiseksi

Tausta#

Mikä on "liitin"?#

Kirjautumisprosessi#

Nyt aloitetaan#

Vaihe 1: Kloonaa olemassa oleva liitinpaketti#

Vaihe 2: Muokkaa pääsisäänkäyntitiedostoa (index.ts)#

Vaihe 3: Testaa liitin#

Yksikkötesti#

Paikallinen testi#

Vaihe 4 (valinnainen): Julkaise liitin#

Yhteenveto#

Tausta#

Mikä on "liitin"?#

Kirjautumisprosessi#

Nyt aloitetaan#

Vaihe 1: Kloonaa olemassa oleva liitinpaketti#

Vaihe 2: Muokkaa pääsisäänkäyntitiedostoa (index.ts)#

Vaihe 3: Testaa liitin#

Yksikkötesti#

Paikallinen testi#

Vaihe 4 (valinnainen): Julkaise liitin#

Yhteenveto#

Tausta

Mikä on "liitin"?

Kirjautumisprosessi

Nyt aloitetaan

Vaihe 1: Kloonaa olemassa oleva liitinpaketti

Vaihe 2: Muokkaa pääsisäänkäyntitiedostoa (index.ts)

Vaihe 3: Testaa liitin

Yksikkötesti

Paikallinen testi

Vaihe 4 (valinnainen): Julkaise liitin

Yhteenveto

Tausta

Mikä on "liitin"?

Kirjautumisprosessi

Nyt aloitetaan

Vaihe 1: Kloonaa olemassa oleva liitinpaketti

Vaihe 2: Muokkaa pääsisäänkäyntitiedostoa (index.ts)

Vaihe 3: Testaa liitin

Yksikkötesti

Paikallinen testi

Vaihe 4 (valinnainen): Julkaise liitin

Yhteenveto