แสดงวิธีการรักษาความปลอดภัยให้กับเว็บแอปและฟังก์ชันไร้เซิร์ฟเวอร์ของ Netlify ด้วยการยืนยันตัวตน Logto พร้อมด้วยตัวอย่างโค้ดต้นฉบับและการดูตัวอย่างเดโมสด
Netlify เป็นแพลตฟอร์มที่ทรงพลังสำหรับการปรับใช้และโฮสต์โครงการเว็บสมัยใหม่ โดยมีการผสานอินทิเกรต Git แบบไร้รอยต่อ การสร้างอัตโนมัติ และฟังก์ชันไร้เซิร์ฟเวอร์สำหรับกระบวนการพัฒนาทำงานรวดเร็วและขยายได้
ในคู่มือที่ครอบคลุมนี้ คุณจะได้เรียนรู้วิธีการ:
ลองดู การดูตัวอย่างเดโมออนไลน์.
สิ่งเหล่านี้คือสิ่งที่คุณต้องตั้งค่าก่อนเริ่มต้นบทเรียนนี้:
ทำตาม คู่มือนำทางเบื้องต้นของ Vite เพื่อสร้างแอป React
ตามคู่มือการสร้างและเลือกเทคโนโลยีที่คุณต้องการ ในบทความนี้ เราจะเลือก React + TypeScript
จากนั้น เข้าสู่ไดเร็กทอรีหลักของโครงการ ติดตั้งแพ็กเกจที่ต้องการตามคู่มือ และรันแอปพลิเคชัน
ทำตาม คู่มือเริ่มต้นกับ Netlify เพื่อปรับใช้แอปพลิเคชันของคุณ
เมื่อคุณได้ปรับใช้แอปแล้ว คุณสามารถดูเว็บไซต์สดที่ https://<your-site-name>.netlify.app.
จดบันทึก URL นี้เพราะเราจะต้องใช้ในการตั้งค่า Logto ในภายหลัง
ในการเริ่มต้นด้วยการยืนยันตัวตน Logto:
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 ในรากโครงการของคุณ:
ตอนนี้ การจัดเส้นทางของเราควรทำงานได้อย่างถูกต้อง
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:
ตอนนี้เราได้มี API เบื้องหลังแล้ว เราจำเป็นต้องทำให้แน่ใจว่าเฉพาะผู้ใช้ที่ยืนยันตัวตนแล้วเท่านั้นที่จะสามารถเข้าถึงได้ เราจะปกป้องฟังก์ชัน Netlify ของเราด้วยกลไกการยืนยันตัวตนของ Logto
เพื่อปกป้อง API ปลายทางของเรา:
https://api.backend.com)ตอนนี้ มาดำเนินการตรวจสอบความถูกต้องของโทเค็นในฝั่งหลังเพื่อให้แน่ใจว่าเฉพาะคำขอที่มีโทเค็นการเข้าถึงที่ถูกต้องที่จะถูกประมวลผล
ก่อนอื่น เราจำเป็นต้องติดตั้ง Dependency jose เพื่อช่วยเราตรวจสอบโทเค็น JWT:
จากนั้น เราสามารถดำเนินการตรวจสอบความถูกต้องของโทเค็นในฝั่งหลังของเรา:
ตอนนี้ มาปรับปรุงฟังก์ชันของ Netlify ของเราเพื่อใช้ฟังก์ชัน verifyLogtoToken:
เท่านี้แหละ! ตอนนี้ ฟังก์ชัน Netlify ของเราได้รับการปกป้องด้วย Logto และเฉพาะคำขอที่มีโทเค็นการเข้าถึงที่ถูกต้องที่จะถูกประมวลผล
ตอนนี้ ปรับใช้แอปของคุณไปยัง Netlify และทดสอบ! คุณสามารถอ้างอิงจากตัวอย่างเดโมออนไลน์ ที่นี่.
https://<your-site-name>.netlify.appapi/helloคู่มือนี้แสดงวิธีการผสานการยืนยันตัวตน Logto เข้าไปในเว็บแอปพลิเคชันที่ปรับใช้บน Netlify
โดยการกำหนดค่าแอปพลิเคชันและทรัพยากร API ของ Logto เราดำเนินการยืนยันตัวตนในฝั่งหน้าและปกป้องปลายทางฟังก์ชันของ Netlify
สำหรับการควบคุมการเข้าถึงในเชิงลึกมากขึ้น คุณสามารถใช้ประโยชน์จากความสามารถ RBAC (Role-Based Access Control) ของ Logto โดยการกำหนดบทบาทและสิทธิ์ใน Logto Console และการตรวจสอบบทบาทของผู้ใช้ภายในฟังก์ชัน Netlify.