โซลูชันการยืนยันตัวตนแบบฟูลสแต็กด้วย Logto บน Netlify: ปกป้องเว็บแอปและฟังก์ชันไร้เซิร์ฟเวอร์

Netlify เป็นแพลตฟอร์มที่ทรงพลังสำหรับการปรับใช้และโฮสต์โครงการเว็บสมัยใหม่ โดยมีการผสานอินทิเกรต Git แบบไร้รอยต่อ การสร้างอัตโนมัติ และฟังก์ชันไร้เซิร์ฟเวอร์สำหรับกระบวนการพัฒนาทำงานรวดเร็วและขยายได้

ในคู่มือที่ครอบคลุมนี้ คุณจะได้เรียนรู้วิธีการ:

• ใช้การยืนยันตัวตนใน Single-Page Application (SPA) โดยใช้ Logto บน Netlify ซึ่งแสดงตัวอย่างด้วย Vite + React
• รักษาความปลอดภัยฟังก์ชันไร้เซิร์ฟเวอร์ของ Netlify ด้วยการยืนยันตัวตนของ Logto
• ปรับใช้แอปพลิเคชันพร้อมใช้งานการผลิตโดยใช้การอ้างอิงการใช้งานของเรา: example-vite-react-logto

ลองดู การดูตัวอย่างเดโมออนไลน์.

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

สิ่งเหล่านี้คือสิ่งที่คุณต้องตั้งค่าก่อนเริ่มต้นบทเรียนนี้:

• บัญชี Netlify
• บัญชี Logto Cloud หรือ Logto instance แบบติดตั้งเอง

สร้างแอป React ด้วย Vite#

ทำตาม คู่มือนำทางเบื้องต้นของ Vite เพื่อสร้างแอป React

ตามคู่มือการสร้างและเลือกเทคโนโลยีที่คุณต้องการ ในบทความนี้ เราจะเลือก React + TypeScript

จากนั้น เข้าสู่ไดเร็กทอรีหลักของโครงการ ติดตั้งแพ็กเกจที่ต้องการตามคู่มือ และรันแอปพลิเคชัน

ปรับใช้แอปโดยใช้ Netlify#

ทำตาม คู่มือเริ่มต้นกับ Netlify เพื่อปรับใช้แอปพลิเคชันของคุณ

เมื่อคุณได้ปรับใช้แอปแล้ว คุณสามารถดูเว็บไซต์สดที่ https://<your-site-name>.netlify.app.

จดบันทึก URL นี้เพราะเราจะต้องใช้ในการตั้งค่า Logto ในภายหลัง

รวม Logto เข้ากับแอปของคุณ#

ในการเริ่มต้นด้วยการยืนยันตัวตน Logto:

1. ไปที่หน้า "Applications" ใน Logto Console
2. สร้างแอปพลิเคชันใหม่
   • เลือกเฟรมเวิร์กสำหรับฝั่งหน้าเว็บของคุณ (React ในตัวอย่างของเรา)
   • หมายเหตุ: คุณสามารถสร้างแอปพลิเคชันแบบหน้าเดียว (SPA) หรือแอปพลิเคชันแบบเนทีฟได้ตามต้องการ
3. ทำตามคำแนะนำการรวมที่มีให้ใน
   • คู่มือภายในของ Logto Console หรือ
   • คู่มือนำทางสำหรับการผสานการยืนยันตัวตนกับ React
