I'm always excited to take on new projects and collaborate with innovative minds.

Phone

+20 115 052 9992

Website

https://ibrahimahmed.online/

Social Links

دليلك الشامل لفهم واستخدام التوكنز (JSON Web Tokens - JWT) ببساطة

دليلك الشامل لفهم واستخدام التوكنز (JSON Web Tokens - JWT) ببساطة لو أنت شغال في مجال تطوير الويب (Web Development)، أكيد واجهت اللحظة دي: عملت صفحة Login، وبعد

دليلك الشامل لفهم واستخدام التوكنز (JSON Web Tokens - JWT) ببساطة
Reading Count: 9

دليلك الشامل لفهم واستخدام التوكنز (JSON Web Tokens - JWT) ببساطة

لو أنت شغال في مجال تطوير الويب (Web Development)، أكيد واجهت اللحظة دي: عملت صفحة Login، وبعدين دخلت على صفحة تانية، فجأة الموقع "نسي" أنت مين! مشكلة الحفاظ على حالة المستخدم (Authentication) هي واحدة من أكتر الحاجات اللي بتوتر المبرمجين في بداياتهم، خصوصاً لما نبدأ نتعامل مع تطبيقات الموبايل أو الـ APIs المنفصلة عن الـ Frontend. هنا بيجي دور الـ JWT كبطل خارق بيحل لنا المشكلة دي بدون تعقيدات الـ Sessions التقليدية.

يعني إيه أصلاً JWT؟

اختصار لـ JSON Web Token، وهي ببساطة طريقة آمنة لنقل المعلومات بين طرفين (الـ Client والـ Server) في شكل كائن JSON (JSON Object). الميزة العظيمة هنا إنها مش بتحتاج الـ Server يخزن أي داتا في الذاكرة (Stateless)، وده بيخلي النظام بتاعك خفيف وسهل جداً في التعامل مع تطبيقات الـ Microservices.

إزاي الـ JWT بيشتغل؟ (آلية العمل)

تخيل الـ JWT زي "بطاقة تعريف" بيديها الـ Server للمستخدم بمجرد ما يعمل Login صح. البطاقة دي مش أي ورقة وخلاص، دي ورقة "مختومة" بختم مشفر (Signature) مستحيل يتزور.

  • الترويسة (Header): بتقول إيه نوع الخوارزمية اللي مستخدمة في التشفير.
  • البيانات (Payload): وده الجزء اللي بنحط فيه بيانات المستخدم زي الـ User ID، الصلاحيات (Roles)، وتاريخ انتهاء الصلاحية.
  • التوقيع (Signature): ده "الختم" اللي بيضمن إن البيانات دي محدش لعب فيها.

خطوات التنفيذ التقنية

عشان نستخدم الـ JWT بشكل سليم، بنمشي على الخطوات دي:

  1. المستخدم بيبعت بياناته (Username & Password) للـ Backend.
  2. الـ Backend بيتأكد من صحة البيانات، وبيعمل "توقيع" للتوكن باستخدام مفتاح سري (Secret Key).
  3. الـ Backend بيبعت التوكن للـ Client، والـ Client بيخزنه غالباً في الـ (LocalStorage) أو الـ (HttpOnly Cookie).
  4. في كل طلب (Request) جاي بعد كده، الـ Client بيبعت التوكن ده في الـ Header بتاع الـ Request (غالباً في مكان اسمه Authorization).
  5. الـ Backend بيستقبل التوكن، بيشيل الختم، بيتأكد إن التوكن مش مزور، وبيعرف هوية المستخدم فوراً!

مثال عملي باستخدام Node.js و JWT

عشان تنشئ توكن في الـ Backend بتاعك، غالباً هتستخدم مكتبة jsonwebtoken. بص على الكود البسيط ده:


const jwt = require('jsonwebtoken');

// عشان نعمل توكن
const token = jwt.sign({ userId: 123 }, 'your-secret-key', { expiresIn: '1h' });

console.log(token);

وعشان نتأكد من صحة التوكن اللي جاي من الـ Client:


const decoded = jwt.verify(token, 'your-secret-key');
console.log(decoded.userId); // هيطبع 123 لو التوكن سليم

نصيحة من أخ لمبرمج زميل

بص يا بطل، الـ JWT أداة قوية جداً بس سلاح ذو حدين. أهم نصيحة أقدمهالك: اوعى تحط بيانات حساسة (Sensitive Data) في الـ Payload زي الباسورد، لأن أي حد يقدر يفك تشفير الـ Payload ويشوف اللي جواه بسهولة (لأنه Base64 مش تشفير حقيقي)، التوقيع هو اللي بيحمي من التزوير مش التشفير. كمان خلي بالك من الـ Secret Key بتاعك، ده مفتاح القلعة، ابعده خالص عن كود الـ Frontend أو الـ GitHub.

اتعلم إزاي تعمل (Token Refreshing) عشان تحسن أمان تطبيقك، وابدأ طبق ده في مشاريعك الجاية، وشوف الفرق في أداء النظام بتاعك. بالتوفيق في رحلتك البرمجية!


Share

Related posts

May 17, 2026 • 1 min read
Reading Count: 5
أهم أدوات اختبار واجهات برمجة التطبيقات: رحلة من Postman لـ Insomnia

أهم أدوات اختبار واجهات برمجة التطبيقات: رحلة من Postman لـ Insomnia أكيد مريت بالموقف ده: خلصت الـ...

May 17, 2026 • 1 min read
Reading Count: 8
إزاي تحمي الـ API بتاعك من الهجمات وتطبق تقنية تحديد الطلبات (Rate Limiting)

إزاي تحمي الـ API بتاعك من الهجمات وتطبق تقنية تحديد الطلبات (Rate Limiting) تخيل معايا إنك تعبت في...

May 16, 2026 • 1 min read
Reading Count: 8
إزاي تبني REST API نظيف واحترافي: دليلك الكامل للتطوير

إزاي تبني REST API نظيف واحترافي: دليلك الكامل للتطوير أكيد مريت بالموقف ده: بتبدأ مشروع جديد، وبتكت...