การตรวจสอบสิทธิ์ Laravel Sanctum สำหรับแอป React โดยใช้ Breeze

ขั้นตอนในการรวมการรับรองความถูกต้องของ Laravel Sanctum เข้ากับแอป React โดยใช้โครง Breeze API

Laravel Breeze เป็นโครงการรับรองความถูกต้องสำหรับเว็บและ API Breeze ขับเคลื่อนโดยระบบ Laravel Sanctum สำหรับการตรวจสอบสิทธิ์ โดยค่าเริ่มต้นจะมีการป้องกัน CSRF, การตรวจสอบสิทธิ์เซสชัน ดังนั้นเราจึงไม่จำเป็นต้องกังวลเกี่ยวกับการโจมตี XSS

ในบทความนี้ เราจะดูวิธีใช้ Breeze API scaffolding ในการตรวจสอบสิทธิ์ React Applications มาบูรณาการกันเถอะ

การตั้งค่าแบ็กเอนด์ Laravel

สร้างแอปพลิเคชัน Laravel และติดตั้งนั่งร้าน Laravel Breeze API โดยใช้คำสั่งด้านล่าง:

# Create a laravel application
composer create-project laravel/laravel react-backend
cd react-backend
# Install Breeze
composer require laravel/breeze
php artisan breeze:install api

หลังจากรันคำสั่งข้างต้นแล้ว ให้อัปเดต FRONTEND_URLใน env เป็น localhost:3000 และให้บริการแอปพลิเคชันโดยใช้คำสั่ง Laravel Sail หรือ php artisan serve

หากต้องการทดสอบแอป ให้กด localhost:8000 ในเบราว์เซอร์ คุณจะได้รับเวอร์ชันของแอปตามด้านล่างนี้:

{
  "Laravel": "8.77.1"
}

ตอนนี้แอปแบ็กเอนด์ Laravel พร้อมที่จะจัดการคำขอจากแอป React แล้ว ต่อไปมาตั้งค่าแอปโต้ตอบกัน

ตอบสนองการตั้งค่าแอป

เราจะใช้ Create React App เพื่อตั้งค่าแอป React โดยใช้คำสั่งด้านล่าง:

npx create-react-app breeze-react
cd breeze-react
yarn start

กำหนดค่า Axios

ในการจัดการ API เราจะใช้ Axios เพิ่มไคลเอนต์ Axios ทั่วโลกดังต่อไปนี้:

ตั้งค่า withCredentials จริง เพื่อเปิดใช้งานการเข้าถึงคุกกี้ข้ามไซต์ REACT_APP_BACKEND_URL คือ localhost:8000 ในไฟล์ .env ซึ่งเป็นแอปแบ็กเอนด์ Laravel ที่สร้างขึ้นก่อนหน้านี้

คำขอ CSRF

Laravel Breeze ใช้ Sanctum ในการตรวจสอบสิทธิ์ ดังนั้นเพื่อตรวจสอบความถูกต้องของ SPA เราจำเป็นต้องส่งคำขอแรกไปยังปลายทาง /sanctum/csrf-cookie เราจำเป็นต้องส่งคำขอนี้ในเส้นทางที่ไม่ได้รับการรับรองความถูกต้องทั้งหมด เช่น เข้าสู่ระบบ ลงทะเบียน ลืมรหัสผ่าน

สร้าง hook แบบกำหนดเองในไฟล์ hooks/auth.js และเพิ่มโค้ดด้านล่างเพื่อจัดการคำขอ csrf:

ผสานรวม API การเข้าสู่ระบบ

เพิ่มฟังก์ชันการเข้าสู่ระบบด้านล่างในฮุก useAuth:

เมื่อมีการร้องขอ API เข้าสู่ระบบ ก่อนอื่นจะต้องขอ CSRF API และเมื่อสำเร็จ จะมีการร้องขอ API เข้าสู่ระบบ ในทำนองเดียวกัน เราสามารถใช้ register, ลืมรหัสผ่าน, รีเซ็ตรหัสผ่าน API ได้ ตอนนี้เราได้รวมแอป React เข้ากับโครงนั่งร้าน API ของ Laravel Breeze แล้ว

ปฏิกิริยา Laravel Breeze

Laravel Breeze React คือการใช้งานต้นแบบการรับรองความถูกต้อง Breeze สำหรับ React ซึ่งมีอยู่ใน GitHub ได้รับการกำหนดค่าล่วงหน้าด้วย API การตรวจสอบสิทธิ์ เส้นทาง และ UI พื้นฐานทั้งหมดโดยใช้ TailwindCSS และ CRA

คุณสมบัติ

สร้างการเข้าสู่ระบบล่วงหน้า ลงทะเบียน ลืมรหัสผ่าน รีเซ็ตรหัสผ่าน และ UI แดชบอร์ดโดยใช้ CSS Tailwind
สร้างด้วย สร้างแอป React 5
React Router 6 สำหรับการกำหนดเส้นทาง
SWR สำหรับการตรวจสอบข้อมูลผู้ใช้อีกครั้ง
ESLint

คู่มือเริ่มต้นใช้งานฉบับย่อ

โคลน laravel-breeze-react ติดตั้งการพึ่งพาโดยใช้ yarn install, จากนั้น คัดลอกไฟล์ .env.example ไปที่ .env และเพิ่ม URL ของแบ็กเอนด์ของคุณดังต่อไปนี้

REACT_APP_BACKEND_URL=http://localhost:8000

เรียกใช้ yarn start ตอนนี้คุณจะเห็นหน้าจอด้านล่างในเบราว์เซอร์:

laravel-breeze-react ทำให้คุณมุ่งความสนใจไปที่ตรรกะทางธุรกิจเท่านั้น เนื่องจากจะดูแลเลเยอร์การรับรองความถูกต้อง

ทรัพยากร

เอกสาร Laravel Breeze

พื้นที่เก็บข้อมูล Laravel Breeze React

เอกสารศักดิ์สิทธิ์

บทสรุป

Laravel Breeze ทำให้การตรวจสอบความถูกต้องของ SPA เป็นเรื่องง่ายและปลอดภัย และ Laravel Breeze React ทำให้การผสานรวมระหว่างแอป Laravel Breeze Backend กับแอป React ได้อย่างรวดเร็ว

ขอบคุณสำหรับการอ่าน.

เนื้อหาเพิ่มเติมได้ที่ PlainEnglish.io ลงทะเบียนเพื่อรับ จดหมายข่าวรายสัปดาห์ฟรี ของเรา ติดตามเราบน Twitter และ LinkedIn เข้าร่วม ความไม่ลงรอยกันของชุมชน ของเรา