Svenska

social
connector
lösenordslös
logga-in
oauth
auth
integration

Skapa en social anslutning för Logto

Lär dig hur du skapar en anpassad social anslutning för Logto på bara några steg.

Charles

Developer

6/18/2024

Sluta slösa veckor på användarautentisering

Lansera säkra appar snabbare med Logto. Integrera användarautentisering på några minuter och fokusera på din kärnprodukt.

Kom igång

Bakgrund

Social inloggning är ett måste för moderna appar. Det förenklar användarregistreringsprocessen, förbättrar användarupplevelsen och ökar användarengagemang och konverteringsfrekvens. I Logto använder vi sociala kopplingar för att logga in med en tredjeparts social identitetsleverantör.

Vad är en "connector"?

En connector är ett litet program som kopplar Logto med en tredjepartstjänst. Den ansvarar för att hantera inloggningsflödet, byta tokens och hämta användarinformation från tredjepartstjänsten.

Logto erbjuder ett rikt utbud av officiella connectors utformade för att förenkla integrationen för olika sociala plattformar. Fram till idag finns det redan över 30 connectors totalt, varav 10+ connectors har bidragits av vår open-source-community. Och vi förväntar oss att antalen snabbt kommer att öka i framtiden.

Vi förstår dock att det fortfarande finns många andra plattformar som för närvarande inte har Logtos officiella stöd. Som tur är, som en open-source-plattform, kan du alltid skapa dina egna anpassade connectors med lätthet. Så i detta inlägg, låt oss gå igenom hur du kan skapa en anpassad social connector för Logto på bara några steg.

Inloggningsflödet

Innan vi börjar, låt oss förstå hur det sociala inloggningsflödet fungerar i Logto.

Nu börjar vi

Det snabbaste sättet att komma igång är att kopiera koden från en befintlig officiell connector och modifiera den för att passa dina behov. Låt oss ta GitHub-connectorn som exempel.

Steg 1: Klona ett befintligt connector-paket

I en connector-källmapp hittar du följande filer:

index.ts: Huvudfilen för connectorn.
constant.ts: Konstanterna som används i connectorn.
types.ts: TypeScript-typerna som används i connectorn.
index.test.ts: Testfall för connectorn.
mock.ts: Mockdata som används i connectorns testfall.

Förutom dessa filer måste du också tillhandahålla en README.md fil för att beskriva connectorn, en logo.svg (valfritt en logo-dark.svg för bättre mörkt läge användarupplevelse) och en package.json fil för att definiera npm-paketsinformation.

Steg 2: Modifiera huvudentréfilen (index.ts)

I index.ts filen hittar du det mesta av connectorlogiken. Det finns vanligtvis 4 funktioner du behöver implementera:

getAuthorizationUri: Generera auktoriserings-URI:n för den tredjeparts sociala plattformen. För GitHub skulle det vara: https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state}. Se utvecklardokumentationen för din mål sociala plattform för att få rätt URI.
authorizationCallbackHandler: Skydda de returnerade parametervärdena i auktoriserings-URI, extrahera auktoriseringskoden och hantera potentiella fel.
getAccessToken: Byt auktoriseringskoden mot en åtkomsttoken.
getUserInfo: Hämta användarinformation från den tredjeparts sociala plattformen med åtkomsttoken.

De flesta av de andra gemensamma logikerna har tagits hand om i Logto-connector-kiten, vilket borde göra ditt arbete enklare.

Slutligen, i slutet av filen, behöver du bara exportera connector-objektet, följ samma kodstruktur som GitHub-connectorn.

Steg 3: Testa connectorn

Enhetstest

Först, skriv några enhetstestfall och se till att de grundläggande funktionerna fungerar som förväntat.

Lokalt test

Installera Logto i din lokala miljö: Logto erbjuder flera sätt att köra lokalt, du kan antingen använda CLI, eller docker, eller till och med bygga från källkod. Kolla dokumentationen för mer detaljer.
Länka din anpassade connector till din Logto-instans: Använd CLI för att skapa en symbolisk länk av din connector till Logto-instansen. Mer detaljer.
Efter att ha länkat connectorn, bör du se den i <logto-root-path>/packages/core/connectors-mappen.
Starta om din Logto-instans, gå till Logto Admin Console, du bör kunna se den i listan över sociala connectors.
Konfigurera din connector i "Inloggningsupplevelse" -> "Registrering och inloggning" -> "Social inloggning". Och prova den i vår demo app med "Live preview"-funktionen.

Steg 4 (valfritt): Publicera connectorn

Du kan publicera din connector på NPM, och dela den med communityn. Eller till och med skapa en PR och bidra till Logtos officiella GitHub-repository för att göra den till en officiellt stödd connector. Officiella connectors kommer att underhållas av Logtos utvecklingsteam och göras tillgängliga för både open-source och Logto Cloud-användare.

Sammanfattning

Att skapa en anpassad social connector för Logto är inte så svårt som du kanske tror. Med hjälp av Logto connector-kitet och bra exempel på kod kan du enkelt skapa en connector på bara några steg.

Och genom att bidra med din connector kan du hjälpa fler användare att njuta av den sociala plattform du tagit in i Logto-familjen.

Prova Logto Cloud gratis

Bakgrund#

Vad är en "connector"?#

Inloggningsflödet#

Nu börjar vi#

Steg 1: Klona ett befintligt connector-paket#

Steg 2: Modifiera huvudentréfilen (index.ts)#

Steg 3: Testa connectorn#

Enhetstest#

Lokalt test#

Steg 4 (valfritt): Publicera connectorn#

Sammanfattning#

Bakgrund#

Vad är en "connector"?#

Inloggningsflödet#

Nu börjar vi#

Steg 1: Klona ett befintligt connector-paket#

Steg 2: Modifiera huvudentréfilen (index.ts)#

Steg 3: Testa connectorn#

Enhetstest#

Lokalt test#

Steg 4 (valfritt): Publicera connectorn#

Sammanfattning#

Bakgrund

Vad är en "connector"?

Inloggningsflödet

Nu börjar vi

Steg 1: Klona ett befintligt connector-paket

Steg 2: Modifiera huvudentréfilen (index.ts)

Steg 3: Testa connectorn

Enhetstest

Lokalt test

Steg 4 (valfritt): Publicera connectorn

Sammanfattning

Bakgrund

Vad är en "connector"?

Inloggningsflödet

Nu börjar vi

Steg 1: Klona ett befintligt connector-paket

Steg 2: Modifiera huvudentréfilen (index.ts)

Steg 3: Testa connectorn

Enhetstest

Lokalt test

Steg 4 (valfritt): Publicera connectorn

Sammanfattning