OAuth 2.0 وتفويض JWT في JavaScript: دليل شامل

OAuth 2.0 وتفويض JWT في JavaScript: عمليًا

نادرًا ما تخلو تطبيقات الويب الحديثة من نظام للمصادقة والتفويض. المعياران الأكثر شيوعًا — OAuth 2.0 و JWT (JSON Web Tokens) — يُستخدمان معًا غالبًا لإنشاء حلول آمنة وقابلة للتوسع. في هذه المقالة، سنشرح كيفية تنفيذ تفويض OAuth 2.0 و JWT في JavaScript (Node.js) مع أمثلة عملية على الكود.

ستكون المادة مفيدة لكل من المطورين المبتدئين وذوي الخبرة الذين يرغبون في فهم أعمق لآليات عمل الرموز والوصول المفوض.

ما هما OAuth 2.0 و JWT؟

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

JWT (JSON Web Token) هو تنسيق مضغوط للرمز (token) يحتوي على بيانات مشفرة (payload) وتوقيع. يُستخدم JWT لنقل المعلومات بين الأطراف (العميل والخادم) والتحقق من صحتها.

في الاقتران، يعمل OAuth 2.0 كبروتوكول لإصدار الرموز، بينما JWT هو تنسيق رموز الوصول نفسها.

إعداد الخادم وتثبيت التبعيات

لنبدأ بإنشاء خادم بسيط على Express.js وتثبيت الحزم اللازمة:

npm init -y\nnpm install express jsonwebtoken dotenv cors axios\nnpm install --save-dev nodemon

هيكل المشروع:

\n
• server.js — ملف الخادم الرئيسي
\n
• .env — متغيرات البيئة
\n
• middleware/auth.js — الوسيطة (middleware) للتحقق من JWT
\n
• routes/auth.js — مسارات المصادقة
\n

تنفيذ تفويض JWT

لنبدأ بإنشاء والتحقق من رموز JWT الأساسية. لننشئ server.js:

const express = require('express');\nconst jwt = require('jsonwebtoken');\nrequire('dotenv').config();\n\nconst app = express();\napp.use(express.json());\n\nconst SECRET_KEY = process.env.JWT_SECRET || 'my_secret_key';\n\n// إنشاء الرمز\nfunction generateToken(user) {\n  const payload = {\n    id: user.id,\n    email: user.email,\n    role: user.role\n  };\n  return jwt.sign(payload, SECRET_KEY, { expiresIn: '1h' });\n}\n\n// مثال على مسار تسجيل الدخول\napp.post('/login', (req, res) => {\n  const { email, password } = req.body;\n  // هنا يجب أن يكون هناك تحقق في قاعدة البيانات\n  const user = { id: 1, email, role: 'user' };\n  const token = generateToken(user);\n  res.json({ token });\n});\n\n// الوسيطة للتحقق من الرمز\nfunction authenticateToken(req, res, next) {\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({ error: 'الرمز غير مقدم' });\n  }\n\n  jwt.verify(token, SECRET_KEY, (err, user) => {\n    if (err) {\n      return res.status(403).json({ error: 'رمز غير صالح' });\n    }\n    req.user = user;\n    next();\n  });\n}\n\n// مسار محمي\napp.get('/profile', authenticateToken, (req, res) => {\n  res.json({ message: 'تم منح الوصول', user: req.user });\n});\n\napp.listen(3000, () => console.log('الخادم يعمل على المنفذ 3000'));

دمج OAuth 2.0 عبر Google

الآن سنضيف OAuth 2.0 باستخدام Google كمزود. لننشئ routes/auth.js:

const express = require('express');\nconst axios = require('axios');\nconst jwt = require('jsonwebtoken');\nconst router = express.Router();\n\nconst GOOGLE_CLIENT_ID = process.env.GOOGLE_CLIENT_ID;\nconst GOOGLE_CLIENT_SECRET = process.env.GOOGLE_CLIENT_SECRET;\nconst REDIRECT_URI = 'http://localhost:3000/auth/google/callback';\nconst JWT_SECRET = process.env.JWT_SECRET;\n\n// مسار البدا