Cómo apoyamos una gama de conectores diversos

Introducción#

Conectores juegan un papel crítico en Logto. Con su ayuda, Logto permite a los usuarios finales utilizar el registro o inicio de sesión sin contraseña y la capacidad de iniciar sesión con cuentas sociales. Logto permite a los usuarios instalar o construir sus propios conectores, y ya hay más de 20 conectores oficiales. Nuestros conectores están diseñados para ser altamente flexibles, y permiten a los usuarios instalar o incluso construir los suyos propios. Al mismo tiempo, es fácil desarrollar un nuevo conector. Para lograr eso, diseñamos e implementamos una solución llamada “Formulario Dinámico” que se inspira en el Desarrollo Basado en Configuración (CDD).

Antecedentes#

La configuración para el conector de Logto es un JSON que, aunque flexible, puede ser desafiante de editar y validar. Al principio, eso no es un gran problema, porque en ese momento, la mayoría de las configuraciones JSON son como:

Pero a medida que apoyamos a más y más proveedores y protocolos, las cosas comenzaron a cambiar. Tomemos como ejemplo el “conector SAML”, hay más de 10 claves en la configuración JSON, y el tipo de valor es complejo, hay cadenas, números, JSONs, valores de selección, y cadenas de varias líneas para certificados.

Así que pensamos que es hora de introducir un formulario bien diseñado para reemplazar el editor JSON. El Conector Logto está diseñado para funcionar como una aplicación de terceros, por lo que codificar formularios de manera rígida no es una solución factible. El resultado es una fuerte necesidad de formularios dinámicos que sean fáciles de manejar y tengan una buena experiencia de usuario al mismo tiempo. El formulario para el conector SAML que mencionamos arriba se ve así:

¿Qué es el Desarrollo Basado en Configuración (CDD)?#

CDD, o Desarrollo Basado en Componentes, presenta un enfoque alternativo para construir aplicaciones. En el método convencional, los arquitectos líderes crean diseños basados en necesidades empresariales, luego la aplicación se desarrolla y despliega, y cualquier modificación se ejecuta ya sea a través de elementos adicionales o mediante una refactorización difícil.

En contraste, CDD se enfoca en construir componentes independientes desde el principio, comenzando en el nivel más fundamental. Se establece una interfaz, típicamente JSON, para ensamblar la interfaz de usuario de mayor nivel. Este método, que implica la combinación de componentes reutilizables y un plano JSON, permite a los desarrolladores construir aplicaciones de manera más flexible y escalable.

La esencia del CDD radica en su utilización de la modularidad para crear un conjunto de componentes vinculados de manera flexible, que luego se unen utilizando una interfaz estandarizada.

¿Qué es un Formulario Dinámico?#

Adoptar el enfoque de Desarrollo Basado en Configuración (CDD) nos permite crear formularios web dinámicos. Estos no son formularios ordinarios con campos estáticos e inmutables; más bien, son entidades dinámicas con campos que se generan basándose en un archivo JSON. La belleza de estos formularios web dinámicos radica en su flexibilidad: si se requiere un cambio en los campos del formulario, todo lo que se necesita es una actualización en la configuración JSON. Este nivel de adaptabilidad hace que los formularios web dinámicos sean una solución ideal para los Conectores Logto, los cuales requieren configuraciones de formularios diferentes y desconocidas por Logto.

Diseño del Esquema#

Diseñamos el esquema para que fuese un array de elementos de formulario, cada elemento puede tener nombre, etiqueta, marcador de posición, y lo más importante, tipo. Tenemos 6 tipos de elementos de formulario, y definidos como un enum:

Y la definición de tipo del elemento de formulario es:

Luego, el esquema completo es:

Pero hay un pequeño problema, el tipo de formulario "select" requiere una lista de opciones, así que añadimos este campo a FormItem:

Construyendo el formulario con React-Hook-Form#

Ahora que el esquema está definido, podemos construir el formulario en el front-end basado en el esquema. Usaremos React Hook Form para lograrlo.

React-Hook-Form es una herramienta poderosa para construir formularios eficientes y fáciles de usar en React.

Lo primero es iniciar un formulario, asumiendo que la configuración JSON se obtiene y se llama formItems, y los datos en el formulario son formData:

Luego, implementa el elemento de control del formulario de acuerdo con el tipo, aquí tienes una demostración simple:

Conclusión#

La versatilidad del Desarrollo Basado en Configuración (CDD) se destaca cuando se aplica a la creación de formularios dinámicos, especialmente en el caso de los conectores de Logto. Las ventajas son dos:

1. Para los desarrolladores, simplifica el proceso de crear formularios interactivos y fáciles de usar. En lugar de lidiar con complejidades de codificación intrincadas, los desarrolladores solo necesitan definir un archivo JSON para obtener las interfaces de usuario mejor diseñadas e intuitivas creadas por el equipo de Logto.
2. Para los usuarios, este enfoque simplifica en gran medida el proceso de configurar un conector. Elimina la complejidad de la integración, facilitando a los usuarios la integración de Logto con funciones de inicio de sesión social, así como con servicios de correo electrónico o SMS.

Recientemente, los artículos que promueven el Bajo Código son ubicuos en internet. Esta solución fue desarrollada desde la perspectiva de las necesidades reales del usuario, y creemos que es una gran representación del Bajo Código.

¿Quieres probarlo? Ve a Logto Cloud y elige un conector.