Pular para o conteúdo principal

Guia passo a passo para desenvolver um conector social

A maneira mais rápida de começar é copiar o código de um conector oficial existente e modificá-lo para atender às suas necessidades. Vamos usar o conector do GitHub como exemplo.

Passo 1: Clonar um pacote de conector existente​

Em uma pasta de origem do conector, você encontrará os seguintes arquivos:

  • index.ts: O arquivo de entrada principal do conector.
  • constant.ts: As constantes usadas no conector.
  • types.ts: Os tipos TypeScript usados no conector.
  • index.test.ts: Os casos de teste para o conector.
  • mock.ts: Os dados simulados 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 usuário no modo escuro) e um arquivo package.json para definir as informações do pacote npm.

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

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

  • getAuthorizationUri: Gerar o 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 o URI correto.
  • authorizationCallbackHandler: Proteger os valores dos parâmetros retornados no URI de callback de autorização, extrair o code de autorização e lidar com possíveis erros.
  • getAccessToken: Trocar o code de autorização por um token de acesso.
  • getUserInfo: Buscar informações do usuário na plataforma social de terceiros com o token de acesso.

A maioria das outras lógicas comuns já foi tratada no kit de conectores do Logto, o que deve facilitar seu trabalho.

Finalmente, no final do arquivo, você só precisará exportar o objeto do conector, seguindo a mesma estrutura de código do conector do GitHub.

const createGithubConnector: CreateConnector<SocialConnector> = async ({ getConfig }) => {
  return {
    metadata: defaultMetadata,
    type: ConnectorType.Social,
    configGuard: githubConfigGuard,
    getAuthorizationUri: getAuthorizationUri(getConfig),
    getUserInfo: getUserInfo(getConfig),
  };
};

Passo 3: Testar o conector​

Teste unitário​

Primeiro, escreva alguns casos de teste unitário e certifique-se de que as funcionalidades básicas funcionem conforme o esperado.

Teste local​

  • Configure o Logto no seu ambiente local: Logto oferece várias maneiras de rodar localmente, você pode usar CLI, ou docker, ou até mesmo construir a partir do código-fonte. Confira as documentações para mais detalhes.
  • Vincule 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. 
    cd logto
    npx @logto/cli connector link -p .
  • Após vincular o conector, você deve vê-lo na pasta <logto-root-path>/packages/core/connectors.
  • Reinicie sua instância Logto, vá para o Console de Administração do Logto, você deve ser capaz de vê-lo na lista de conectores sociais.
  • Configure seu conector em Console > Experiência de login > Inscrição e login > Login social. E experimente em nosso aplicativo de demonstração com o recurso "Visualização ao vivo".