كيف اضع bearer token في Authorization في js fetch api
جالس اتعلم استخدم laravel sanctum للتحقق و لكن اريد ان احصل bearer token الخاص بالمستخدم لارسال البيانات.
هل اعمل fetch api يأخذ bearer token الخاص بالمستخدم الذي يكون مخزن في session او هناك طريقة اخرى احصل عليه و اضعه في authorization header ؟
انا اريد استخدامه ليس في postman بل في موقع الكتروني عادي بستخدام fetch لان اذا استخدم auth:snctum يظهر لي unauthnticated لان bearer token ليس موجود في header كيف اجيب bearer token و اضعه header?
ما تحتاجه هو SPA Authentication أي مصادقة تطبيقات الويب أحادية الصفحة، لأنها الأنسب للمواقع التي تعمل على نفس النطاق domain، أي ستسخدم الكوكيز والجلسات.
والخطأ لديك بسبب إرسال الطلب بدون كوكيز الجلسة، فالمتصفح بطبيعته لا يرسل الكوكيز مع طلبات fetch أو axios إلا إن أخبرته بذلك صراحةً، لذلك، لارافل لا يعرف من أنت، فيعتبرك زائراً غير مسجل الدخول.
أي تضمين التالي:
credentials: "include"
ليصبح الكود في قسم <head> في ملف الـ Blade كالتالي:
async function checkName(bodyForm) {
try {
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
const response = await fetch("/api/addCompany", {
method: "POST",
credentials: "include",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRF-Token': csrfToken,
},
body: bodyForm
});
const namesJson = await response.json();
console.log(namesJson);
} catch(error) {
console.log(error.message);
}
}
وفي ملف .env:
SESSION_DOMAIN=localhost SANCTUM_STATEFUL_DOMAINS=localhost:8000 # أو الدومين الذي تعمل عليه SESSION_DRIVER=cookie
وفي ملف ملف config/cors.php:
'paths' => ['api/*', 'sanctum/csrf-cookie', 'login', 'logout'], 'allowed_methods' => ['*'], 'allowed_origins' => ['http://localhost:8000'], // ضع الدومين الخاص بك هنا (بدون slash في النهاية) 'allowed_headers' => ['*'], 'exposed_headers' => [], 'max_age' => 0, 'supports_credentials' => true,
وقبل أن تقوم بعمل POST لأي مسار محمي مثل addCompany، يجب أن تطلب كوكيز الـ CSRF من Sanctum لتخزينه في المتصفح.
وبالنسبة لمكان حفظ التوكن، فلارافل يقوم بإنشاء كوكي مشفر يسمى laravel_session ويخزنه في متصفح المستخدم كـ HttpOnly Cookie لا يمكن الوصول إليه عبر الجافاسكريبت للحماية من هجمات XSS.
أما Bearer Token فلا تحفظه أبداً في localStorage لأنه عرضة للاختراق بسهولة عبر هجمات XSS، قم بإعادة الـ Token من الـ API وجعل الـ Frontend يخزنه في HttpOnly Cookie، أو استخدام آلية لارافل لـ API Tokens.
التعليقات