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
• كيفية إعداد خادم التفويض على Express
• كيفية حماية المسارات باستخدام middleware

أساسيات OAuth 2.0: التدفقات والأدوار

يحدد OAuth 2.0 أربعة أدوار: Resource Owner (المستخدم)، Client (التطبيق)، Authorization Server (الخادم الذي يصدر الرموز)، وResource Server (الخادم الذي يوفر البيانات). التدفق الأكثر شيوعًا هو Authorization Code Grant، الذي يُستخدم في تطبيقات الويب.

في هذه المقالة، سنركز على تنفيذ Resource Server وAuthorization Server باستخدام JWT، بدلاً من المزودين الخارجيين (Google, GitHub). سيمنحك هذا تحكمًا كاملاً في العملية.

تثبيت التبعيات

للبدء، قم بإنشاء مشروع Node.js جديد وقم بتثبيت الحزم اللازمة:

npm init -ynpm install express jsonwebtoken bcrypt dotenv cors

وصف الحزم:

• express — إطار عمل لإنشاء الخادم
• jsonwebtoken — إنشاء والتحقق من JWT
• bcrypt — تجزئة كلمات المرور
• dotenv — العمل مع متغيرات البيئة
• cors — إعداد CORS لواجهة برمجة التطبيقات

تنفيذ تفويض JWT في Node.js

JWT هو رمز مضغوط يتكون من ثلاثة أجزاء: الرأس، والحمولة (payload)، والتوقيع. سنستخدمه لمصادقة المستخدمين بعد تسجيل الدخول بنجاح.

إعداد الخادم ونموذج المستخدم

قم بإنشاء ملف server.js وحدد الهيكل الأساسي:

require('dotenv').config();const express = require('express');const jwt = require('jsonwebtoken');const bcrypt = require('bcrypt');const cors = require('cors');

const app = express();app.use(express.json());app.use(cors());

const PORT = process.env.PORT || 3000;const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key';

// تخزين مؤقت للمستخدمين (في الإنتاج استخدم قاعدة بيانات)const users = [];

التسجيل وتجزئة كلمات المرور

عند التسجيل، يجب تجزئة كلمة المرور باستخدام bcrypt:

app.post('/api/register', async (req, res) => {    try {        const { email, password } = req.body;                // التحقق من وجود المستخدم        const existingUser = users.find(u => u.email === email);        if (existingUser) {            return res.status(400).json({ message: 'المستخدم موجود بالفعل' });        }

        // تجزئة كلمة المرور        const hashedPassword = await bcrypt.hash(password, 10);        const newUser = { id: users.length + 1, email, password: hashedPassword };        users.push(newUser);

        res.status(201).json({ message: 'تم إنشاء المستخدم' });    } catch (error) {        res.status(500).json({ message: 'خطأ في الخادم' });    }});

تسجيل الدخول وإنشاء رمز JWT

بعد التحقق من بيانات الاعتماد، نقوم بإنشاء رمز باستخدام jsonwebtoken:

app.post('/api/login', async (req, res) => {    try {        const { email, password } = req.body;                // البحث عن المستخدم        const user = users.find(u => u.email === email);        if (!user) {