Como suportamos uma variedade de conectores diversos

Introdução#

Conectores desempenham um papel crítico no Logto. Com a ajuda deles, o Logto permite que os usuários finais usem o registro ou login sem senha e as funcionalidades de login com contas sociais. O Logto permite que os usuários instalem ou construam seus próprios conectores, e já existem mais de 20 conectores oficiais. Nossos conectores são projetados para serem altamente flexíveis, permitindo que os usuários instalem ou até mesmo construam os seus próprios. Ao mesmo tempo, é fácil desenvolver um novo conector. Para atingir isso, projetamos e implementamos uma solução chamada "Formulário Dinâmico" que é inspirada pelo Desenvolvimento Orientado a Configuração (CDD).

Contexto#

A configuração para o conector do Logto é um JSON que, embora flexível, pode ser desafiador de editar e validar. No começo, isso não era um grande problema, pois naquela época, a maioria das configurações JSON eram como:

Mas à medida que oferecemos suporte para mais e mais provedores e protocolos, as coisas começaram a mudar. Tome o "conector SAML" como exemplo, há mais de 10 chaves na configuração JSON, e o tipo de valor é complexo, há strings, números, JSONs, valores selecionáveis e strings de múltiplas linhas para certificado.

Então achamos que é hora de introduzir um formulário bem projetado para substituir o editor JSON. O Conector Logto é projetado para funcionar como uma aplicação de terceiros, então formular hardcoded não é uma solução viável. O resultado é uma forte necessidade de formulários dinâmicos que sejam fáceis de gerenciar e, ao mesmo tempo, tenham uma boa experiência para o usuário. O formulário para o conector SAML que mencionamos acima parece com:

O que é Desenvolvimento Orientado a Configuração (CDD)#

CDD, ou Desenvolvimento Orientado a Componentes, apresenta uma abordagem alternativa para a construção de aplicações. No método convencional, arquitetos principais criam designs com base nas necessidades do negócio, a aplicação é então desenvolvida e implementada, e quaisquer modificações são executadas através de elementos adicionais ou de uma refatoração difícil.

Em contraste, CDD foca na construção de componentes independentes desde o início, começando no nível mais fundamental. Uma interface, tipicamente JSON, é estabelecida para montar a interface do usuário de nível superior. Este método, envolvendo a combinação de componentes reutilizáveis e um projeto em JSON, capacita os desenvolvedores a construir aplicações de maneira mais flexível e escalável.

A essência do CDD está na sua utilização de modularidade para criar um conjunto de componentes fracamente ligados, que são então reunidos usando uma interface padronizada.

O que é um Formulário Dinâmico?#

Adotar a abordagem de Desenvolvimento Orientado a Configuração (CDD) nos permite criar formulários web dinâmicos. Estes não são formulários comuns com campos estáticos e imutáveis; em vez disso, eles são entidades dinâmicas com campos gerados com base em um arquivo JSON. A beleza desses formulários web dinâmicos reside em sua flexibilidade — se uma mudança nos campos do formulário for necessária, tudo o que é preciso é uma atualização na configuração JSON. Este nível de adaptabilidade torna os formulários web dinâmicos uma solução ideal para Conectores Logto, que requerem diferentes configurações de formulário desconhecidas pelo Logto.

Projetando o Esquema#

Projetamos o esquema para ser uma array de itens de formulário, cada item pode ter nome, rótulo, marcador de posição e, o mais importante, tipo. Temos 6 tipos de itens de formulário, e são definidos como um enum:

E a definição de tipo do item de formulário é:

Então o esquema completo é:

Mas há um pequeno problema, o tipo do formulário "selecionar" requer uma lista de opções, então adicione este campo ao FormItem:

Construindo o formulário com React-Hook-Form#

Agora que o esquema está definido, podemos construir o formulário no front-end com base no esquema. Vamos usar o React Hook Form para conseguir isso.

React-Hook-Form é uma ferramenta poderosa para construir formulários eficientes e fáceis de usar em React.

A primeira coisa é iniciar um formulário, vamos supor que a configuração JSON é buscada e chamada de formItems, e os dados no formulário são formData:

Então, implemente o elemento de controle do formulário de acordo com o tipo, aqui está uma demonstração simples:

Conclusão#

A versatilidade do Desenvolvimento Orientado a Configuração (CDD) brilha quando aplicada à criação de formulários dinâmicos, especialmente no caso dos conectores do Logto. As vantagens são duas:

1. Para os desenvolvedores, isso simplifica o processo de criação de formulários interativos e amigáveis. Em vez de lidar com complexidades de codificação intricadas, os desenvolvedores só precisam definir um arquivo JSON para obter interfaces de usuário melhor projetadas e intuitivas projetadas pela equipe do Logto.
2. Para os usuários, essa abordagem simplifica bastante o processo de configuração de um conector. Ela tira a complexidade da integração, facilitando a integração do Logto com recursos de login social, bem como com serviços de e-mail ou SMS.

Recentemente, artigos promovendo Baixo Código estão por toda parte na internet. Esta solução foi desenvolvida a partir da perspectiva das necessidades reais dos usuários, e acreditamos que é uma ótima representação de Baixo Código.

Quer tentar? Vá para a Logto Cloud e escolha um conector.