ผสานรวมการรับรอง Logto ให้กับแอปพลิเคชัน Next.js ของคุณโดยใช้ Server Actions
Server Actions นำเสนอวิธีการใหม่ในการสร้างแอปพลิเคชันเว็บที่มีประสิทธิภาพโดยไม่ต้องใช้ REST API แบบดั้งเดิม เราได้พูดถึงเรื่องนี้ใน บทความของเรา มาก่อนหน้านี้แล้ว
วันนี้เราตื่นเต้นที่จะประกาศการสนับสนุนอย่างเป็นทางการสำหรับ Server Actions ใน Next.js SDK ของเรา แม้ว่ามันจะเป็นฟีเจอร์ที่อยู่ในขั้นทดลองก็ตาม
สำหรับภาพรวมอย่างรวดเร็ว ลองดู ตัวอย่างนี้ และติดตามไปพร้อมกับคำแนะนำในการผสานรวม Logto กับ Server Actions ในคำแนะนำนี้
เพื่อเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้:
ถ้าคุณโฮสต์ Logto ด้วยตนเอง อ้างอิงจากเอกสาร "Get started" ของ Logto เพื่อตั้งค่าอินสแตนซ์ Logto ของคุณ
เปิด Logto Console โดยใส่ URL https://cloud.logto.io/ ถ้าคุณใช้ Logto Cloud หรือจุดเข้าใช้งานที่คุณตั้งค่าไว้สำหรับการโฮสต์ด้วยตนเอง
จากนั้น ไปที่แท็บ "Applications" และคลิก "Create application"
ในหน้าต่างที่ปรากฏ ให้เลือก "Next.js (App Router)" และใส่ชื่อแอปพลิเคชัน เช่น "Next.js App" แล้วคลิก "Create application"
คุณจะถูกนำไปยังหน้าสอนใน Logto คลิก "Finish and done" เพื่อดำเนินการต่อไปยังหน้ารายละเอียดของแอปพลิเคชัน
ในส่วน "Redirect URIs" ใส่ค่าต่อไปนี้:
ตัวอย่างเช่น ถ้าคุณโฮสต์ Next.js บน http://localhost:3000 ค่านี้จะเป็น:
คลิกปุ่ม "Save Changes" ที่ด้านล่าง เมื่อลงทะเบียนสำเร็จแล้ว ให้คงหน้านี้เปิดไว้เพราะจะมีประโยชน์สำหรับการตั้งค่า Next.js
ตรวจสอบให้แน่ใจว่าคุณมีโปรเจกต์ที่มีเวอร์ชันล่าสุดของ Next.js ถ้าคุณยังไม่มี สามารถทำตาม คู่มือการติดตั้งอย่างเป็นทางการ เพื่อสร้างตัวใหม่
ขณะที่เขียนคำแนะนำนี้ ฟีเจอร์นี้ยังอยู่ในขั้นทดสอบและต้องเปิดใช้งานใน next.config.js
เริ่มต้นด้วยการติดตั้งโมดูล @logto/next โดยใช้ npm ดังนี้:
คุณสามารถใช้ yarn หรือ pnpm แทนได้
จากนั้นสร้างฟังก์ชันบางอย่างเป็น "server actions" สร้างไฟล์ใหม่ libraries/logto.ts:
ในไฟล์นี้ เราส่งออกสี่ฟังก์ชันเพื่อการรับรอง โปรดสังเกตบรรทัดแรก "use server" ที่ระบุว่าซอร์สโค้ดในไฟล์นี้สามารถทำงานได้เฉพาะบนเซิร์ฟเวอร์เท่านั้น เราใช้ "next/headers" เพื่อจัดการการตั้งค่าของคุกกี้
"user server": https://react.dev/reference/react/use-server"next/headers" เพื่อจัดการคุกกี้: https://nextjs.org/docs/api-reference/next/headersฟังก์ชันข้างต้นที่เราส่งออกสามารถเรียกได้โดยตรงจากคอมโพเนนต์ React ในฝั่งไคลเอนต์ นั่นคือข้อดีหลักของการใช้ Server Actions ลองไปที่บทถัดไปเพื่อดูวิธีการใช้ฟังก์ชันเหล่านี้
ด้วยฟังก์ชันการรับรองเหล่านี้ ไปสร้างหน้ากัน เราจะสร้างสองคอมโพเนนต์ไคลเอนต์เพื่อเริ่มการทำงานของการเข้าสู่ระบบและออกจากระบบ
/app/sign-in.tsx:
ที่นี่เราอิมพอร์ตฟังก์ชัน signIn ที่เพิ่งกำหนดในบทที่แล้ว แม้ว่าจะดำเนินการในฝั่งเซิร์ฟเวอร์ได้ แต่ฟังก์ชันนี้ยังคงสามารถถูกเรียกโดยตรงโดยคอมโพเนนต์ <button> เมื่อผู้ใช้คลิกปุ่มการเข้าสู่ระบบ โดยการทำเช่นนี้เราไม่จำเป็นต้องเขียน REST API ใดๆ เพื่อจัดการกระบวนการลงชื่อเข้าใช้ จริงๆ แล้ว Next.js จัดการรายละเอียดของ "POST" request dispatcher ให้เรา เมื่อได้รับ redirectUrl แล้ว เราสามารถเรียก router.push เพื่อเปลี่ยนเส้นทางไปยัง Logto หน้าลงชื่อเข้าใช้
/app/sign-out.tsx:
กระบวนการลงชื่อออกคล้ายกับกระบวนการลงชื่อเข้า
ในฐานะผู้ให้บริการระบุตัวตนแบบ OIDC ที่เป็นมาตรฐาน Logto จะเปลี่ยนเส้นทางผู้ใช้ไปยัง URL callback หลังจากรับรองแล้ว ดังนั้นเราจำเป็นต้องเตรียมเพจ callback เพื่อจัดการผลลัพธ์การเข้าสู่ระบบ
/app/callback/page.tsx
ที่นี่เราใช้ client component กับ useEffect ที่ทำให้เป็นเรื่องง่ายในการแสดงเพจ "loading" เพื่อให้ประสบการณ์การใช้งานที่ดีกับผู้ใช้
ตอนนี้ มาสร้างหน้าแรกแบบมินิมัลเพื่อแสดงประโยชน์ของ Logto SDK ถ้าจำเป็น ป้องกันทรัพยากรใดๆ จากผู้ใช้ที่ไม่รู้จักโดยตรวจสอบค่า isAuthenticated และเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้หรือแสดงข้อความข้อผิดพลาด
app/page.tsx
ตามที่คุณสังเกตได้ นี่คือ server component ที่ไม่จำเป็นต้องใช้ useEffect และการจัดการสถานะที่ซับซ้อนด้วย
Server actions เสนอวิธีการที่เป็นระบบและตรงไปตรงมาในการผสานรวมการรับรองเมื่อเทียบกับโปรเจกต์ Next.js แบบดั้งเดิมที่พึ่งพา REST API
ตัวอย่างโค้ดทั้งหมดสามารถพบได้ในรีโพซิทอรีนี้: https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample
ทำไมไม่ลองใช้ Logto Cloud และสัมผัสประสบการณ์ง่ายๆ นี้ดูล่ะ?