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

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

กำหนดค่า CSP source แบบกำหนดเอง​

Logto จะใช้ Content Security Policy (CSP) header กับหน้า UI แบบกำหนดเอง หาก UI แบบกำหนดเองของคุณโหลด script จาก third-party หรือเชื่อมต่อกับบริการภายนอก ให้เพิ่ม origin ที่อนุญาตเพิ่มเติมใน Console > Sign-in & account > Branding > Bring your UI

คุณสามารถกำหนดค่า:

  • script-src: อนุญาต source ของ JavaScript module หรือ script เช่น CAPTCHA, analytics หรือ tag manager provider
  • connect-src: อนุญาต network endpoint ที่ใช้โดย fetch, XMLHttpRequest, EventSource และการเชื่อมต่อ WebSocket

ตัวอย่าง:

{
  "scriptSrc": ["https://scripts.example.com"],
  "connectSrc": ["https://api.example.com", "wss://events.example.com"]
}

ใช้ HTTPS origin สำหรับทั้งสอง directive สำหรับการเชื่อมต่อ WebSocket นั้น connect-src ยังรองรับ origin แบบ wss:// ด้วย Logto จะเพิ่ม source เหล่านี้เข้าไปใน security policy เดิมเฉพาะเมื่อ custom UI assets ของคุณเปิดใช้งานอยู่เท่านั้น

พัฒนา UI แบบกำหนดเองของคุณ​

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

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

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

จัดการ CAPTCHA เมื่อเปิดใช้งาน​

ประสบการณ์การลงชื่อเข้าใช้ของ Logto ที่มีอยู่จะจัดการ CAPTCHA ให้อัตโนมัติ หาก tenant ของคุณใช้ Bring your UI และเปิดใช้งานการป้องกันบอท CAPTCHA UI แบบกำหนดเองของคุณต้องดำเนินการฝั่ง frontend ให้เสร็จก่อนเรียก PUT /api/experience

ส่ง provider token ที่ได้กลับไปเป็น captchaToken ใน request body ของ PUT /api/experience ดูคู่มือเฉพาะแต่ละ provider ได้ที่:

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

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

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

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

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

  • proxy คำขอ Experience API จากเครื่องของคุณไปยัง endpoint ของ Logto Cloud
  • ทดสอบการทำงานของ 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