OAuth 2.0 وتفويض JWT في TypeScript: دليل كامل للمبتدئين

مقدمة في OAuth 2.0 و JWT في TypeScript

في تطوير الويب الحديث، يعتبر التفويض الآمن للمستخدمين أساس أي تطبيق. المعياران الأكثر شيوعًا - OAuth 2.0 و JWT (JSON Web Token) - يسمحان بتنفيذ نظام موثوق للمصادقة وتحديد صلاحيات الوصول. في هذه المقالة، سنشرح كيفية دمج هذه التقنيات في TypeScript لإنشاء API آمن من الصفر.

هذه المقالة مخصصة للمطورين المبتدئين الذين هم على دراية بأساسيات TypeScript ويريدون فهم كيفية عمل التفويض عمليًا. لن نتعمق في النظريات المعقدة، بل سنركز على أمثلة كود محددة.

ما هو OAuth 2.0؟

OAuth 2.0 هو بروتوكول تفويض يسمح للتطبيقات الخارجية بالحصول على وصول محدود إلى موارد المستخدم دون نقل كلمة المرور الخاصة به. تخيل أنك تريد تسجيل الدخول إلى موقع عبر Google: أنت لا تعطي الموقع كلمة مرور Google الخاصة بك، بل تسمح له فقط بالحصول على بريدك الإلكتروني واسمك. هذا هو OAuth 2.0.

ما هو JWT؟

JWT (JSON Web Token) هو تنسيق مضغوط ومكتفي ذاتيًا للتوكن يحتوي على جميع المعلومات الضرورية عن المستخدم بشكل مشفر. يتكون التوكن من ثلاثة أجزاء: الرأس (header)، والحمولة (payload)، والتوقيع (signature). بفضل التوقيع، يمكن للخادم التأكد من أن التوكن لم يتم التلاعب به.

1. إعداد المشروع وتثبيت التبعيات

لنبدأ بإنشاء مشروع جديد في TypeScript. افتح الطرفية (terminal) ونفذ الأوامر التالية:

mkdir oauth-jwt-ts\ncd oauth-jwt-ts\nnpm init -y\nnpm install express jsonwebtoken bcrypt dotenv cors\nnpm install -D typescript ts-node @types/express @types/jsonwebtoken @types/bcrypt @types/cors @types/node nodemon

أنشئ ملف tsconfig.json بالإعدادات الأساسية:

{\n  "compilerOptions": {\n    "target": "ES2020",\n    "module": "commonjs",\n    "outDir": "./dist",\n    "rootDir": "./src",\n    "strict": true,\n    "esModuleInterop": true,\n    "skipLibCheck": true,\n    "forceConsistentCasingInFileNames": true\n  },\n  "include": ["src/**/*"],\n  "exclude": ["node_modules"]\n}

سيكون هيكل المجلدات كالتالي:

\n
• src/ — الكود المصدري
\n
• src/controllers/ — المتحكمات (controllers)
\n
• src/middleware/ — الوسائط (middleware) للتحقق من التوكنات
\n
• src/models/ — نماذج البيانات
\n
• src/routes/ — المسارات (routes)
\n
• .env — متغيرات البيئة
\n

2. تنفيذ المصادقة الأساسية باستخدام JWT

لنبدأ بإنشاء آلية بسيطة للتسجيل وتسجيل الدخول باستخدام JWT. لننشئ ملف src/config.ts لتخزين الثوابت:

import dotenv from 'dotenv';\ndotenv.config();\n\nexport const config = {\n  jwtSecret: process.env.JWT_SECRET || 'your-secret-key',\n  jwtExpiresIn: process.env.JWT_EXPIRES_IN || '15m',\n  refreshTokenExpiresIn: process.env.REFRESH_TOKEN_EXPIRES_IN || '7d',\n  port: process.env.PORT || 3000\n};

الآن لننشئ middleware للتحقق من JWT token. ملف src/middleware/auth.middleware.ts:

import { Request, Response, NextFunction } from 'express';\nimport jwt from 'jsonwebtoken';\nimport { config } from '../config';\n\nexport interface AuthRequest extends Request {\n  user?: { userId: string; email: string };\n}\n\nexport const authenticateToken = (req: AuthRequest, res: Response, next: NextFunction) => {\n  const authHeader = req.headers['authorization'];\n  const token = authHeader && authHeader.split(' ')[1]; // Bearer TOKEN\n\n  if (!token) {\n    return res.status(401).json({ message: 'التوكن غير مقدم' });\n  }\n\n  try {\n    const decoded = jwt.verify(token, config.jwtSecret) as { userId: string; email: string };\n    req.user = decoded;\n    next