ما هو التوكن وكيفية استخدامه في المواقع

يا صديقي… عامل إيه؟
شد قهوتك كده وتعال نخش في موضوع مهم جدًا لأي حد بيشتغل Front-end أو Back-end…
موضوع لو مش فاهمه كويس، هتلاقي نفسك دايمًا واقف عند “ليه الدنيا مش شغّالة؟”

الـ Token… يعني إيه؟ بيتخزن إزاي؟ ليه مهم؟ وإزاي تحمي نفسك من الاختراق؟
كل ده بأسلوب بسيط وواضح وباللهجة اللي بتحبها

يلا بينا نبدأ

ليه بكتب عن مواضيع متقدمة زي الـ Token؟ ​

قبل ما ندخل في التفاصيل، خليني أقولك ليه أصلًا بشرحلك topics من النوع التقيل ده…
لإني زيك بالظبط، في وقت من الأوقات كنت بدوّر على أي حد يشرح المفاهيم دي بصراحة ومن غير تعقيد…
ومكنتش بلاقي إلا نادر جدًا.

فعشان كده…
أنا هنا عشان أسهّلك الطريق وأقربلك المفاهيم بدل ما تلف وتدوّر شهور في يوتيوب وجوجل

وطريقة الاستفادة بسيطة جدًا:

1. اقرأ البوست
2. خده نقط في نوتة
3. ابحث عن نفس العنوان على يوتيوب
4. طبّق بإيدك
5. ساعتها تكون فعلاً استفدت

---

يعني إيه Token؟ ​

بمنتهى البساطة…
الـ Token عبارة عن سلسلة مشفرة من الحروف والأرقام، بيجيلك من الـ Back-end بعد تسجيل الدخول.

إنت كمستخدم لما تشوف الـ Token مش هتفهم منه حاجة…
لأنه متشفر
بس تقدر تفك تشفيره وتعرف هو جوا إيه.

لو عايز تشوف مثال حي:
خش على موقع JSON Web Token
وهتلاقيه بيعرضلك Token وفيه بيانات مكتوبة…
وتقدر تشفر وتفك التشفير كمان.

---

طيب الـ Token بيحتوي على إيه بالظبط؟ ​

عادة البيانات اللي بتكون جوانه:

• اسم المستخدم
• الصورة الشخصية / الأفاتار
• صلاحياته Roles
• ID
• الإيميل
• بيانات تانية على حسب نظام الموقع.

وده اللي بيخلي الـ Token مهم جدًا…
لأنه ببساطة هو البصمة اللي السيستم بيستخدمها عشان يحدد انت مين.

---

إزاي تستخدم الـ Token كـ Front-end؟ ​

استخدامك للتوكن بيكون في حالتين أساسيين جدًا:

1. تخزين الـ Token لحفظ جلسة المستخدم ​

أشهر مكان بيتخزن فيه:
✔ Cookie (الأكتر أمانًا)
✔ Local Storage (أسرع ولكن أقل أمانًا)

وطول ما الـ Token متخزن…
يبقى إنت كموقع عارف المستخدم ده مين وصلاحياته إيه.

زمان كانوا بيستخدموا الـ Session​

الـ Session كانت بتتخزن في المتصفح وهي اللي بتحدد هو مين.
بس مشكلتها إنها مش مناسبة للموبايلات.
بينما الـ Token تقدر تستخدمه في Web + Mobile بسهولة

---

2. فك تشفير الـ Token (Decoding) ​

ودي بتعملها بمكتبة بسيطة جدًا:

import jwtDecode from "jwt-decode";

const user = jwtDecode(token);
console.log(user);

وده بيسمحلك تعمل حاجات مهمة جدًا زي:

• تظهر اسم المستخدم في الـ Header
• تشيل زرار تسجيل الدخول لو هو مسجل أصلاً
• تعرض الأفاتار بتاعه
• تعمل نظام صلاحيات كامل (Roles)
• hide/show عناصر معينة على حسب الـ Role
• تعمل Routing مختلف لكل نوع مستخدم
• تمنع تعديل وحذف للمستخدم اللي مالوش صلاحية

كل ده من خلال Token واحد بس!

---

طيب بالنسبة للهاكرز؟ هل لو سرق التوكن يقدر يخش؟ ​

السؤال ده مهم جدًا وخطير جدًا!

أيوه…
لو حد سرق Access Token للأسف يقدر يدخل حسابك.
عشان كده ظهر النظام الأقوى…

---

Access Token vs Refresh Token ​

Access Token​

ده اللي انت عارفه…
اللي شرحته فوق.
مدته قصيرة ومهمته الأساسية:
تأكيد هوية المستخدم.

Refresh Token​

ده بقى الهدف منه إنه:

• يشتغل لمدة أطول
• يجدد الـ Access Token
• يخليك ما تعملش login كل شوية

يعني:
المستخدم يدخل مرة واحدة →
بعدها السيستم كل ربع ساعة يجدد التوكن لوحده
من غير ما يطردك أو يطلب منك تسجيل دخول.

وده بيخلّي تجربة المستخدم أحسن
وبيخلي السيستم أكثر أمانًا بكتير

---

مثال عملي كامل بلغة JavaScript ​

استلام التوكن من الـ Back-end:​

const login = async () => {
  const res = await fetch("/api/login", {
    method: "POST",
    body: JSON.stringify({ email, password })
  });

  const data = await res.json();
  document.cookie = `accessToken=${data.token}; path=/;`;
};

فك تشفير الـ Token:​

const token = getCookie("accessToken");
const user = jwtDecode(token);

console.log(user.name);
console.log(user.role);

تجديد التوكن (Refresh):​

const refreshToken = async () => {
  const res = await fetch("/api/refresh");
  const newToken = await res.json();
  document.cookie = `accessToken=${newToken}; path=/;`;
};

---

فين الأمان هنا؟ ​

عشان تحمي الـ Token:

• خزّنه في HTTP-Only Cookie
• استخدم HTTPS فقط
• خلي مدة الـ Access Token قصيرة
• اعتمد على Refresh Token
• اعمل Expiration واضح
• matتحطش بيانات حساسة جواه

الخلاصة ​

لو انت Front-end أو Back-end وعايز تشتغل صح…
لازم تفهم يعني إيه Token وازاي تتعامل معاه.
لأنه أساس تسجيل الدخول، الصلاحيات، الجلسات، والـ Routing كله.

Access Token
مسؤول عن تحديد هوية المستخدم.

Refresh Token
مسؤول عن تجديد الجلسة من غير ما تطلب من العميل يعمل Login كل شويّة.

وبالموضوع ده… انت بتفتح باب الاحتراف في أي شغل Web أو Mobile