برای کسانی که با لاراول آشنا نیستند، این یک فریمورک وب PHP یکپارچه بسیار محبوب است که شبیه به سایرین مانند Ruby on Rails است. این به دلیل سهولت استفاده، توسعه سریع و لذت‌بخش‌تر کردن توسعه PHP شناخته شده است!
Sanctum یک بسته رسمی لاراول است که برای ارائه یک سیستم احراز هویت پر وزن برای SPAها و APIهای ساده طراحی شده است. Sanctum ساده ترین راه برای افزودن احراز هویت به برنامه لاراول است.
Sanctum یک رویکرد توکن API را ارائه می‌کند که برای احراز هویت APIها و برنامه‌های تلفن همراه طراحی شده است، که تنظیم آن نسبتاً آسان است. از سوی دیگر، روش احراز هویت SPA مبتنی بر کوکی می تواند برای پیکربندی کاملاً گیج کننده باشد. که مایه تاسف است زیرا این روشی است که اکثر مردم از آن استفاده خواهند کرد.
بنابراین در اینجا قصد دارم به شما نشان دهم که چگونه احراز هویت Sanctum SPA را در Laravel 11.x پیکربندی کنید و آن را با Postman آزمایش کنید. من همچنین یک پیکربندی Axios را برای احراز هویت آسان از SPA شما نیز اضافه می کنم!
توجه داشته باشید: روش احراز هویت SPA فقط در صورتی کار می کند که درخواست از یک دامنه باشد، اما می تواند از زیر دامنه های مختلف باشد. مثلا website.com می تواند احراز هویت شود api.website.com.
با مستندات Sanctum در اینجا همراه باشید.
نصب و پیکربندی Sanctum
لاراول به‌طور پیش‌فرض احراز هویت را شامل نمی‌شود، اما دستورات Artisan را برای نصب و داربست Sanctum ارائه می‌کند. چند فایلی را که به آن نیاز دارید، مانند مهاجرت پایگاه داده و فایل پیکربندی مخصوص Sanctum تولید می کند.
php artisan install:api
پیکربندی دامنه های شخص اول شما
در شما .env فایلی که می خواهید دامنه ای را اضافه کنید که از آن درخواست ها را می پذیرید. این برای تأیید استفاده خواهد شد Referer هدر، و اگر پیدا نشد Origin سرتیتر.
SANCTUM_STATEFUL_DOMAINS=website.com
- or -
SANCTUM_STATEFUL_DOMAINS=spa.website.com
Sanctum Middleware
داخل bootstrap/app.php شما می خواهید میان افزار API stateful را به کل برنامه اضافه کنید، این کار را می توان با موارد زیر انجام داد. بدون این میان افزار، هیچ مسیری توسط auth:sanctum میان افزار شکست خواهد خورد.
->withMiddleware(function (Middleware $middleware) {
//
$middleware->statefulApi();
})
CORS و کوکی ها
تقریباً برای هر برنامه‌ای که می‌خواهید CORS را فعال کنید، Sanctum به آن نیاز دارد که به درستی کار کند. با موارد زیر می توانید به راحتی پیکربندی آن را داربست کنید:
php artisan config:publish cors
این باعث ایجاد config/cors.php فایل. در این فایل شما به سادگی نیاز به تنظیم supports_credentials به true. این کار از مسدود شدن کوکی ها توسط CORS جلوگیری می کند.
در نهایت برای این بخش باید آن را ویرایش کنید SESSION_DOMAIN در شما .env فایل. شما می خواهید آن را به دامنه SPA خود تغییر دهید یا می توانید آن را با یک پیشوند قرار دهید . تا همه زیر دامنه ها را بپذیرد.
مثلا .website.com به هر زیر دامنه ای اجازه می دهد.
ورود به سیستم در
بنابراین اکنون ما همه چیز را برای تأیید توکن ها در اختیار داریم، اما باید مسیر ورود به سیستم را ایجاد کنیم که ایمیل و رمز عبور ما را تأیید کند و آن را با جلسه ما مرتبط کند.
شما به راحتی می توانید موارد زیر را به خود اضافه کنید routes/web.php
use Illuminate\Support\Facades\Auth;
Route::post('/login', function () {
$credentials = $request->validate([
'email' => ['required', 'email'],
'password' => ['required'],
]);
if (Auth::attempt($credentials)) {
$request->session()->regenerate();
return Response([
'message' => 'Successful login!'
], 200);
}
return Response([
'message' => 'Mismatch email and password!'
], 401);
});
شما همچنین می توانید از مثال ارائه شده توسط لاراول پیروی کنید، اما مانند بالا JSON را برنمی گرداند، بلکه یک پاسخ تغییر مسیر می دهد.
پیکربندی مجموعه پستچی
قبل از اینکه Postman را پیکربندی کنیم، می‌خواهم به طور خلاصه در مورد عملیات مورد نیاز برای ورود به سیستم صحبت کنم.
First Sanctum به ما نیاز دارد که به آن ضربه بزنیم /sanctum/csrf-cookie نقطه پایانی با a GET درخواست. این یک درخواست 204 را برمی گرداند به این معنی که موفقیت آمیز بود اما محتوایی ندارد، فقط حاوی کوکی های جلسه ما است.
سپس ما می توانیم یک POST درخواست به تازه ایجاد شده ما /login مسیر با یک email و password در بدنه برای احراز هویت و مرتبط کردن کاربر احراز هویت شده با جلسه مطابق با توکن صادر شده در مرحله قبلی ما.
اکنون ما کاملاً احراز هویت شده‌ایم و می‌توانیم با عبور از کوکی به همراه هدر از هر مسیر محافظت‌شده sanctum استفاده کنیم. X-XSRF-TOKEN حاوی مقدار تجزیه شده کوکی در درخواست است. این را می توان با ارسال یک درخواست به تست کرد /api/user مسیری که به طور پیش فرض درج شده است.
نگران نباشید Postman و Axios می توانند به راحتی کوکی ها و هدرها را برای ما مدیریت کنند!
مجموعه پستچی
می‌توانید این مجموعه Laravel 11.x Sanctum SPA را برای ادامه دانلود کنید.
کلید مجموعه پستچی در اسکریپت پیش درخواست مجموعه ما نهفته است:
const jar = pm.cookies.jar();
jar.get("http://localhost:5174", "XSRF-TOKEN", (err, cookie) => {
pm.request.addHeader({
key: "X-XSRF-TOKEN",
value: cookie
});
pm.request.addHeader({
key: "Origin",
value: "http://localhost:5174"
});
pm.request.addHeader({
key: "Referer",
value: "http://localhost:5174"
});
});
این اسکریپت قبل از هر درخواست اجرا می‌شود و کوکی‌های پیدا شده برای منبع داده شده را تجزیه می‌کند و آنها را به آن اضافه می‌کند X-XSRF-TOKEN سرتیتر. همچنین هر دو را تنظیم می کند Referer و Origin سرصفحه ای که حرم به آن نیاز دارد.
ممکن است متوجه شوید که من آن را تنظیم کرده ام Referer و Origin سربرگ به localhost:5174 این فقط به این دلیل است که یک پورت رایج برای برنامه های SPA ساخته شده با Vite است!
توجه: اگر این کار در هر نقطه‌ای انجام نشد، احتمالاً به این دلیل است که پستچی از شما می‌خواهد به کوکی‌هایی که متعلق به مبدا هستند دسترسی داشته باشید. با روند زیر می توانید این کار را انجام دهید:
پیکربندی Axios
Axios یک سرویس گیرنده HTTP مبتنی بر وعده برای جاوا اسکریپت است که به شما یک روش بسیار آسان برای کار با درخواست های HTTP می دهد. در مورد ما، نقاط پیکربندی را ارائه می دهد که کار با Sanctum را بسیار آسان می کند.
import axios from 'axios';
let axiosInstance = axios.create({
baseURL: 'http://localhost',
timeout: 1000,
headers: {
Accept: 'application/json'
},
withCredentials: true,
withXSRFToken: true,
xsrfCookieName: "XSRF-TOKEN",
xsrfHeaderName: "X-XSRF-TOKEN",
});
export default axiosInstance;
با بررسی پیکربندی بالا، اگر با Axios آشنایی داشته باشید، می بینید که پیکربندی Axios بسیار ساده است به جز 4 پیکربندی:
- با اعتبار
- با توکن XSRF
- xsrfCookieName
- xsrfHeaderName
اجازه دهید ابتدا بحث کنیم withCredentials. این گزینه به Axios می‌گوید کوکی‌های یافت شده در مرورگر را که مبدا را دسته‌بندی می‌کنند به درخواست پیوست کند.
بعدی است withXSRFToken. این گزینه به Axios می گوید که هدر XSRF را فقط برای درخواست هایی با همان مبدا تنظیم کند.
سرانجام xsrfCookieName و xsrfHeaderName به Axios بگویید کدام کوکی را برای هدر تجزیه کند و نام سرصفحه را ضمیمه کند. هر دو گزینه به طور پیش فرض مقادیر داده شده در پیکربندی بالا را که Sanctum انتظار دارد، تعیین می کنند.
اکنون هر درخواستی که با این نمونه Axios انجام شود با احراز هویت Laravel Sanctum SPA سازگار خواهد بود!
