เพิ่มการรับรอง Logto ให้กับแอปพลิเคชัน Next.js ของคุณด้วย Server Actions

Server Actions นำเสนอวิธีการใหม่ในการสร้างแอปพลิเคชันเว็บที่มีประสิทธิภาพโดยไม่ต้องใช้ REST API แบบดั้งเดิม เราได้พูดถึงเรื่องนี้ใน บทความของเรา มาก่อนหน้านี้แล้ว

วันนี้เราตื่นเต้นที่จะประกาศการสนับสนุนอย่างเป็นทางการสำหรับ Server Actions ใน Next.js SDK ของเรา แม้ว่ามันจะเป็นฟีเจอร์ที่อยู่ในขั้นทดลองก็ตาม

สำหรับภาพรวมอย่างรวดเร็ว ลองดู ตัวอย่างนี้ และติดตามไปพร้อมกับคำแนะนำในการผสานรวม Logto กับ Server Actions ในคำแนะนำนี้

สิ่งที่จำเป็นต้องมี#

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

• อินสแตนซ์ Logto ที่กำลังรันอยู่หรือเข้าถึงบัญชี Logto Cloud ได้
• โปรเจกต์ Next.js ที่เปิดใช้งานฟีเจอร์ Server Actions

ตั้งค่า Logto#

ถ้าคุณโฮสต์ 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.js ถ้าคุณยังไม่มี สามารถทำตาม คู่มือการติดตั้งอย่างเป็นทางการ เพื่อสร้างตัวใหม่

ขณะที่เขียนคำแนะนำนี้ ฟีเจอร์นี้ยังอยู่ในขั้นทดสอบและต้องเปิดใช้งานใน next.config.js

กำหนดไลบรารี Logto#

เริ่มต้นด้วยการติดตั้งโมดูล @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:

กระบวนการลงชื่อออกคล้ายกับกระบวนการลงชื่อเข้า

เตรียมเพจ callback#

ในฐานะผู้ให้บริการระบุตัวตนแบบ 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 และสัมผัสประสบการณ์ง่ายๆ นี้ดูล่ะ?