เรียนรู้วิธีการสร้างกระบวนการรับรองความถูกต้องของผู้ใช้ด้วย Nuxt โดยการรวม Logto SDK
ในบทเรียนนี้ เราจะแสดงวิธีสร้างการไหลของการตรวจสอบตัวผู้ใช้ด้วย Nuxt โดยการรวม Logto SDK บทเรียนนี้ใช้ TypeScript เป็นภาษาการเขียนโปรแกรม
ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมีสิ่งต่อไปนี้:
ในการเริ่มต้น ให้สร้างแอปพลิเคชัน Logto ด้วยประเภท "Traditional web" ทำตามขั้นตอนเหล่านี้เพื่อสร้างแอปพลิเคชัน Logto:
จากนั้นคุณควรเห็นคู่มือแบบโต้ตอบที่จะแนะนำคุณตลอดกระบวนการรวม Logto SDK กับแอปพลิเคชัน Nuxt ของคุณ เนื้อหาต่อไปนี้สามารถใช้เป็นข้อมูลอ้างอิงในอนาคตได้
ติดตั้ง Logto SDK ผ่านตัวจัดการแพ็กเกจที่ชื่นชอบ:
ในไฟล์คอนฟิก Nuxt ของคุณ (nuxt.config.ts), เพิ่มโมดูล Logto:
การกำหนดค่าขั้นต่ำสำหรับโมดูลมีดังนี้:
เนื่องจากข้อมูลเหล่านี้เป็นข้อมูลที่สำคัญ จึงแนะนำให้ใช้ตัวแปรสภาพแวดล้อม:
ดูข้อมูลเพิ่มเติมที่ runtime config
เปลี่ยนไปที่หน้ารายละเอียดแอปพลิเคชันของ Logto Console เพิ่ม URI เปลี่ยนเส้นทาง http://localhost:3000/callback
URI เปลี่ยนเส้นทาง เป็นแนวคิดของ OAuth 2.0 ที่บ่งบอกถึงตำแหน่งที่ควรเปลี่ยนเส้นทางหลังการตรวจสอบตัวตน
ในทำนองเดียวกัน เพิ่ม http://localhost:3000/ ในเซคชัน "URI เปลี่ยนเส้นทางหลังออกจากระบบ"
URI เปลี่ยนเส้นทางหลังออกจากระบบ เป็นแนวคิดของ OAuth 2.0 ที่บ่งบอกถึงตำแหน่งที่ควรเปลี่ยนเส้นทางหลังออกจากระบบ
จากนั้นคลิก "บันทึก" เพื่อบันทึกการเปลี่ยนแปลง
เมื่อลงทะเบียนโมดูล @logto/nuxt, จะมีการทำตามนี้:
/sign-in), ออกจากระบบ (/sign-out), และการเรียกกลับ (/callback).useLogtoClient และ useLogtoUser.เส้นทางเหล่านี้สามารถกำหนดค่าได้ผ่าน logto.pathnames ในตัวเลือกโมดูล, ตัวอย่างเช่น:
ตรวจสอบ ไฟล์การกำหนดประเภท ในแพ็กเกจ @logto/nuxt สำหรับข้อมูลเพิ่มเติม
เนื่องจากหน้าของ Nuxt จะถูกประมวลผลและกลายเป็นแอปพลิเคชันหน้าเดียว (SPA) หลังจากการโหลดครั้งแรก เราจำเป็นต้องเปลี่ยนเส้นทางผู้ใช้ไปยังเส้นทางเข้าสู่ระบบหรือออกจากระบบเมื่อจำเป็น
เพื่อแสดงข้อมูลของผู้ใช้ คุณสามารถใช้ useLogtoUser() composable, ซึ่งสามารถใช้ได้ทั้งในเซิร์ฟเวอร์และไคลเอนต์ฝั่ง:
ตอนนี้คุณสามารถรันแอปพลิเคชันและลองลงชื่อเข้าใช้/ออกจากระบบด้วย Logto:
หากคุณพบปัญหาใด ๆ ระหว่างการรวม โปรดอย่าลังเลที่จะ เข้าร่วมเซิร์ฟเวอร์ Discord ของเรา เพื่อพูดคุยกับชุมชนและทีม Logto!