เรียนรู้วิธีการสร้างการไหลเพื่อการตรวจสอบสิทธิ์ผู้ใช้ด้วย SvelteKit โดยการผสานรวม Logto SDK
ในบทเรียนนี้ เราจะแสดงวิธีสร้างการไหลของการตรวจสอบตัวผู้ใช้ด้วย SvelteKit โดยการรวม Logto SDK บทเรียนนี้ใช้ TypeScript เป็นภาษาการเขียนโปรแกรม
ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมีสิ่งต่อไปนี้:
ในการเริ่มต้น ให้สร้างแอปพลิเคชัน Logto ด้วยประเภท "Traditional web" ทำตามขั้นตอนเหล่านี้เพื่อสร้างแอปพลิเคชัน Logto:
จากนั้นคุณควรเห็นคู่มือแบบโต้ตอบที่จะแนะนำคุณตลอดกระบวนการรวม Logto SDK กับแอปพลิเคชัน SvelteKit ของคุณ เนื้อหาต่อไปนี้สามารถใช้เป็นข้อมูลอ้างอิงในอนาคตได้
ติดตั้ง Logto SDK ผ่านตัวจัดการแพ็กเกจที่คุณชื่นชอบ:
ในไฟล์ hooks.server.ts ของคุณ ให้เพิ่มโค้ดต่อไปนี้เพื่อฝัง Logto hook เข้าไปในเซิร์ฟเวอร์ของคุณ:
เนื่องจากข้อมูลเหล่านี้มีความละเอียดอ่อน ขอแนะนำให้ใช้ตัวแปรสภาพแวดล้อม:
หากมี hooks หลายตัว คุณสามารถใช้ ฟังก์ชันช่วยเหลือ sequence() เพื่อเชื่อมโยงพวกเขา:
ตอนนี้คุณสามารถเข้าถึงไคลเอนต์ Logto ในวัตถุ locals สำหรับ TypeScript คุณสามารถเพิ่มประเภทใน app.d.ts:
เราจะพูดคุยเกี่ยวกับวัตถุ user ในภายหลัง
เปลี่ยนไปที่หน้ารายละเอียดแอปพลิเคชันของ Logto Console เพิ่ม URI เปลี่ยนเส้นทาง http://localhost:3000/callback
URI เปลี่ยนเส้นทาง เป็นแนวคิดของ OAuth 2.0 ที่บ่งบอกถึงตำแหน่งที่ควรเปลี่ยนเส้นทางหลังการตรวจสอบตัวตน
ในทำนองเดียวกัน เพิ่ม http://localhost:3000/ ในเซคชัน "URI เปลี่ยนเส้นทางหลังออกจากระบบ"
URI เปลี่ยนเส้นทางหลังออกจากระบบ เป็นแนวคิดของ OAuth 2.0 ที่บ่งบอกถึงตำแหน่งที่ควรเปลี่ยนเส้นทางหลังออกจากระบบ
จากนั้นคลิก "บันทึก" เพื่อบันทึกการเปลี่ยนแปลง
กลับไปยังแอปของคุณ ในหน้าที่คุณต้องการดำเนินการเข้าสู่ระบบและออกจากระบบ ให้กำหนดการกระทำต่อไปนี้:
จากนั้นใช้การกระทำเหล่านี้ในคอมโพเนนต์ Svelte ของคุณ:
ในการแสดงข้อมูลของผู้ใช้ คุณสามารถฝังวัตถุ locals.user ลงในเลย์เอาต์ ทำให้สามารถเข้าถึงได้สำหรับทุกหน้า:
ในคอมโพเนนต์ Svelte ของคุณ:
ตอนนี้คุณสามารถรันแอปพลิเคชันและลองลงชื่อเข้าใช้/ออกจากระบบด้วย Logto:
หากคุณพบปัญหาใด ๆ ระหว่างการรวม โปรดอย่าลังเลที่จะ เข้าร่วมเซิร์ฟเวอร์ Discord ของเรา เพื่อพูดคุยกับชุมชนและทีม Logto!