4. จากหน้ารายละเอียดของแอปพลิเคชัน ให้จดโน้ตของ:
   • Application ID ของคุณ
   • จุดสิ้นสุดของ Logto (สามารถพบได้ใน "Endpoints & Credentials" ส่วนนี้ โดยทั่วไปในรูปแบบ https://<your-instance>.logto.app/) ข้อมูลนี้จะต้องใช้ในขั้นตอนต่อไป

โปรดทราบว่าในเดโมของเรา เราใช้เส้นทาง /callback เพื่อจัดการกับการเปลี่ยนเส้นทางการลงชื่อเข้าใช้ของ Logto และ URI การเปลี่ยนเส้นทางใน Logto จะต้องตั้งค่าเป็น https://<your-site-name>.netlify.app/callback. หลังจากที่ผู้ใช้ลงชื่อออกแล้ว เราจะกลับไปที่หน้าหลัก ดังนั้นเราจึงตั้งค่า URI การเปลี่ยนเส้นทางการลงชื่อออกหลังเป็น https://<your-site-name>.netlify.app.

จากนั้นตั้งค่าข้อมูลของแอปพลิเคชัน Logto ที่เราสร้างขึ้นในตัวแปรสภาพแวดล้อมของ Netlify (เว็บไซต์ของคุณ -> การตั้งค่าเว็บไซต์ -> ตัวแปรสภาพแวดล้อม):

จากนั้นเราใช้การตั้งค่าคอนฟิกเหล่านี้ในโครงการฝั่งหน้าของเรา:

คุณสามารถดูโค้ดที่ผสานรวมเสร็จสิ้นที่นี่: example-vite-react-logto.

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

เมื่อคุณเข้าชมเส้นทางเช่น /callback Netlify จะพยายามค้นหาไฟล์ที่เกี่ยวข้องบนเซิร์ฟเวอร์แทนที่จะส่งต่อคำร้องขอไปยังแอปพลิเคชัน React ของคุณ

ณ จุดนี้ เราจำเป็นต้องสร้างไฟล์ _redirects ในไดเรกทอรีสาธารณะของโครงการ Netlify ของคุณ เพื่อบอกให้ Netlify เปลี่ยนเส้นทางคำขอทั้งหมดไปที่ index.html ของคุณ:

อีกทางเลือกหนึ่ง คุณสามารถสร้างไฟล์ netlify.toml ในรากโครงการของคุณ:

ตอนนี้ การจัดเส้นทางของเราควรทำงานได้อย่างถูกต้อง

สร้าง API เบื้องหลังด้วยฟังก์ชันของ Netlify#

Netlify Functions มอบวิธีที่ง่ายแต่ทรงพลังในการสร้าง API เบื้องหลัง ด้วย Netlify Functions เราสามารถเขียนโลจิกฝั่งเซิร์ฟเวอร์โดยไม่ต้องกังวลเกี่ยวกับการตั้งค่าเซิร์ฟเวอร์แบบดั้งเดิมและการบำรุงรักษา

ฟังก์ชันเหล่านี้จะถูกควบคุมเวอร์ชัน สร้าง และปรับใช้พร้อมกับเว็บไซต์ของคุณ ทำให้กระบวนการพัฒนาและปรับใช้เป็นไปอย่างราบรื่นระหว่างฝั่งหน้าและฝั่งหลัง

เริ่มต้นสร้าง API เบื้องหลังของเราด้วยฟังก์ชันของ Netlify กัน

ก่อนอื่น เราต้องสร้างไดเรกทอรีชื่อฟังก์ชันภายใต้ไดเรกทอรี netlify ของโครงการ จากนั้นสร้างไฟล์ hello.ts:

เมื่อเราเยี่ยมชม https://<your-site-name>.netlify.app/.netlify/functions/hello ฟังก์ชันนี้จะถูกเรียกและช่วยคืนค่า "Hello world!"".

หากคุณคิดว่าเส้นทางนี้ดูแปลก ๆ คุณสามารถตั้งค่าเส้นทางใหม่เพื่อเรียกใช้ฟังก์ชันโดยเพิ่มกฎการเปลี่ยนเส้นทางในไฟล์ public/_redirects:

ด้วยวิธีนี้ เมื่อเราเยี่ยมชม https://<your-site-name>.netlify.app/api/hello จะทำการเรียกฟังก์ชันของเราและคืนค่า "Hello world!" นี่คือวิธีทั่วไปในการสร้าง API โดยใช้ฟังก์ชันของ Netlify

และเราสามารถเข้าถึง API นี้ในโครงการฝั่งหน้าของเราด้วยการร้องขอ fetch:

รักษาความปลอดภัยฟังก์ชัน Netlify ของคุณด้วย Logto#

ตอนนี้เราได้มี API เบื้องหลังแล้ว เราจำเป็นต้องทำให้แน่ใจว่าเฉพาะผู้ใช้ที่ยืนยันตัวตนแล้วเท่านั้นที่จะสามารถเข้าถึงได้ เราจะปกป้องฟังก์ชัน Netlify ของเราด้วยกลไกการยืนยันตัวตนของ Logto

เพื่อปกป้อง API ปลายทางของเรา:

1. สร้างทรัพยากร API ใน Logto Console เพื่อเป็นตัวแทนของ API เบื้องหลังของเรา:

• ไปที่ "API Resources" ใน Logto Console และสร้าง API ใหม่
• ตั้งค่าชื่อและตัวระบุ API (เช่น https://api.backend.com)
• จดบันทึกตัวระบุ API ในหน้ารายละเอียดทรัพยากร API เพราะเราจะต้องใช้ในภายหลัง

2. ตั้งค่าแอปพลิเคชันของคุณให้ใช้ทรัพยากร API นี้โดยเพิ่มตัวระบุตัวนี้ในตัวแปรสภาพแวดล้อมของ Netlify ของคุณ:

3. อัปเดตการตั้งค่าคอนฟิก Logto ของคุณเพื่อรวมทรัพยากร API นี้:

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

ตอนนี้ มาดำเนินการตรวจสอบความถูกต้องของโทเค็นในฝั่งหลังเพื่อให้แน่ใจว่าเฉพาะคำขอที่มีโทเค็นการเข้าถึงที่ถูกต้องที่จะถูกประมวลผล

ก่อนอื่น เราจำเป็นต้องติดตั้ง Dependency jose เพื่อช่วยเราตรวจสอบโทเค็น JWT:

จากนั้น เราสามารถดำเนินการตรวจสอบความถูกต้องของโทเค็นในฝั่งหลังของเรา:

ตอนนี้ มาปรับปรุงฟังก์ชันของ Netlify ของเราเพื่อใช้ฟังก์ชัน verifyLogtoToken:

เท่านี้แหละ! ตอนนี้ ฟังก์ชัน Netlify ของเราได้รับการปกป้องด้วย Logto และเฉพาะคำขอที่มีโทเค็นการเข้าถึงที่ถูกต้องที่จะถูกประมวลผล

ทดสอบเดโมของเรา#

ตอนนี้ ปรับใช้แอปของคุณไปยัง Netlify และทดสอบ! คุณสามารถอ้างอิงจากตัวอย่างเดโมออนไลน์ ที่นี่.

1. เยี่ยมชมเว็บไซต์สดที่ https://<your-site-name>.netlify.app
2. คลิกที่ปุ่ม "Sign in" ในบาร์นา
3. ลงชื่อเข้าใช้ด้วยบัญชีผู้ใช้ Logto และคุณจะเห็นว่าคุณได้ลงชื่อเข้าใช้แล้ว
4. คลิกที่แท็บ "Protected Resource" ในบาร์การนำทาง และคุณจะถูกเปลี่ยนเส้นทางไปยังหน้าที่ถูกปกป้อง
5. คลิกที่ปุ่ม "View Protected Resource" และคุณจะเห็นข้อมูลการตอบกลับจากปลายทาง api/hello
6. คลิกที่ปุ่ม "Sign out" ในบาร์นา และคุณจะถูกเปลี่ยนเส้นทางไปยังหน้าแรก

ข้อสรุป#

คู่มือนี้แสดงวิธีการผสานการยืนยันตัวตน Logto เข้าไปในเว็บแอปพลิเคชันที่ปรับใช้บน Netlify

โดยการกำหนดค่าแอปพลิเคชันและทรัพยากร API ของ Logto เราดำเนินการยืนยันตัวตนในฝั่งหน้าและปกป้องปลายทางฟังก์ชันของ Netlify

สำหรับการควบคุมการเข้าถึงในเชิงลึกมากขึ้น คุณสามารถใช้ประโยชน์จากความสามารถ RBAC (Role-Based Access Control) ของ Logto โดยการกำหนดบทบาทและสิทธิ์ใน Logto Console และการตรวจสอบบทบาทของผู้ใช้ภายในฟังก์ชัน Netlify.