ข้ามไปยังเนื้อหาหลัก

นำ UI ของคุณมาใช้

Logto อนุญาตให้นำ UI ของคุณเองมาใช้แทนอินเทอร์เฟซประสบการณ์การลงชื่อเข้าใช้ที่มีอยู่ได้อย่างสมบูรณ์ นอกเหนือจากตัวเลือกการปรับแต่ง UI ที่มีให้ล่วงหน้า ฟีเจอร์นี้ช่วยให้คุณอัปโหลดไฟล์ zip ที่มีไฟล์ UI ที่คุณออกแบบเอง (HTML, CSS, JavaScript, รูปภาพ ฯลฯ) ให้ Logto Cloud โฮสต์ไว้บนเซิร์ฟเวอร์ และนำมาใช้เป็น ประสบการณ์การลงชื่อเข้าใช้ สำหรับผู้ใช้ tenant ของคุณ

บันทึก:

ฟีเจอร์นี้ต้องการให้ UI ของคุณรองรับรูปแบบ Single Page Application (SPA) และแนะนำให้ใช้ build สำหรับ production เสมอเพื่อประสิทธิภาพสูงสุด

สำรวจฟีเจอร์ Custom UI ใน Logto Console​

เริ่มต้นด้วยโปรเจกต์ทางการ​

วิธีที่เร็วที่สุดในการเริ่มต้น UI ลงชื่อเข้าใช้แบบกำหนดเอง คือการโคลน Logto experience project นี่คือ UI ประสบการณ์การลงชื่อเข้าใช้ของ Logto ที่ครอบคลุมทุกฟีเจอร์และแนวปฏิบัติที่ดีที่สุดของ Logto คุณสามารถปรับแต่งให้เหมาะกับความต้องการของคุณได้

หลังจากตรวจสอบโค้ดแล้ว ให้รันคำสั่งต่อไปนี้เพื่อ build โปรเจกต์:

pnpm install && pnpm build
บันทึก:

ทั้งโปรเจกต์ Logto เป็น pnpm monorepo หากคุณต้องการรันแพ็กเกจ experience แบบ standalone (โดยไม่ใช้ pnpm) ให้แทนที่ workspace: dependencies ใน package.json ด้วยหมายเลขเวอร์ชันที่ระบุ (เช่น ^1.0.0)

หลังจาก build เสร็จสิ้น คุณจะพบไฟล์ที่คอมไพล์แล้วทั้งหมดในไดเรกทอรี dist จากนั้นสร้างไฟล์ ZIP ของไดเรกทอรี dist - ไฟล์นี้จะถูกใช้สำหรับอัปโหลดไปยัง Logto Cloud ในขั้นตอนถัดไป

ข้อกำหนดของไฟล์ Custom UI​

ก่อนอัปโหลดไฟล์ UI ของคุณ โปรดตรวจสอบให้แน่ใจว่าเป็นไปตามข้อกำหนดดังต่อไปนี้:

  • ไฟล์ที่อัปโหลดควรถูกบรรจุเป็นไฟล์ zip เดียว
  • ไฟล์ zip ต้องมีไฟล์ index.html อยู่ในไดเรกทอรีราก
  • ไฟล์ zip ต้องมีขนาดไม่เกิน 20MB
  • ไฟล์ zip ต้องไม่มีไฟล์ใดที่มีขนาดเกิน 10MB
  • ไฟล์ zip ต้องมีจำนวนไฟล์รวมไม่เกิน 200 ไฟล์

อัปโหลดไฟล์ Custom UI ของคุณ​

บันทึก:

