Português (Portugal)

social
conector
sem senha
início de sessão
oauth
autenticação
integração

Criar um conector social para o Logto

Aprenda a criar um conector social personalizado para o Logto em apenas alguns passos.

Charles

Developer

6/18/2024

Pare de perder semanas com autenticação de utilizadores

Lance aplicações seguras mais rapidamente com o Logto. Integre a autenticação de utilizadores em minutos e concentre-se no seu produto principal.

Começar

Contexto

O início de sessão social é essencial para as aplicações modernas. Simplifica o processo de registo de utilizadores, melhora a experiência do utilizador e aumenta o envolvimento e a taxa de conversão dos utilizadores. No Logto, usamos conectores sociais para iniciar sessão com um fornecedor de identidade social de terceiros.

O que é um "conector"?

O conector é um pequeno programa que liga o Logto a um serviço de terceiros. Ele é responsável por gerir o fluxo de início de sessão, trocar tokens e obter informações do utilizador a partir do serviço de terceiros.

O Logto oferece um conjunto diversificado de conectores oficiais projetados para simplificar a integração com várias plataformas sociais. Até hoje, já existem mais de 30 conectores no total, dos quais mais de 10 foram contribuições da nossa comunidade de código aberto. E esperamos que esses números cresçam rapidamente no futuro.

No entanto, entendemos que ainda existem muitas outras plataformas que não têm suporte oficial do Logto no momento. Felizmente, sendo uma plataforma de código aberto, você pode sempre criar os seus próprios conectores personalizados com facilidade. Por isso, neste post, vamos guiá-lo sobre como criar um conector social personalizado para o Logto em apenas alguns passos.

O fluxo de início de sessão

Antes de começarmos, vamos compreender como funciona o fluxo de início de sessão social no Logto.

Agora vamos começar

A maneira mais rápida de começar é copiar o código de um conector oficial existente e modificá-lo conforme necessário. Vamos usar o conector do GitHub como exemplo.

Passo 1: Clonar um pacote de conector existente

Na pasta de código-fonte do conector, você encontrará os seguintes arquivos:

index.ts: O principal arquivo de entrada do conector.
constant.ts: As constantes usadas no conector.
types.ts: Os tipos de TypeScript usados no conector.
index.test.ts: Os casos de teste para o conector.
mock.ts: Os dados fictícios usados nos casos de teste do conector.

Além desses arquivos, você também precisará fornecer um arquivo README.md para descrever o conector, um logo.svg (opcionalmente um logo-dark.svg para uma melhor experiência de utilizador no modo escuro), e um arquivo package.json para definir as informações do pacote npm.

Passo 2: Modificar o principal arquivo de entrada (index.ts)

No arquivo index.ts, você encontrará a maior parte da lógica do conector. Existem tipicamente 4 funções que você precisa implementar:

getAuthorizationUri: Gerar a URI de autorização para a plataforma social de terceiros. Para o GitHub, seria: https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state}. Consulte a documentação do desenvolvedor da sua plataforma social alvo para obter a URI correta.
authorizationCallbackHandler: Garantir a segurança dos parâmetros retornados na URI de callback de autorização, extrair o code de autorização e lidar com potenciais erros.
getAccessToken: Trocar o code de autorização por um token de acesso.
getUserInfo: Obter informações do utilizador a partir da plataforma social de terceiros com o token de acesso.

A maior parte das outras lógicas comuns já foram tratadas no kit de conector do Logto, o que deve facilitar o seu trabalho.

Finalmente, no final do arquivo, basta exportar o objeto do conector, seguindo a mesma estrutura de código do conector do GitHub.

Passo 3: Testar o conector

Teste unitário

Primeiro, escreva alguns casos de teste unitários e garanta que as funcionalidades básicas funcionam conforme esperado.

Teste local

Configurar o Logto no seu ambiente local: O Logto oferece várias formas de execução local, você pode usar o CLI, Docker ou até mesmo compilar a partir do código-fonte. Consulte a documentação para mais detalhes.
Ligar o seu conector personalizado à sua instância Logto: Use o CLI para criar um link simbólico do seu conector para a instância Logto. Mais detalhes.
Após ligar o conector, você deve vê-lo na pasta <logto-root-path>/packages/core/connectors.
Reinicie a sua instância do Logto, acesse o Logto Admin Console, e deve ser capaz de vê-lo na lista de conectores sociais.
Configure o seu conector em "Experiência de início de sessão" -> "Registo e início de sessão" -> "Início de sessão social". E experimente-o na nossa aplicação de demonstração com o recurso "Pré-visualização ao vivo".

Passo 4 (opcional): Publicar o conector

Você pode publicar o seu conector no NPM, e compartilhá-lo com a comunidade. Ou até mesmo fazer um PR e contribuir para o repositório oficial do GitHub do Logto para torná-lo um conector oficialmente suportado. Os conectores oficiais serão mantidos pela equipa de desenvolvimento do Logto e disponibilizados tanto para utilizadores de código aberto quanto para utilizadores do Logto Cloud.

Resumo

Criar um conector social personalizado para o Logto não é tão difícil quanto você possa pensar. Com a ajuda do kit de conector do Logto e de bons exemplos de código, você pode facilmente criar um conector em apenas alguns passos.

E ao contribuir com o seu conector, você pode ajudar mais utilizadores a desfrutar da plataforma social que você traz para a família Logto.

Experimente o Logto Cloud gratuitamente

Contexto#

O que é um "conector"?#

O fluxo de início de sessão#

Agora vamos começar#

Passo 1: Clonar um pacote de conector existente#

Passo 2: Modificar o principal arquivo de entrada (index.ts)#

Passo 3: Testar o conector#

Teste unitário#

Teste local#

Passo 4 (opcional): Publicar o conector#

Resumo#

Contexto#

O que é um "conector"?#

O fluxo de início de sessão#

Agora vamos começar#

Passo 1: Clonar um pacote de conector existente#

Passo 2: Modificar o principal arquivo de entrada (index.ts)#

Passo 3: Testar o conector#

Teste unitário#

Teste local#

Passo 4 (opcional): Publicar o conector#

Resumo#

Contexto

O que é um "conector"?

O fluxo de início de sessão

Agora vamos começar

Passo 1: Clonar um pacote de conector existente

Passo 2: Modificar o principal arquivo de entrada (index.ts)

Passo 3: Testar o conector

Teste unitário

Teste local

Passo 4 (opcional): Publicar o conector

Resumo

Contexto

O que é um "conector"?

O fluxo de início de sessão

Agora vamos começar

Passo 1: Clonar um pacote de conector existente

Passo 2: Modificar o principal arquivo de entrada (index.ts)

Passo 3: Testar o conector

Teste unitário

Teste local

Passo 4 (opcional): Publicar o conector

Resumo