Skapa en social anslutning för Logto

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.