สร้าง UI ลงชื่อเข้าใช้เองให้กับ Logto Cloud

พื้นหลัง#

Logto มอบประสบการณ์ UI ลงชื่อเข้าใช้ที่เร็วพร้อมครอบคลุมทุกฟีเจอร์ของ Logto รวมถึงการลงชื่อเข้าใช้ การลงทะเบียน การกู้คืนรหัสผ่าน การเข้าใช้งานแบบ SSO และอื่นๆ อีกมากมาย ผู้ใช้ยังสามารถปรับแต่งลักษณะและให้ความรู้สึกเวลาใช้งานสำหรับ UI ลงชื่อเข้าใช้ได้ด้วยฟีเจอร์ "Custom CSS" ของเรา

อย่างไรก็ตาม ยังมีผู้ใช้บางคนที่ต้องการปรับแต่งประสบการณ์การลงชื่อเข้าใช้ของพวกเขาอย่างลึกซึ้ง (ทั้ง UI และการไหลของการยืนยัน) เพื่อให้สอดคล้องกับแบรนด์และความต้องการทางธุรกิจของตนเอง เราได้รับฟังคุณ! และเรามีความยินดีที่จะแจ้งให้ทราบว่าฟีเจอร์ "นำ UI ของคุณเองมาใช้" ได้พร้อมใช้งานใน Logto Cloud แล้ว

ในบทช่วยสอนนี้ เราจะนำคุณผ่านขั้นตอนการสร้างและปรับใช้ UI ลงชื่อเข้าใช้เองของคุณให้กับ Logto Cloud

ข้อกำหนดเบื้องต้น#

ก่อนที่คุณจะเริ่มใช้งาน กรุณาตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้:

• บัญชี Logto Cloud พร้อมแผนการสมัครใช้งาน
• แอปพลิเคชันที่รวมเข้ากับ Logto (เริ่มต้นอย่างรวดเร็ว)
• Logto tunnel CLI ติดตั้งแล้ว
• ความรู้พื้นฐานด้าน HTML, CSS, และ JavaScript

เพื่อความเรียบง่ายเราจะใช้วิธีการลงชื่อเข้าใช้แบบ "ชื่อผู้ใช้งาน & รหัสผ่าน" ในขั้นตอนต่อไป จำไว้ว่าจะแก้ไขวิธีการลงชื่อเข้าใช้ของคุณใน Logto Console

สร้าง UI ลงชื่อเข้าใช้ของคุณเอง#

ข้อกำหนดขั้นต่ำสำหรับ UI ลงชื่อเข้าใช้คือต้องมีไฟล์ index.html พร้อมแบบฟอร์มลงชื่อเข้าใช้ที่มีอย่างน้อยช่องกรอกชื่อผู้ใช้ ช่องกรอกรหัสผ่าน และปุ่มส่ง ฉันใช้ ChatGPT เพื่อสร้างตัวอย่าง HTML ที่น่ารักเป็นพิเศษหน้าลงชื่อเข้าใช้นี้

ฉันได้ละเว้นสไตล์ CSS เพื่อความเรียบง่าย และนี่คือวิธีที่ HTML แบบง่ายๆ ดูเหมือน:

คุณยังสามารถเริ่มจากโครงเริ่มต้นจากเฟรมเวิร์คส่วนหน้าที่คุณชื่นชอบ เช่น Create React App, Next.js หรือ Vue CLI

เนื่องจาก Logto เป็นโอเพ่นซอร์ซ อีกวิธีที่แนะนำคือโคลน โครงการ Logto Experience และปรับโค้ดให้ตรงกับความต้องการของคุณ นี่คือรายการลักษณะการทำงาน Logto UI ลงชื่อเข้าใช้แบบเต็ม เขียนด้วย React และ TypeScript

ตั้งค่า Logto tunnel CLI#

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#

ในขั้นตอนนี้ เราจะโต้ตอบกับ 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

ทดสอบหน้าลงชื่อเข้าใช้ของคุณเอง#

1. ไปที่แอปพลิเคชันของคุณและคลิกปุ่ม "Sign in"
2. คุณควรจะถูกนำไปที่หน้าลงชื่อเข้าใช้เองของคุณที่ http://localhost:9000/
3. ใส่ชื่อผู้ใช้และรหัสผ่านจากนั้นคลิกปุ่ม "Submit"
4. หากทุกอย่างกำหนดค่าไว้อย่างถูกต้อง คุณจะถูกเปลี่ยนไปยังแอปพลิเคชันของคุณอีกครั้งพร้อมกับข้อมูลผู้ใช้ที่ตรวจสอบแล้ว

ปรับใช้ UI ลงชื่อเข้าใช้ของคุณเองกับ Logto Cloud#

เมื่อคุณพัฒนาและทดสอบ 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 ลงชื่อเข้าใช้และกระแสการยืนยันให้ตรงกับแบรนด์และความต้องการทางธุรกิจของคุณได้อย่างลึกซึ้ง

ขอให้สนุกกับการเขียนโค้ด! 🚀