ไทย
  • svelte
  • sveltekit
  • node
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

สร้างการตรวจสอบสิทธิ์ SvelteKit ด้วย Logto

เรียนรู้วิธีการสร้างการไหลเพื่อการตรวจสอบสิทธิ์ผู้ใช้ด้วย SvelteKit โดยการผสานรวม Logto SDK

Gao
Gao
Founder

หยุดเสียเวลาเป็นสัปดาห์กับการยืนยันตัวตนผู้ใช้
เปิดตัวแอปที่ปลอดภัยเร็วขึ้นด้วย Logto ผสานการยืนยันตัวตนผู้ใช้ภายในไม่กี่นาทีและมุ่งเน้นที่ผลิตภัณฑ์หลักของคุณ
เริ่มต้นใช้งาน
Product screenshot

เริ่มต้น

แนะนำ

  • Logto เป็นทางเลือกแบบโอเพนซอร์สสำหรับ Auth0 ในการสร้างโครงสร้างพื้นฐานด้านตัวตน มันรองรับวิธีการลงชื่อเข้าใช้หลากหลาย รวมถึงชื่อผู้ใช้ อีเมล หมายเลขโทรศัพท์ และการลงชื่อเข้าใช้ผ่านโซเชียลยอดนิยมเช่น Google และ GitHub
  • SvelteKit เป็นเฟรมเวิร์คสำหรับการพัฒนาแอปพลิเคชันเว็บที่แข็งแกร่งและมีประสิทธิภาพอย่างรวดเร็วด้วย Svelte.

ในบทเรียนนี้ เราจะแสดงวิธีสร้างการไหลของการตรวจสอบตัวผู้ใช้ด้วย SvelteKit โดยการรวม Logto SDK บทเรียนนี้ใช้ TypeScript เป็นภาษาการเขียนโปรแกรม

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

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

  • บัญชี Logto หากคุณยังไม่มี คุณสามารถ ลงทะเบียนฟรี
  • สภาพแวดล้อมการพัฒนา A SvelteKit และโครงการ

สร้างแอปพลิเคชัน Logto

ในการเริ่มต้น ให้สร้างแอปพลิเคชัน Logto ด้วยประเภท "Traditional web" ทำตามขั้นตอนเหล่านี้เพื่อสร้างแอปพลิเคชัน Logto:

  1. ลงชื่อเข้าใช้ Logto Console
  2. ในแถบนำทางด้านซ้าย คลิกที่ แอปพลิเคชัน
  3. คลิกที่ สร้างแอปพลิเคชัน
  4. ในหน้าที่เปิดขึ้น ให้หาเซคชัน "Traditional web" และหาการ์ด "SvelteKit"
  5. คลิกที่ เริ่มสร้าง และกรอกชื่อแอปพลิเคชันของคุณ
  6. คลิกที่ สร้าง

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

ลองใช้คู่มือแบบโต้ตอบของ Logto Cloud

ผสานรวมกับ Logto SDK

การติดตั้ง

ติดตั้ง Logto SDK ผ่านตัวจัดการแพ็กเกจที่คุณชื่นชอบ:

เพิ่ม Logto hook

ในไฟล์ hooks.server.ts ของคุณ ให้เพิ่มโค้ดต่อไปนี้เพื่อฝัง Logto hook เข้าไปในเซิร์ฟเวอร์ของคุณ:

เนื่องจากข้อมูลเหล่านี้มีความละเอียดอ่อน ขอแนะนำให้ใช้ตัวแปรสภาพแวดล้อม:

หากมี hooks หลายตัว คุณสามารถใช้ ฟังก์ชันช่วยเหลือ sequence() เพื่อเชื่อมโยงพวกเขา:

ตอนนี้คุณสามารถเข้าถึงไคลเอนต์ Logto ในวัตถุ locals สำหรับ TypeScript คุณสามารถเพิ่มประเภทใน app.d.ts:

เราจะพูดคุยเกี่ยวกับวัตถุ user ในภายหลัง

ดำเนินการเข้าสู่ระบบและออกจากระบบ

กำหนดค่า URI เปลี่ยนเส้นทาง

เปลี่ยนไปที่หน้ารายละเอียดแอปพลิเคชันของ Logto Console เพิ่ม URI เปลี่ยนเส้นทาง http://localhost:3000/callback

URI เปลี่ยนเส้นทาง เป็นแนวคิดของ OAuth 2.0 ที่บ่งบอกถึงตำแหน่งที่ควรเปลี่ยนเส้นทางหลังการตรวจสอบตัวตน

ในทำนองเดียวกัน เพิ่ม http://localhost:3000/ ในเซคชัน "URI เปลี่ยนเส้นทางหลังออกจากระบบ"

URI เปลี่ยนเส้นทางหลังออกจากระบบ เป็นแนวคิดของ OAuth 2.0 ที่บ่งบอกถึงตำแหน่งที่ควรเปลี่ยนเส้นทางหลังออกจากระบบ

จากนั้นคลิก "บันทึก" เพื่อบันทึกการเปลี่ยนแปลง

กลับไปยังแอปของคุณ ในหน้าที่คุณต้องการดำเนินการเข้าสู่ระบบและออกจากระบบ ให้กำหนดการกระทำต่อไปนี้:

จากนั้นใช้การกระทำเหล่านี้ในคอมโพเนนต์ Svelte ของคุณ:

แสดงข้อมูลผู้ใช้

ในการแสดงข้อมูลของผู้ใช้ คุณสามารถฝังวัตถุ locals.user ลงในเลย์เอาต์ ทำให้สามารถเข้าถึงได้สำหรับทุกหน้า:

ในคอมโพเนนต์ Svelte ของคุณ:

จุดตรวจ: รันแอปพลิเคชัน

ตอนนี้คุณสามารถรันแอปพลิเคชันและลองลงชื่อเข้าใช้/ออกจากระบบด้วย Logto:

  1. เปิดแอปพลิเคชันในเบราว์เซอร์ของคุณ คุณควรเห็นปุ่ม "ลงชื่อเข้าใช้"
  2. คลิกที่ปุ่ม "ลงชื่อเข้าใช้" และคุณจะถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของ Logto
  3. หลังจากที่คุณลงชื่อเข้าใช้ คุณจะถูกเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชัน และคุณควรเห็นข้อมูลผู้ใช้และปุ่ม "ลงชื่อออก"
  4. คลิกที่ปุ่ม "ลงชื่อออก" และคุณจะถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อออกของ Logto และจากนั้นเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันในสถานะที่ไม่ได้ลงชื่อเข้าใช้

หากคุณพบปัญหาใด ๆ ระหว่างการรวม โปรดอย่าลังเลที่จะ เข้าร่วมเซิร์ฟเวอร์ Discord ของเรา เพื่อพูดคุยกับชุมชนและทีม Logto!

อ่านเพิ่มเติม

ลองใช้ Logto วันนี้