Sosiaalisen liittimen luominen Logtoolle

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.