วิธีที่เราสนับสนุนตัวเชื่อมต่อที่หลากหลาย

บทนำ#

ตัวเชื่อมต่อ มีบทบาทที่สำคัญใน 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) คืออะไร#

CDD หรือ Component Driven Development นำเสนอวิธีการทางเลือกในการสร้างแอปพลิเคชัน ในวิธีการทั่วไป หัวหน้าสถาปนิกจะสร้างการออกแบบตามความต้องการทางธุรกิจ แอปพลิเคชันจะถูกพัฒนาและใช้งาน และการเปลี่ยนแปลงจะถูกดำเนินการผ่านองค์ประกอบเพิ่มเติมหรือการทำรีแฟกเตอร์ที่ยุ่งยาก

ในทางกลับกัน CDD มุ่งเน้นไปที่การสร้างส่วนประกอบอิสระตั้งแต่เริ่มต้น โดยเริ่มต้นจากระดับพื้นฐานที่สุด อินเทอร์เฟซปกติจะถูกกำหนดขึ้นมาบน JSON เพื่อประกอบอินเทอร์เฟซผู้ใช้ระดับสูง วิธีนี้รวมการใช้ส่วนประกอบที่นำกลับมาใช้ใหม่ได้และแปลน JSON ทำให้นักพัฒนาสามารถสร้างแอปพลิเคชันในลักษณะที่ยืดหยุ่นและขยายได้ง่ายยิ่งขึ้น

ศูนย์กลางของ CDD คือการใช้ความเป็นโมดูลาร์ในการสร้างชุดของส่วนประกอบที่เชื่อมโยงกันอย่างไม่แข็งแรง ซึ่งถูกรวมกันด้วยอินเทอร์เฟซที่มีมาตรฐาน

Dynamic Form คืออะไร?#

การนำแนวทางการพัฒนาที่ขับเคลื่อนด้วยการตั้งค่า (CDD) มาใช้ช่วยให้เราสามารถสร้างฟอร์มเว็บได้อย่างยืดหยุ่น ซึ่งไม่ใช่ฟอร์มปกติที่มีฟิลด์คงที่ แต่เป็นหน่วยที่คล่องตัวที่ฟิลด์ถูกสร้างขึ้นตามไฟล์ JSON ความงามของฟอร์มเว็บแบบไดนามิกเหล่านี้อยู่ในด้านความยืดหยุ่น – ถ้าต้องการเปลี่ยนแปลงในฟิลด์ฟอร์ม สิ่งที่ต้องทำคือการอัปเดตการตั้งค่า JSON ระดับความยืดหยุ่นนี้ทำให้ฟอร์มเว็บแบบไดนามิกเป็นตัวเลือกแก้ปัญหาที่สมบูรณ์แบบสำหรับ Logto Connectors ซึ่งต้องการการกำหนดค่าที่แตกต่างกันที่ไม่รู้จักโดย Logto

การออกแบบ Schema#

เราออกแบบ schema ให้เป็นอาเรย์ของรายการฟอร์ม แต่ละรายการอาจมีชื่อ ป้ายกำกับ ตัวอย่างข้อความ และที่สำคัญที่สุดคือประเภท เรามี 6 ประเภทของรายการฟอร์ม และกำหนดเป็น enum:

และการกำหนดชนิดของรายการฟอร์มคือ:

จากนั้น schema ทั้งหมดคือ:

แต่มีปัญหาเล็กน้อย ประเภทฟอร์ม "select" ต้องการรายชื่อของตัวเลือก ดังนั้นจึงเพิ่มฟิลด์นี้ไปที่ FormItem:

การสร้างฟอร์มด้วย React-Hook-Form#

เมื่อตั้งค่า schema แล้ว เราสามารถสร้างฟอร์มในส่วนหน้าที่อิงตาม schema ได้โดยใช้ React Hook Form เพื่อทำให้เสร็จสิ้น

React-Hook-Form เป็นเครื่องมือที่มีประสิทธิภาพในการสร้างฟอร์มที่ใช้ง่ายใน React

สิ่งแรกคือต้องเริ่มฟอร์ม สมมติว่าได้ทำการดึงการตั้งค่า JSON และเรียกว่า formItems และข้อมูลในฟอร์มคือ formData:

จากนั้นดำเนินการตามองค์ประกอบควบคุมฟอร์มตามประเภท นี่คือตัวอย่างการทำงานง่ายๆ:

สรุป#

ความยืดหยุ่นของการพัฒนาที่ขับเคลื่อนด้วยการตั้งค่า (CDD) แสดงให้เห็นเด่นชัดเมื่อประยุกต์ใช้กับการสร้างฟอร์มแบบไดนามิก โดยเฉพาะกับตัวเชื่อมต่อของ Logto ข้อดีมีสองวิธี:

1. สำหรับนักพัฒนา มันช่วยให้ง่ายต่อการสร้างฟอร์มที่มีปฏิสัมพันธ์และใช้งานง่าย แทนที่จะต้องจัดการกับความซับซ้อนของการเขียนโค้ด นักพัฒนาเพียงแค่ต้องกำหนดไฟล์ JSON เพื่อรับอินเทอร์เฟซผู้ใช้ที่ได้รับการออกแบบที่ดียิ่งขึ้นจากทีม Logto
2. สำหรับผู้ใช้ นักพัฒนานี้ทำให้กระบวนการตั้งค่าตัวเชื่อมต่อง่ายขึ้นอย่างมาก มันเอาความซับซ้อนออกจากการรวมระบบ ทำให้ผู้ใช้สามารถรวม Logto กับฟีเจอร์การเข้าสู่ระบบด้วยโซเชียลได้ง่ายขึ้น รวมถึงบริการอีเมลหรือ SMS

เมื่อไม่นานมานี้ บทความที่โปรโมตเกี่ยวกับ Low Code มีมากมายทางอินเตอร์เน็ต วิธีการนี้ถูกพัฒนาจากมุมมองของความต้องการที่แท้จริงของผู้ใช้ และเราเชื่อว่ามันเป็นตัวอย่างที่ดีของ Low Code

ต้องการลองใช้ดูไหม? ไปที่ Logto Cloud และเลือกตัวเชื่อมต่อ