Créer un connecteur social pour Logto

Contexte#

L'identification sociale est indispensable pour les applications modernes. Elle simplifie le processus d'enregistrement utilisateur, améliore l'expérience utilisateur, et augmente l'engagement et le taux de conversion des utilisateurs. Dans Logto, nous utilisons des connecteurs sociaux pour se connecter avec un fournisseur d'identité sociale tiers.

Qu'est-ce qu'un « connecteur » ?#

Un connecteur est un petit programme qui relie Logto à un service tiers. Il est responsable de la gestion du flux de connexion, de l'échange de jetons, et de la récupération des informations utilisateur depuis le service tiers.

Logto offre un large éventail de connecteurs officiels conçus pour simplifier l'intégration à diverses plateformes sociales. À ce jour, il existe déjà plus de 30 connecteurs au total, dont plus de 10 ont été contribué par notre communauté open source. Et nous prévoyons que ces chiffres augmenteront rapidement à l'avenir.

Cependant, nous comprenons qu'il existe encore de nombreuses autres plateformes qui ne sont pas encore officiellement supportées par Logto. Heureusement, en tant que plateforme open source, vous pouvez toujours créer vos propres connecteurs personnalisés avec facilité. Alors dans cet article, nous allons vous montrer comment créer un connecteur social personnalisé pour Logto en quelques étapes simples.

Le flux de connexion#

Avant de commencer, comprenons comment fonctionne le processus de connexion sociale dans Logto.

Maintenant, commençons#

La manière la plus rapide de commencer est de copier le code d'un connecteur officiel existant et de le modifier en fonction de vos besoins. Prenons le connecteur GitHub comme exemple.

Étape 1 : Cloner un paquet de connecteur existant#

Dans un dossier source de connecteur, vous trouverez les fichiers suivants :

• index.ts : Le fichier principal d'entrée du connecteur.
• constant.ts : Les constantes utilisées dans le connecteur.
• types.ts : Les types TypeScript utilisés dans le connecteur.
• index.test.ts : Les cas de test pour le connecteur.
• mock.ts : Les données factices utilisées dans les cas de test du connecteur.

En plus de ces fichiers, vous devrez également fournir un fichier README.md pour décrire le connecteur, un logo.svg (éventuellement un logo-dark.svg pour une meilleure expérience utilisateur en mode sombre), et un fichier package.json pour définir les informations du paquet npm.

Étape 2 : Modifier le fichier principal d'entrée (index.ts)#

Dans le fichier index.ts, vous trouverez la plupart de la logique du connecteur. Il y a généralement 4 fonctions que vous devez implémenter :

• getAuthorizationUri : Générer l'URI d'autorisation pour la plateforme sociale tierce. Pour GitHub, ce serait : https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state}. Référez-vous à la documentation du développeur de votre plateforme sociale cible pour obtenir l'URI correcte.
• authorizationCallbackHandler : Sécuriser les valeurs des paramètres retournées dans l'URI de callback d'autorisation, extraire le code d'autorisation et gérer les erreurs potentielles.
• getAccessToken : Échanger le code d'autorisation contre un jeton d'accès.
• getUserInfo : Récupérer les informations utilisateur à partir de la plateforme sociale tierce avec le jeton d'accès.

La plupart des autres logiques communes ont été prises en charge dans le kit de connecteur Logto, ce qui devrait faciliter votre travail.

Enfin, à la fin du fichier, vous devrez simplement exporter l'objet connecteur, en suivant la même structure de code que le connecteur GitHub.

Étape 3 : Tester le connecteur#

Test unitaire#

Tout d'abord, écrivez quelques tests unitaires et assurez-vous que les fonctionnalités de base fonctionnent comme prévu.

Test local#

• Configurez Logto dans votre environnement local : Logto propose plusieurs façons de fonctionner localement, vous pouvez utiliser CLI, ou Docker, ou même construire à partir du code source. Consultez les documentations pour plus de détails.

• Liez votre connecteur personnalisé à votre instance Logto : Utilisez le CLI pour créer un lien symbolique de votre connecteur à l'instance Logto. Plus de détails.

• Après avoir lié le connecteur, vous devriez le voir dans le dossier <logto-root-path>/packages/core/connectors.

• Redémarrez votre instance Logto, allez dans la console d'administration de Logto, vous devriez pouvoir le voir dans la liste des connecteurs sociaux.

• Configurez votre connecteur dans « Expérience de connexion » -> « Inscription et Connexion » -> « Connexion sociale ». Et testez-le dans notre application de démonstration avec la fonctionnalité « Aperçu en direct ».

  

Étape 4 (optionnelle) : Publier le connecteur#

Vous pouvez publier votre connecteur sur NPM, et le partager avec la communauté. Ou même soumettre une PR et contribuer au dépôt GitHub officiel de Logto pour en faire un connecteur officiellement supporté. Les connecteurs officiels seront maintenus par l'équipe de développement de Logto et rendus disponibles à la fois pour les utilisateurs open source et Logto Cloud.

Résumé#

Créer un connecteur social personnalisé pour Logto n'est pas aussi difficile que vous pourriez le penser. Avec l'aide du kit de connecteurs Logto et de bons exemples de code, vous pouvez facilement créer un connecteur en quelques étapes.

Et en contribuant votre connecteur, vous pouvez aider plus d'utilisateurs à profiter de la plateforme sociale que vous introduisez dans la famille Logto.