Nederlands

sociaal
connector
wachtwoordloos
aanmelden
oauth
auth
integratie

Een sociale connector maken voor Logto

Leer hoe je in slechts een paar stappen een aangepaste sociale connector voor Logto maakt.

Charles

Developer

6/18/2024

Stop met weken verspillen aan gebruikersauthenticatie

Lanceer veilige apps sneller met Logto. Integreer gebruikersauthenticatie in minuten en focus op je kernproduct.

Aan de slag

Achtergrond

Sociale aanmelding is een must voor moderne apps. Het vereenvoudigt het registratieproces voor gebruikers, verbetert de gebruikerservaring en verhoogt de gebruikersbetrokkenheid en conversiepercentage. In Logto gebruiken we sociale connectors om in te loggen met een externe sociale identity provider.

Wat is een "connector"?

Een connector is een soort mini-programma dat Logto verbindt met een externe dienst. Het is verantwoordelijk voor het afhandelen van de inlogprocedure, het uitwisselen van tokens en het ophalen van gebruikersinformatie van de externe dienst.

Logto biedt een rijke set officiële connectors die zijn ontworpen om integratie met verschillende sociale platforms te vereenvoudigen. Vanaf vandaag zijn er al meer dan 30 connectors in totaal, waarvan meer dan 10 zijn bijgedragen door onze open-source community. We verwachten dat dit aantal in de toekomst snel zal groeien.

Echter begrijpen we dat er nog veel andere platforms zijn die momenteel niet officieel door Logto worden ondersteund. Gelukkig kun je als open-source platform altijd je eigen aangepaste connectors maken, eenvoudig en snel. Dus in deze post begeleiden we je stap voor stap bij het maken van een aangepaste sociale connector voor Logto.

De inlogprocedure

Voordat we beginnen, laten we begrijpen hoe de sociale inlogprocedure werkt in Logto.

Nu gaan we beginnen

De snelste manier om te beginnen is door de code van een bestaande officiële connector te kopiëren en aan te passen aan jouw behoeften. Laten we de GitHub-connector als voorbeeld nemen.

Stap 1: Clone een bestaand connectorpakket

In een connector-bronmap vind je de volgende bestanden:

index.ts: Het hoofdingangsbestand van de connector.
constant.ts: De constanten die in de connector worden gebruikt.
types.ts: De TypeScript-typen die in de connector worden gebruikt.
index.test.ts: De testgevallen voor de connector.
mock.ts: De testgegevens die in de connector-testgevallen worden gebruikt.

Naast deze bestanden, moet je ook een README.md-bestand voorzien om de connector te beschrijven, een logo.svg (optioneel een logo-dark.svg voor een betere gebruikerservaring in de donkere modus) en een package.json-bestand om de npm-pakketinformatie te definiëren.

Stap 2: Pas het hoofdingangsbestand (index.ts) aan

In het index.ts-bestand vind je de meeste connectorlogica. Er zijn meestal 4 functies die je moet implementeren:

getAuthorizationUri: Genereer de autorisatie-URI voor het derdepartij sociaal platform. Voor GitHub zou het zijn: https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state}. Raadpleeg de ontwikkelaarsdocumentatie van je doelsociaal platform voor de juiste URI.
authorizationCallbackHandler: Beveilig de geretourneerde parameterwaarden in de autorisatiecallback-URI, extraheer de autorisatiecode en behandel eventuele fouten.
getAccessToken: Wissel de autorisatiecode in voor een toegangstoken.
getUserInfo: Haal gebruikersinformatie op van het derdepartij sociaal platform met het toegangstoken.

De meeste andere algemene logica is al geregeld in de Logto connector-kit, wat je werk zou moeten vergemakkelijken.

Tenslotte, aan het einde van het bestand, hoef je alleen het connectorobject te exporteren, volgens dezelfde code-structuur als de GitHub-connector.

Stap 3: Test de connector

Unit-test

Schrijf eerst enkele unit-testgevallen en zorg ervoor dat de basisfunctionaliteiten naar verwachting werken.

Lokaal testen

Setup Logto in je lokale omgeving: Logto biedt verschillende manieren om lokaal te draaien, je kunt CLI gebruiken, of Docker, of zelfs vanuit broncode bouwen. Bekijk de documentatie voor meer details.
Koppel je aangepaste connector aan je Logto-instantie: Gebruik de CLI om een symbolische link van je connector te maken naar de Logto-instantie. Meer details.
Nadat je de connector hebt gekoppeld, zou je deze moeten zien in de <logto-root-path>/packages/core/connectors map.
Herstart je Logto-instantie, ga naar de Logto Admin Console, je zou deze moeten kunnen zien in de lijst met sociale connectors.
Configureer je connector in "Aanmeldervaring" -> "Aanmelden en inloggen" -> "Sociaal inloggen". En probeer het uit in onze demo-app met de "Live preview" functie.

Stap 4 (optioneel): Publiceer de connector

Je kunt je connector publiceren naar NPM, en delen met de community. Of zelfs een PR indienen en bijdragen aan het officiële Logto GitHub-repository om het een officieel ondersteunde connector te maken. Officiële connectors worden onderhouden door het Logto ontwikkelteam en beschikbaar gemaakt voor zowel open-source als Logto Cloud-gebruikers.

Samenvatting

Het maken van een aangepaste sociale connector voor Logto is niet zo moeilijk als je misschien denkt. Met behulp van de Logto connector-kit en goede voorbeeldcode kun je eenvoudig een connector maken in slechts een paar stappen.

En door bij te dragen met je connector, kun je meer gebruikers helpen genieten van het sociale platform dat je in de Logto-familie brengt.

Probeer Logto Cloud gratis

Achtergrond#

Wat is een "connector"?#

De inlogprocedure#

Nu gaan we beginnen#

Stap 1: Clone een bestaand connectorpakket#

Stap 2: Pas het hoofdingangsbestand (index.ts) aan#

Stap 3: Test de connector#

Unit-test#

Lokaal testen#

Stap 4 (optioneel): Publiceer de connector#

Samenvatting#

Achtergrond#

Wat is een "connector"?#

De inlogprocedure#

Nu gaan we beginnen#

Stap 1: Clone een bestaand connectorpakket#

Stap 2: Pas het hoofdingangsbestand (index.ts) aan#

Stap 3: Test de connector#

Unit-test#

Lokaal testen#

Stap 4 (optioneel): Publiceer de connector#

Samenvatting#

Achtergrond

Wat is een "connector"?

De inlogprocedure

Nu gaan we beginnen

Stap 1: Clone een bestaand connectorpakket

Stap 2: Pas het hoofdingangsbestand (index.ts) aan

Stap 3: Test de connector

Unit-test

Lokaal testen

Stap 4 (optioneel): Publiceer de connector

Samenvatting

Achtergrond

Wat is een "connector"?

De inlogprocedure

Nu gaan we beginnen

Stap 1: Clone een bestaand connectorpakket

Stap 2: Pas het hoofdingangsbestand (index.ts) aan

Stap 3: Test de connector

Unit-test

Lokaal testen

Stap 4 (optioneel): Publiceer de connector

Samenvatting