สร้างเฟรมเวิร์ก SDK ที่ใช้ Node.js สำหรับ Logto ในไม่กี่นาที

ก่อนหน้านี้ใน บทความ นี้ เราได้สร้างเว็บ SDK สำหรับ Logto ในเวลาไม่นาน ตอนนี้ มามุ่งเน้นที่ Node.js แพลตฟอร์มยอดนิยมอีกแห่งสำหรับนักพัฒนา JavaScript

ในคู่มือนี้ เราจะพาคุณผ่านขั้นตอนเพื่อสร้าง SDK ของ Express ที่เรียบง่ายสำหรับ Logto โดยใช้ @logto/node SDK นี้จะนำนิยามการลงชื่อเข้าใช้ และคุณสามารถทำตามขั้นตอนเดียวกันนี้เพื่อสร้าง SDK สำหรับแพลตฟอร์มที่ใช้ Node.js อื่น ๆ อย่าง Koa, Next.js, NestJS เป็นต้น

กระบวนการลงชื่อเข้าใช้#

ก่อนที่เราจะเริ่ม มาทบทวนกระบวนการลงชื่อเข้าใช้ใน Logto กระบวนการลงชื่อเข้าใช้ประกอบด้วยขั้นตอนดังต่อไปนี้:

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

แนะนำสั้น ๆ เกี่ยวกับ @logto/node#

คล้ายกับ @logto/browser แพ็กเกจ @logto/node จะเปิดเผยคลาส LogtoClient ที่ให้ฟังก์ชันหลักของ Logto รวมถึงวิธีการสำหรับกระบวนการลงชื่อเข้าใช้:

1. signIn(): สร้าง URL การตรวจสอบสิทธิ์ OIDC และเปลี่ยนเส้นทางไปยัง URL
2. handleSignInCallback(): ตรวจสอบและวิเคราะห์ URL การตอบกลับและสกัดรหัสยินยอม จากนั้นแลกรหัสเพื่อโทเค็นโดยเรียกจุดสิ้นสุดของโทเค็น
3. getContext(): รับบริบทของคำขอปัจจุบันตามคุกกี้เซสชัน รวมถึงสถานะการตรวจสอบสิทธิ์และข้อมูลผู้ใช้

การสร้าง Express SDK#

ใน SDK เราจะให้ตัวจัดการเส้นทางสองตัว (/sign-in และ /sign-in-callback) พร้อมกับมิดเดิลแวร์ withLogto:

1. /sign-in: ตัวจัดการเส้นทางที่กระตุ้นกระบวนการลงชื่อเข้าใช้ด้วยการตอบสนองที่เปลี่ยนเส้นทางไปยัง URL การตรวจสอบสิทธิ์ OIDC
2. /sign-in-callback: ตัวจัดการเส้นทางที่ประมวลผล URL การตอบกลับ แลกรหัสยินยอมเป็นโทเค็น จัดเก็บโทเค็น และทำให้กระบวนการลงชื่อเข้าใช้เสร็จสิ้น
3. withLogto middleware: มิดเดิลแวร์ที่เรียก getContext() เพื่อดึงบริบทของคำขอปัจจุบัน รวมถึงสถานะการตรวจสอบสิทธิ์และข้อมูลผู้ใช้

ในการใช้ SDK คุณสามารถเพิ่มมิดเดิลแวร์ในแอพ Express ของคุณเพื่อปกป้องเส้นทาง และใช้ตัวจัดการเส้นทางเพื่อกระตุ้นกระบวนการลงชื่อเข้าใช้และจัดการการตอบกลับ

ขั้นตอนที่ 1: ติดตั้งแพ็กเกจ#

ก่อนอื่น ติดตั้งแพ็กเกจ @logto/node โดยใช้ npm หรือผู้จัดการแพ็กเกจอื่น ๆ:

ขั้นตอนที่ 2: เตรียมตัวแปลงที่เก็บข้อมูล#

