บทช่วยสอนนี้จะแนะนำกระบวนการสร้างและปรับใช้ UI ลงชื่อเข้าใช้เองให้กับ Logto Cloud
Logto มอบประสบการณ์ UI ลงชื่อเข้าใช้ที่เร็วพร้อมครอบคลุมทุกฟีเจอร์ของ Logto รวมถึงการลงชื่อเข้าใช้ การลงทะเบียน การกู้คืนรหัสผ่าน การเข้าใช้งานแบบ SSO และอื่นๆ อีกมากมาย ผู้ใช้ยังสามารถปรับแต่งลักษณะและให้ความรู้สึกเวลาใช้งานสำหรับ UI ลงชื่อเข้าใช้ได้ด้วยฟีเจอร์ "Custom CSS" ของเรา
อย่างไรก็ตาม ยังมีผู้ใช้บางคนที่ต้องการปรับแต่งประสบการณ์การลงชื่อเข้าใช้ของพวกเขาอย่างลึกซึ้ง (ทั้ง UI และการไหลของการยืนยัน) เพื่อให้สอดคล้องกับแบรนด์และความต้องการทางธุรกิจของตนเอง เราได้รับฟังคุณ! และเรามีความยินดีที่จะแจ้งให้ทราบว่าฟีเจอร์ "นำ UI ของคุณเองมาใช้" ได้พร้อมใช้งานใน Logto Cloud แล้ว
ในบทช่วยสอนนี้ เราจะนำคุณผ่านขั้นตอนการสร้างและปรับใช้ UI ลงชื่อเข้าใช้เองของคุณให้กับ Logto Cloud
ก่อนที่คุณจะเริ่มใช้งาน กรุณาตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้:
เพื่อความเรียบง่ายเราจะใช้วิธีการลงชื่อเข้าใช้แบบ "ชื่อผู้ใช้งาน & รหัสผ่าน" ในขั้นตอนต่อไป จำไว้ว่าจะแก้ไขวิธีการลงชื่อเข้าใช้ของคุณใน Logto Console
ข้อกำหนดขั้นต่ำสำหรับ UI ลงชื่อเข้าใช้คือต้องมีไฟล์ index.html พร้อมแบบฟอร์มลงชื่อเข้าใช้ที่มีอย่างน้อยช่องกรอกชื่อผู้ใช้ ช่องกรอกรหัสผ่าน และปุ่มส่ง ฉันใช้ ChatGPT เพื่อสร้างตัวอย่าง HTML ที่น่ารักเป็นพิเศษหน้าลงชื่อเข้าใช้นี้
ฉันได้ละเว้นสไตล์ CSS เพื่อความเรียบง่าย และนี่คือวิธีที่ HTML แบบง่ายๆ ดูเหมือน:
คุณยังสามารถเริ่มจากโครงเริ่มต้นจากเฟรมเวิร์คส่วนหน้าที่คุณชื่นชอบ เช่น Create React App, Next.js หรือ Vue CLI
เนื่องจาก Logto เป็นโอเพ่นซอร์ซ อีกวิธีที่แนะนำคือโคลน โครงการ Logto Experience และปรับโค้ดให้ตรงกับความต้องการของคุณ นี่คือรายการลักษณะการทำงาน Logto UI ลงชื่อเข้าใช้แบบเต็ม เขียนด้วย React และ TypeScript
Logto tunnel CLI เป็นเครื่องมือที่ไม่เพียงแค่เสิร์ฟหน้า HTML ของคุณเท่านั้น แต่ยังอนุญาตให้คุณโต้ตอบกับ API ประสบการณ์ Logto จากหน้า HTML ของคุณในสภาพแวดล้อมการพัฒนาท้องถิ่น
สมมติว่าหน้า index.html ของคุณอยู่ใน /path/to/your/custom-ui และ ID tenant ของคุณคือตัวอย่างว่า foobar คุณสามารถรันคำสั่งในลักษณะนี้:
หรือถ้าคุณกำลังใช้เฟรมเวิร์ค UI ที่มีเซิร์ฟเวอร์การพัฒนาของตัวเอง และหน้าเว็บของคุณเสิร์ฟที่ http://localhost:4000 คุณสามารถรันคำสั่งในลักษณะนี้:
หลังจากรันคำสั่งแล้ว บริการท่ออุโมงค์จะถูกเปิดใช้งานในเครื่องท้องถิ่นของคุณที่ http://localhost:9000/
ไปที่แอปพลิเคชันที่คุณสร้างขึ้นในก่อนหน้านี้ และเปลี่ยน endpoint Logto จาก https://foobar.logto.app/ เป็น http://localhost:9000/ ในโปรแกรมผ่าน SDK ของ Logto
สมมติว่าโครงการตัวอย่าง React ของเรา:
คลิกปุ่ม "Sign in" ในแอปพลิเคชันของคุณ แทนที่จะเห็น UI ลงชื่อเข้าใช้แบบบิลด์อินของ Logto คุณควรถูกนำไปที่หน้าลงชื่อเข้าใช้เองของคุณ
ในขั้นตอนนี้ เราจะโต้ตอบกับ API ประสบการณ์ Logto ใน UI เองของคุณ ขั้นแรก สร้างไฟล์ script.js และเพิ่มการอ้างอิงใน index.html ของคุณ
ใส่โค้ดต่อไปนี้ลงในไฟล์ script.js ของคุณ
สคริปต์นี้จะทำขั้นตอนการลงชื่อเข้าใช้ด้วยชื่อผู้ใช้และรหัสผ่านให้เสร็จตามด้วยการช่วยของ API ต่อไปนี้:
PUT /api/experience - เริ่มการโต้ตอบการลงชื่อเข้าใช้POST /api/experience/verification/password - ยืนยันชื่อผู้ใช้และรหัสผ่านPOST /api/experience/identification - ระบุผู้ใช้สำหรับการโต้ตอบปัจจุบันPOST /api/experience/submit - ส่งการโต้ตอบการลงชื่อเข้าใช้ดูรายละเอียดเพิ่มเติมใน Logto Experience API docs
http://localhost:9000/เมื่อคุณพัฒนาและทดสอบ UI ลงชื่อเข้าใช้ของคุณเองในเครื่องแล้ว คุณสามารถปรับใช้ให้กับ Logto Cloud ได้ เพียงแค่สร้างไฟล์ zip ของโฟลเดอร์ UI ของคุณเองและอัปโหลดไปยังส่วน "Custom UI" ใน Logto Console ของคุณ
หลังจากอัปโหลดแล้ว ให้บันทึกการเปลี่ยนแปลง และ UI ลงชื่อเข้าใช้ของคุณเองจะเป็นการใช้งานจริงใน tenant Logto Cloud ของคุณแทน Logto UI ลงชื่อเข้าใช้ที่มีอยู่แล้ว
สุดท้าย กลับไปยังแอปพลิเคชันของคุณและเปลี่ยน URI endpoint กลับไปยัง endpoint Logto cloud ของคุณ: https://foobar.logto.app/ คราวนี้ คุณสามารถหยุดการให้บริการจาก Logto tunnel แล้วแอปพลิเคชันของคุณควรทำงานตรงกับ UI เองที่อยู่บนนั้น
ในบทช่วยสอนนี้ เราได้นำคุณผ่านกระบวนการของการนำไปใช้และปรับใช้ UI ลงชื่อเข้าใช้ของคุณเองกับ Logto Cloud
ด้วยฟีเจอร์นี้ คุณสามารถปรับแต่ง UI ลงชื่อเข้าใช้และกระแสการยืนยันให้ตรงกับแบรนด์และความต้องการทางธุรกิจของคุณได้อย่างลึกซึ้ง
ขอให้สนุกกับการเขียนโค้ด! 🚀