Creare un connettore sociale per Logto

Background#

Il social sign-in è essenziale per le app moderne. Semplifica il processo di registrazione dell'utente, migliora l'esperienza utente e aumenta l'engagement e il tasso di conversione degli utenti. In Logto, utilizziamo i connettori social per effettuare il login con un fornitore di identità sociale di terze parti.

Cosa è un "connettore"?#

Il connettore è un piccolo programma che collega Logto con un servizio di terze parti. È responsabile della gestione del flusso di login, dello scambio di token e del recupero delle informazioni utente dal servizio di terze parti.

Logto offre una ricca serie di connettori ufficiali progettati per semplificare l'integrazione con varie piattaforme social. Ad oggi, ci sono già più di 30 connettori in totale, di cui oltre 10 sono stati contribuiti dalla nostra comunità open-source. E ci aspettiamo che questi numeri crescano rapidamente in futuro.

Tuttavia, comprendiamo che ci sono ancora molte altre piattaforme che al momento non hanno il supporto ufficiale di Logto. Fortunatamente, come piattaforma open-source, puoi sempre creare con facilità i tuoi connettori personalizzati. Quindi, in questo post, ti mostreremo come puoi creare un connettore sociale personalizzato per Logto in pochi semplici passaggi.

Il flusso di login#

Prima di iniziare, cerchiamo di capire come funziona il flusso di login sociale in Logto.

Ora iniziamo#

Il modo più veloce per iniziare è copiare il codice da un connettore ufficiale esistente e modificarlo per soddisfare le tue esigenze. Prendiamo come esempio il connettore GitHub.

Step 1: Clona un pacchetto connettore esistente#

In una cartella di origine del connettore, troverai i seguenti file:

• index.ts: Il file di ingresso principale del connettore.
• constant.ts: Le costanti utilizzate nel connettore.
• types.ts: I tipi TypeScript usati nel connettore.
• index.test.ts: I casi di test per il connettore.
• mock.ts: I dati di mock usati nei casi di test del connettore.

Oltre a questi file, sarà anche necessario fornire un file README.md per descrivere il connettore, un logo.svg (opzionalmente un logo-dark.svg per una migliore esperienza utente in modalità scura) e un file package.json per definire le informazioni del pacchetto npm.

Step 2: Modifica il file di ingresso principale (index.ts)#

Nel file index.ts, troverai la maggior parte della logica del connettore. In genere ci sono 4 funzioni che devi implementare:

• getAuthorizationUri: Genera l'URI di autorizzazione per la piattaforma sociale di terze parti. Per GitHub, sarebbe: https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state}. Consulta la documentazione per gli sviluppatori della tua piattaforma sociale target per ottenere l'URI corretto.
• authorizationCallbackHandler: Salvaguarda i valori dei parametri restituiti nell'URI di callback di autorizzazione, estrae il code di autorizzazione e gestisce potenziali errori.
• getAccessToken: Scambia il code di autorizzazione per un token di accesso.
• getUserInfo: Recupera le informazioni utente dalla piattaforma sociale di terze parti con il token di accesso.

La maggior parte delle altre logiche comuni è stata già gestita nel kit del connettore Logto, il che dovrebbe rendere il tuo lavoro più semplice.

Infine, alla fine del file, dovrai solo esportare l'oggetto connettore, seguendo la stessa struttura di codice del connettore GitHub.

Step 3: Testa il connettore#

Test unitario#

Prima di tutto, scrivi alcuni casi di test unitari e assicurati che le funzionalità di base funzionino come previsto.

Test locale#

• Configura Logto nel tuo ambiente locale: Logto fornisce diversi modi per eseguirlo in locale, puoi utilizzare la CLI, Docker o persino costruire dal codice sorgente. Consulta la documentazione per maggiori dettagli.

• Collega il tuo connettore personalizzato alla tua istanza di Logto: Usa la CLI per creare un collegamento simbolico del connettore alla tua istanza di Logto. Maggiori dettagli.

• Dopo aver collegato il connettore, dovresti vederlo nella cartella <logto-root-path>/packages/core/connectors.

• Riavvia la tua istanza di Logto, vai al Logto Admin Console, dovresti essere in grado di vederlo nella lista dei connettori social.

• Configura il tuo connettore in "Esperienza di accesso" -> "Registrazione e accesso" -> "Social sign-in". E provalo nella nostra app demo con la funzione "Anteprima dal vivo".

  

Step 4 (opzionale): Pubblica il connettore#

Puoi pubblicare il connettore su NPM e condividerlo con la comunità. O persino inviare una PR e contribuire al repository GitHub ufficiale di Logto per renderlo un connettore ufficiale supportato. I connettori ufficiali saranno mantenuti dal team di sviluppo di Logto e resi disponibili sia agli utenti open-source che a quelli di Logto Cloud.

Riepilogo#

Creare un connettore sociale personalizzato per Logto non è così difficile come potresti pensare. Con l'aiuto del kit di connettore Logto e buoni esempi di codice, puoi facilmente creare un connettore in pochi semplici passaggi.

E contribuendo con il tuo connettore, puoi aiutare più utenti a godere della piattaforma sociale che porti nella famiglia Logto.