ไทย
  • nuxt
  • vue
  • node
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

สร้างการรับรองความถูกต้องของ Nuxt ด้วย Logto

เรียนรู้วิธีการสร้างกระบวนการรับรองความถูกต้องของผู้ใช้ด้วย Nuxt โดยการรวม Logto SDK

Gao
Gao
Founder

เริ่มต้น

แนะนำ

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

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

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

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

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

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

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

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

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

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

รวม Logto SDK

การติดตั้ง

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

ลงทะเบียนโมดูล Logto

ในไฟล์คอนฟิก Nuxt ของคุณ (nuxt.config.ts), เพิ่มโมดูล Logto:

การกำหนดค่าขั้นต่ำสำหรับโมดูลมีดังนี้:

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

ดูข้อมูลเพิ่มเติมที่ runtime config

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

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

เปลี่ยนไปที่หน้ารายละเอียดแอปพลิเคชันของ 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).
  • นำเข้า composables สองตัว: useLogtoClient และ useLogtoUser.

เส้นทางเหล่านี้สามารถกำหนดค่าได้ผ่าน logto.pathnames ในตัวเลือกโมดูล, ตัวอย่างเช่น:

ตรวจสอบ ไฟล์การกำหนดประเภท ในแพ็กเกจ @logto/nuxt สำหรับข้อมูลเพิ่มเติม

เนื่องจากหน้าของ Nuxt จะถูกประมวลผลและกลายเป็นแอปพลิเคชันหน้าเดียว (SPA) หลังจากการโหลดครั้งแรก เราจำเป็นต้องเปลี่ยนเส้นทางผู้ใช้ไปยังเส้นทางเข้าสู่ระบบหรือออกจากระบบเมื่อจำเป็น

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

เพื่อแสดงข้อมูลของผู้ใช้ คุณสามารถใช้ useLogtoUser() composable, ซึ่งสามารถใช้ได้ทั้งในเซิร์ฟเวอร์และไคลเอนต์ฝั่ง:

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

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

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

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

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

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