ต้องใช้ตัวแปลงที่เก็บข้อมูลในการเริ่มต้นใช้งานอินสแตนซ์ LogtoClient

สมมติว่าผู้ใช้ SDK ได้ตั้งค่า Express session แล้ว เราสามารถ implement คลาส Storage ได้โดยการสร้างไฟล์ใหม่ storage.ts:

ขั้นตอนที่ 3: Implement ตัวจัดการเส้นทาง#

คำขอ HTTP นั้นไม่มีสถานะ ดังนั้นเราต้องเริ่มต้นคลาส client สำหรับคำขอแต่ละคำขอ เตรียมฟังก์ชันตัวช่วยเพื่อสร้างอินสแตนซ์ client:

ในฟังก์ชันนี้ เราจะ implement ตัวแปลง navigate พร้อมกับตัวแปลง ExpressStorage ตัวแปลง navigate ถูกใช้เพื่อเปลี่ยนเส้นทางผู้ใช้ไปยัง URL ลงชื่อเข้าใช้

ถัดไป มาดูที่การ implement ตัวจัดการเส้นทาง ห่อในฟังก์ชัน handleAuthRoutes:

1. ตัวจัดการเส้นทาง /auth/sign-in กระตุ้นกระบวนการลงชื่อเข้าใช้โดยการเรียก signIn() สถานะการลงชื่อเข้าใช้จะถูกเก็บใน session และจะถูกใช้โดยตัวจัดการเส้นทาง /auth/sign-in-callback
2. ตัวจัดการเส้นทาง /auth/sign-in-callback จะจัดการ URL การตอบกลับและแลกรหัสยินยอมเป็นโทเค็นโดยการเรียก handleSignInCallback() โทเค็นจะถูกเก็บใน session โดยตัวแปลง ExpressStorage หลังจากเสร็จสิ้นแล้ว ผู้ใช้จะถูกเปลี่ยนเส้นทางกลับไปยังหน้าแรก

ขั้นตอนที่ 4: Implement มิดเดิลแวร์#

มิดเดิลแวร์ withLogto ถูกใช้เพื่อปกป้องเส้นทาง มันจะเรียก getContext() เพื่อรับบริบทของคำขอปัจจุบัน รวมถึงสถานะการตรวจสอบสิทธิ์และข้อมูลผู้ใช้

ฟังก์ชัน getContext ใช้ตัวแปลงที่เก็บข้อมูลเพื่อรับโทเค็นจาก session

เช็คพอยต์: การใช้ SDK#

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

นี่คือตัวอย่างง่าย ๆ ของการใช้ SDK ในแอพ Express ของคุณ:

ในตัวอย่างนี้ เราใช้มิดเดิลแวร์ withLogto เพื่อตรวจสอบสถานะการตรวจสอบสิทธิ์ และเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าลงชื่อเข้าใช้หากพวกเขายังไม่ได้รับการตรวจสอบสิทธิ์ มิฉะนั้นจะแสดงข้อความต้อนรับ

คุณสามารถตรวจสอบโครงการตัวอย่าง Express อย่างเป็นทางการ ที่นี่.

สรุป#

ในคู่มือนี้ เราได้พาคุณผ่านขั้นตอนเพื่อสร้าง Express SDK สำหรับ Logto ที่ดำเนินกระบวนการรับรองความถูกต้องเบื้องต้น SDK ที่ให้มานี้เป็นตัวอย่างพื้นฐาน คุณสามารถขยายมันได้ด้วยการเพิ่มวิธีการและฟังก์ชันเพิ่มเติมเพื่อตอบสนองความต้องการของแอพของคุณ

คุณสามารถทำตามขั้นตอนเดียวกันนี้เพื่อสร้าง SDK สำหรับแพลตฟอร์มอื่นใดที่ใช้ JavaScript และทำงานใน Node.js

แหล่งข้อมูล:

1. Logto Node SDK
2. Logto Express SDK