โปรดใช้ความระมัดระวังเมื่อใช้ฟีเจอร์นี้ใน production เพราะจะมีผลกับประสบการณ์การลงชื่อเข้าใช้ของผู้ใช้ทันที

  1. ไปที่ Console > ประสบการณ์การลงชื่อเข้าใช้ > การตั้งค่าแบรนด์ > นำ UI ของคุณมาใช้
  2. คลิกเพื่อเลือกหรือ drag and drop ไฟล์ zip ที่คุณสร้างไว้ในขั้นตอนก่อนหน้า ระบบจะเริ่มอัปโหลดโดยอัตโนมัติ
  3. เมื่ออัปโหลดเสร็จแล้ว ให้บันทึกการเปลี่ยนแปลง UI ของคุณจะถูกนำมาใช้ทันที
  4. หน้าต่าง "Sign-in preview" จะถูกปิดใช้งานเมื่อคุณใช้ UI ลงชื่อเข้าใช้แบบกำหนดเอง อย่างไรก็ตาม คุณยังสามารถคลิกปุ่ม "Live preview" เพื่อทดสอบหน้าลงชื่อเข้าใช้ของคุณในแท็บเบราว์เซอร์ใหม่ได้

พัฒนา UI ของคุณเอง​

โต้ตอบกับ Experience API​

UI ของคุณจำเป็นต้องโต้ตอบกับ Experience API เพื่อดำเนินการต่าง ๆ เช่น ลงชื่อเข้าใช้ ลงทะเบียนผู้ใช้ รีเซ็ตรหัสผ่าน ผูกบัญชีโซเชียล เปิดใช้งาน MFA และอื่น ๆ เพื่อเข้าใจ flow ของผู้ใช้และรายละเอียดการใช้งาน แนะนำให้ศึกษาจาก Experience API design RFC ซึ่งมีรายละเอียดทางเทคนิคและตัวอย่างอย่างครบถ้วน

คุณยังจำเป็นต้องเข้าถึงการตั้งค่าประสบการณ์การลงชื่อเข้าใช้อื่น ๆ เช่น สีแบรนด์ โลโก้บริษัท favicon นโยบายรหัสผ่าน ข้อความภาษาท้องถิ่น หรือแม้แต่ custom CSS ผ่าน sign-in Experience API endpoint

โปรเจกต์ตัวอย่าง​

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

นอกจากนี้ เรายังจะพัฒนาโปรเจกต์ตัวอย่างที่ง่ายขึ้นและเน้นตามสถานการณ์การใช้งานจริง เพื่อครอบคลุม use case ที่พบบ่อย โปรดติดตามอัปเดตในอนาคต!

การพัฒนาและดีบักแบบ local​

สำหรับการพัฒนาและดีบักแบบ local เรามีเครื่องมือ Logto Tunnel CLI เพื่อ:

  • Proxy คำขอ Experience API จากเครื่องของคุณไปยัง Logto Cloud endpoint
  • ทดสอบการทำงานของ UI แบบกำหนดเองในเครื่อง

สิ่งนี้ช่วยให้คุณทดสอบและดีบัก UI ได้ในเครื่องก่อนอัปโหลดขึ้น Logto Cloud

โปรดดูรายละเอียดที่ Debug และทดสอบ UI ของคุณในเครื่อง

อัปโหลดไฟล์ Custom UI ด้วย CLI​

นอกจากการอัปโหลดผ่าน Console แล้ว คุณยังสามารถใช้ Logto CLI เพื่ออัปโหลดไฟล์ UI แบบกำหนดเองได้ด้วย วิธีนี้เหมาะสำหรับ workflow การ deploy แบบอัตโนมัติ

โปรดดูรายละเอียดที่ อัปโหลดไฟล์ Custom UI ด้วย CLI

กู้คืนประสบการณ์การลงชื่อเข้าใช้แบบดั้งเดิมของ Logto​

หากคุณต้องการกลับไปใช้ประสบการณ์การลงชื่อเข้าใช้แบบดั้งเดิมของ Logto เพียงคลิกปุ่มลบบนการ์ด “นำ UI ของคุณมาใช้” หลังจากบันทึกการเปลี่ยนแปลง UI จะกลับไปเป็นค่าเริ่มต้นของ Logto

RFCS: Experience API

 ตัวอย่าง Experience

นำ UI ลงชื่อเข้าใช้ของคุณมาใช้กับ Logto Cloud