นำ UI เข้าสู่ระบบของคุณเองมาที่ Logto Cloud

ภูมิหลัง#

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

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

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

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

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

• บัญชี Logto Cloud พร้อมแผนการสมัครสมาชิก
• แอปพลิเคชันที่รวมเข้ากับ Logto (Quick-starts)
• ติดตั้ง 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 และแก้ไขรหัสให้เหมาะกับความต้องการของคุณ นี่คือ UI ประสบการณ์การลงชื่อเข้าใช้ในตัวของ Logto ที่เป็นฟีเจอร์เต็มรูปแบบที่เขียนด้วย React และ TypeScript

ตั้งค่า Logto tunnel CLI#

Logto tunnel CLI เป็นเครื่องมือที่ไม่เพียงเสนอหน้า HTML ของคุณเท่านั้น แต่ยังช่วยให้คุณโต้ตอบกับ Logto's Experience API จากหน้า HTML ของคุณในสภาพแวดล้อมการพัฒนาท้องถิ่นได้อีกด้วย

สมมติว่าเพจ index.html ของคุณตั้งอยู่ใน /path/to/your/custom-ui และ ID ผู้เช่าของ Logto ของคุณคือ foobar คุณสามารถรันคำสั่งนี้ได้ดังนี้:

หรือ หากคุณกำลังใช้เฟรมเวิร์ก UI ที่มีเซิร์ฟเวอร์การพัฒนาในตัว และหน้าเพจของคุณถูกจัดไว้ที่ http://localhost:4000 คุณสามารถเรียกใช้คำสั่งในลักษณะนี้:

หลังจากรันคำสั่งแล้ว บริการอุโมงค์จะเริ่มขึ้นในเครื่องของคุณที่ http://localhost:9000/

เรียกการเข้าสู่ระบบจากแอปพลิเคชันของคุณ#

ไปที่แอปพลิเคชันที่คุณสร้างไว้ก่อนหน้านี้ และเปลี่ยนปลายทาง Logto จาก https://foobar.logto.app/ เป็น http://localhost:9000/ ในการกำหนดค่า Logto SDK ของคุณ

ลองดูโปรเจ็กต์ตัวอย่าง React ของเราเป็นตัวอย่าง:

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

โต้ตอบกับ Logto Experience API#

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

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

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

ปรับใช้ UI เข้าสู่ระบบแบบกำหนดเองของคุณไปยัง Logto Cloud#

เมื่อคุณพัฒนาและทดสอบ UI เข้าสู่ระบบแบบกำหนดเองในเครื่องเสร็จแล้ว คุณสามารถปรับใช้ไปยัง Logto Cloud ได้อย่างง่ายดาย เพียงแค่สร้างไฟล์ zip ของโฟลเดอร์ UI ที่กำหนดเองของคุณและอัปโหลดไปยังส่วน "Custom UI" ใน Logto Console ของคุณ

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

สุดท้าย กลับไปที่แอปพลิเคชันของคุณและเปลี่ยน URI ปลายทางกลับไปเป็นปลายทาง Logto cloud ของคุณ: https://foobar.logto.app/. คราวนี้คุณสามารถหยุดบริการ Logto tunnel และแอปพลิเคชันของคุณควรทำงานโดยตรงกับ UI ที่ปรับแต่งเองซึ่งโฮสต์ออนไลน์

สรุป#

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

ด้วยคุณลักษณะนี้ คุณสามารถปรับแต่ง UI และโฟลว์การรับรองความถูกต้องได้อย่างลึกซึ้ง เพื่อให้ตรงกับแบรนด์ของคุณและข้อกำหนดทางธุรกิจเฉพาะ

เขียนโค้ดอย่างสนุก! 🚀