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

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

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

บันทึก:

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

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

ข้อกำหนดของ asset UI แบบกำหนดเอง​

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

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

อัปโหลด asset UI ของคุณ​

บันทึก:

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

  1. ไปที่ Console > Sign-in & account > Branding > Bring your UI
  2. คลิกเพื่อเลือกหรือ drag & 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

โปรดดูรายละเอียดที่ ดีบักและทดสอบ UI แบบกำหนดเองในเครื่อง

อัปโหลด asset UI แบบกำหนดเองผ่าน CLI​

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

โปรดดูรายละเอียดที่ อัปโหลด asset UI แบบกำหนดเองด้วย CLI

กู้คืนประสบการณ์การลงชื่อเข้าใช้แบบ built-in ของ Logto​

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

RFCS: Experience API

 Experience samples

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