Français

social
connecteur
sans mot de passe
connexion
oauth
auth
intégration

Créer un connecteur social pour Logto

Apprenez à créer un connecteur social personnalisé pour Logto en quelques étapes seulement.

Charles

Developer

6/18/2024

Arrêtez de perdre des semaines sur l'authentification des utilisateurs

Lancez des applications sécurisées plus rapidement avec Logto. Intégrez l'authentification des utilisateurs en quelques minutes et concentrez-vous sur votre produit principal.

Commencer

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.

Essayez Logto Cloud gratuitement

Contexte#

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

Le flux de connexion#

Maintenant, commençons#

Étape 1 : Cloner un paquet de connecteur existant#

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

Étape 3 : Tester le connecteur#

Test unitaire#

Test local#

Étape 4 (optionnelle) : Publier le connecteur#

Résumé#

Contexte#

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

Le flux de connexion#

Maintenant, commençons#

Étape 1 : Cloner un paquet de connecteur existant#

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

Étape 3 : Tester le connecteur#

Test unitaire#

Test local#

Étape 4 (optionnelle) : Publier le connecteur#

Résumé#

Contexte

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

Le flux de connexion

Maintenant, commençons

Étape 1 : Cloner un paquet de connecteur existant

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

Étape 3 : Tester le connecteur

Test unitaire

Test local

Étape 4 (optionnelle) : Publier le connecteur

Résumé

Contexte

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

Le flux de connexion

Maintenant, commençons

Étape 1 : Cloner un paquet de connecteur existant

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

Étape 3 : Tester le connecteur

Test unitaire

Test local

Étape 4 (optionnelle) : Publier le connecteur

Résumé