我們如何支持多樣化的連接器

介紹#

連接器 在 Logto 中扮演著關鍵角色。在它們的幫助下，Logto 可以讓終端用戶使用無密碼註冊或登錄，並提供使用社交帳戶登錄的功能。Logto 允許用戶安裝或構建自己的連接器，並且已有超過 20 種 官方連接器。我們的連接器被設計為高度靈活，允許用戶安裝甚至構建他們自己的連接器。與此同時，開發一個新的連接器也很簡單。為了達到這一點，我們設計並實施了一個名為“動態表單”的解決方案，靈感來自於配置驅動開發（CDD）。

背景#

Logto 連接器的配置是一個 JSON，儘管靈活，但可能在編輯和驗證時帶來挑戰。起初，這不是一個大問題，因為那時大多數的 JSON 配置如下：

但隨著我們支持越來越多的提供者和協議，情況開始改變。以“ SAML 連接器”為例，JSON 配置中有超過 10 個鍵，且值的類型很複雜，有字符串、數字、JSON、選擇值和證書的多行字符串。

因此，我們認為是時候引入一個精心設計的表單來取代 JSON 編輯器了。Logto 連接器被設計為第三方應用，因此硬編碼表單不是一個可行的解決方案。結果是，需要一個易於管理且具有良好用戶體驗的動態表單。我們上述提到的 SAML 連接器表單看起來像是：

什麼是配置驅動開發（CDD）#

CDD，即組件驅動開發，提供了一種構建應用程序的替代方法。在傳統方法中，首席架構師根據業務需求創建設計，然後開發和部署應用程序，任何修改都是通過額外的元素或困難的重構來執行的。

相比之下，CDD 著重於從一開始就構建獨立組件，從最基本的層面開始。通常會建立一個接口（通常是 JSON ）來組裝更高層級的用戶界面。這種方法通過可重用組件與 JSON 藍圖的結合，使開發人員能夠在更靈活且可擴展的方式下開發應用程序。

CDD 的核心在於利用模塊化構建鬆散聯繫的組件集合，然後使用標準化接口將其組合在一起。

什麼是動態表單？#

採用配置驅動開發（CDD）方法可以讓我們創建動態網頁表單。這些不是具有靜態、不變字段的普通表單，而是基於 JSON 文件生成字段的動態實體。這些動態網頁表單的優點在於它們的靈活性——如果需要更改表單字段，只需更新 JSON 配置即可。這種適應性使得動態網頁表單成為 Logto 連接器的理想解決方案，因為不同的表單配置對於 Logto 來說是未知的。

設計架構#

我們設計了一套架構作為表單項目的數組，每個項目可能有名稱、標籤、佔位符，最重要的是類型。我們有 6 種表單項目類型，並被定義為一個枚舉：

而表單項目的類型定義是：

然後整個架構是：

但有一個小問題，表單類型 "select" 需要一個選項列表，因此將此字段添加到 FormItem：

使用 React-Hook-Form 構建表單#

既然架構已經設置好了，我們可以根據架構在前端構建表單。我們將使用 React Hook Form 來實現這一點。

React-Hook-Form 是一個強大用於在 React 中構建高效、易於使用的表單的工具。

第一步是初始化一個表單，假設 JSON 配置已被獲取並稱為 formItems，表單中的數據是 formData：

然後，根據類型實現表單控制元素，這是一個簡單的示範：

結論#

當應用於動態表單創建時，配置驅動開發（CDD）的多功能性在 Logto 的連接器中得以體現。其優勢有兩個方面：

1. 對於開發者來說，這簡化了創建互動和用戶友好表單的過程。開發者不必面對複雜的編碼過程，只需定義一個 JSON 文件即可得到由 Logto 團隊設計的、更佳設計、直觀的用戶界面。
2. 對於用戶來說，這種方法大大簡化了設置連接器的過程。它減少了集成的複雜性，使用戶更容易將 Logto 與社交登錄功能以及電子郵件或短信服務集成。

最近，網上充滿了關於低代碼的文章。這個解決方案是從實際用戶需求的角度出發開發的，我們相信這是低代碼的一個很好的代表。

想試一試嗎？請前往 Logto Cloud 並選擇一個連接器。