เรื่องราวของวิธีที่เราสนับสนุนตัวเชื่อมต่อที่หลากหลาย ด้วยประสบการณ์ผู้ใช้และประสบการณ์การพัฒนาที่ดี พร้อมกับการพัฒนาที่ขับเคลื่อนด้วยการตั้งค่า เราได้สร้างแพลตฟอร์มตัวเชื่อมต่อที่ใช้รหัสต่ำ
ตัวเชื่อมต่อ มีบทบาทที่สำคัญใน Logto ด้วยความช่วยเหลือจากตัวเชื่อมต่อ Logto ช่วยให้ผู้ใช้ปลายทางสามารถใช้การลงทะเบียนหรือเข้าสู่ระบบแบบไร้รหัสผ่าน และความสามารถในการเข้าสู่ระบบด้วยบัญชีโซเชียล Logto อนุญาตให้ผู้ใช้ติดตั้งหรือสร้างตัวเชื่อมต่อเอง และมีตัวเชื่อมต่อ อย่างเป็นทางการ มากกว่า 20 ตัว ตัวเชื่อมต่อของเราได้รับการออกแบบให้มีความยืดหยุ่นสูง และอนุญาตให้ผู้ใช้ติดตั้งหรือต่อสร้างเองได้ ในเวลาเดียวกัน การพัฒนาตัวเชื่อมต่อใหม่ก็ง่ายมาก เพื่อให้บรรลุเป้าหมายนี้ เราได้ออกแบบและนำโซลูชันที่เรียกว่า “Dynamic Form” ซึ่งได้รับแรงบันดาลใจจากการพัฒนาที่ขับเคลื่อนด้วยการตั้งค่า (Config Driven Development หรือ CDD) มาใช้
การตั้งค่าสำหรับตัวเชื่อมต่อของ Logto เป็นไฟล์ JSON ซึ่งแม้จะมีความยืดหยุ่น แต่สามารถเป็นเรื่องท้าทายในการแก้ไขและตรวจสอบ ในตอนเริ่มต้น นั่นไม่ใช่ปัญหาใหญ่ เนื่องจากในตอนนั้น การตั้งค่า JSON ส่วนใหญ่มีลักษณะเช่น:
แต่เมื่อเราสนับสนุนผู้ให้บริการและโปรโตคอลมากขึ้น สิ่งต่างๆ ก็เริ่มเปลี่ยนไป โดยยกตัวอย่างเช่น “SAML connector” มีคีย์มากกว่า 10 คีย์ในไฟล์ JSON และประเภทของค่ามีความซับซ้อน มีทั้งสตริง, ตัวเลข, JSON, ค่าที่เลือก, และสตริงหลายบรรทัดสำหรับใบรับรอง
ดังนั้น เราคิดว่าเป็นเวลาที่เหมาะสมที่จะนำแบบฟอร์มที่ออกแบบมาอย่างดีมาแทนที่ JSON editor ตัวเชื่อมต่อ Logto ถูกออกแบบมาให้ทำงานเป็นแอปพลิเคชันของบุคคลที่สาม ดังนั้นการสร้างฟอร์มแบบ hard-code จึงไม่ใช่ทางออกที่เป็นไปได้ ผลลัพธ์คือการมีความต้องการที่สูงในการสร้างฟอร์มที่มีความคล่องตัวในการจัดการ และมีประสบการณ์ผู้ใช้ที่ดีในขณะเดียวกัน ฟอร์มสำหรับ SAML connector ที่เรากล่าวถึงข้างต้นมีลักษณะเป็น:
CDD หรือ Component Driven Development นำเสนอวิธีการทางเลือกในการสร้างแอปพลิเคชัน ในวิธีการทั่วไป หัวหน้าสถาปนิกจะสร้างการออกแบบตามความต้องการทางธุรกิจ แอปพลิเคชันจะถูกพัฒนาและใช้งาน และการเปลี่ยนแปลงจะถูกดำเนินการผ่านองค์ประกอบเพิ่มเติมหรือการทำรีแฟกเตอร์ที่ยุ่งยาก
ในทางกลับกัน CDD มุ่งเน้นไปที่การสร้างส่วนประกอบอิสระตั้งแต่เริ่มต้น โดยเริ่มต้นจากระดับพื้นฐานที่สุด อินเทอร์เฟซปกติจะถูกกำหนดขึ้นมาบน JSON เพื่อประกอบอินเทอร์เฟซผู้ใช้ระดับสูง วิธีนี้รวมการใช้ส่วนประกอบที่นำกลับมาใช้ใหม่ได้และแปลน JSON ทำให้นักพัฒนาสามารถสร้างแอปพลิเคชันในลักษณะที่ยืดหยุ่นและขยายได้ง่ายยิ่งขึ้น
ศูนย์กลางของ CDD คือการใช้ความเป็นโมดูลาร์ในการสร้างชุดของส่วนประกอบที่เชื่อมโยงกันอย่างไม่แข็งแรง ซึ่งถูกรวมกันด้วยอินเทอร์เฟซที่มีมาตรฐาน
การนำแนวทางการพัฒนาที่ขับเคลื่อนด้วยการตั้งค่า (CDD) มาใช้ช่วยให้เราสามารถสร้างฟอร์มเว็บได้อย่างยืดหยุ่น ซึ่งไม่ใช่ฟอร์มปกติที่มีฟิลด์คงที่ แต่เป็นหน่วยที่คล่องตัวที่ฟิลด์ถูกสร้างขึ้นตามไฟล์ JSON ความงามของฟอร์มเว็บแบบไดนามิกเหล่านี้อยู่ในด้านความยืดหยุ่น – ถ้าต้องการเปลี่ยนแปลงในฟิลด์ฟอร์ม สิ่งที่ต้องทำคือการอัปเดตการตั้งค่า JSON ระดับความยืดหยุ่นนี้ทำให้ฟอร์มเว็บแบบไดนามิกเป็นตัวเลือกแก้ปัญหาที่สมบูรณ์แบบสำหรับ Logto Connectors ซึ่งต้องการการกำหนดค่าที่แตกต่างกันที่ไม่รู้จักโดย Logto
เราออกแบบ schema ให้เป็นอาเรย์ของรายการฟอร์ม แต่ละรายการอาจมีชื่อ ป้ายกำกับ ตัวอย่างข้อความ และที่สำคัญที่สุดคือประเภท เรามี 6 ประเภทของรายการฟอร์ม และกำหนดเป็น enum:
และการกำหนดชนิดของรายการฟอร์มคือ:
จากนั้น schema ทั้งหมดคือ:
แต่มีปัญหาเล็กน้อย ประเภทฟอร์ม "select" ต้องการรายชื่อของตัวเลือก ดังนั้นจึงเพิ่มฟิลด์นี้ไปที่ FormItem:
เมื่อตั้งค่า schema แล้ว เราสามารถสร้างฟอร์มในส่วนหน้าที่อิงตาม schema ได้โดยใช้ React Hook Form เพื่อทำให้เสร็จสิ้น
React-Hook-Form เป็นเครื่องมือที่มีประสิทธิภาพในการสร้างฟอร์มที่ใช้ง่ายใน React
สิ่งแรกคือต้องเริ่มฟอร์ม สมมติว่าได้ทำการดึงการตั้งค่า JSON และเรียกว่า formItems และข้อมูลในฟอร์มคือ formData:
จากนั้นดำเนินการตามองค์ประกอบควบคุมฟอร์มตามประเภท นี่คือตัวอย่างการทำงานง่ายๆ:
ความยืดหยุ่นของการพัฒนาที่ขับเคลื่อนด้วยการตั้งค่า (CDD) แสดงให้เห็นเด่นชัดเมื่อประยุกต์ใช้กับการสร้างฟอร์มแบบไดนามิก โดยเฉพาะกับตัวเชื่อมต่อของ Logto ข้อดีมีสองวิธี:
เมื่อไม่นานมานี้ บทความที่โปรโมตเกี่ยวกับ Low Code มีมากมายทางอินเตอร์เน็ต วิธีการนี้ถูกพัฒนาจากมุมมองของความต้องการที่แท้จริงของผู้ใช้ และเราเชื่อว่ามันเป็นตัวอย่างที่ดีของ Low Code
ต้องการลองใช้ดูไหม? ไปที่ Logto Cloud และเลือกตัวเชื่อมต่อ