تُستخدم المصادقة عبر JSON Web Token (JWT) على نطاق واسع لتأمين واجهات برمجة التطبيقات والتأكد من أن المستخدمين المصرح لهم فقط هم من يمكنهم الوصول إلى بيانات معينة. في هذا المنشور، سنوضح لك كيفية تكوين JWT على الواجهة الخلفية باستخدام Node.js وعلى الواجهة الأمامية باستخدام ReactJS باستخدام TypeScript، بدءًا من إنشاء الرمز المميز وحتى الإدارة الآمنة لجلسة المستخدم.

تكوين الواجهة الخلفية باستخدام Node.js

أولاً، لنقم بإنشاء واجهة برمجة تطبيقات باستخدام Node.js وExpress وTypeScript التي تنشئ رموز JWT وتتحقق من صحتها.

الخطوة 1: تكوين البيئة

إنشاء مشروع جديد وتثبيت التبعيات الرئيسية:

npm init -y
npm install express jsonwebtoken bcryptjs dotenv
npm install -D typescript @types/node @types/express @types/jsonwebtoken @types/bcryptjs ts-node

قم بإنشاء ملف tsconfig.json لتكوين TypeScript:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

الخطوة 2: هيكلة الواجهة الخلفية

قم بإنشاء بنية بسيطة، بدءًا من ملف server.ts ومجلد المسارات لتنظيم مسارات المصادقة.

server.ts

import express, { Application } from 'express';
import dotenv from 'dotenv';
import authRoutes from './routes/authRoutes';

dotenv.config();

const app: Application = express();
app.use(express.json());

app.use('/api/auth', authRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Servidor rodando na porta ${PORT}`));

الطرق/authRoutes.ts

إنشاء ملف لمسارات المصادقة. هنا سيكون لدينا مسار تسجيل دخول من شأنه التحقق من صحة المستخدم وإرجاع رمز JWT.

import express, { Request, Response } from 'express';
import jwt from 'jsonwebtoken';
import bcrypt from 'bcryptjs';

const router = express.Router();

// Simulação de banco de dados
const users = [{ username: 'usuario', password: 'senha123' }];

router.post('/login', async (req: Request, res: Response) => {
    const { username, password } = req.body;
    const user = users.find(u => u.username === username);

    if (!user || !(await bcrypt.compare(password, user.password))) {
        return res.status(401).json({ message: 'Credenciais inválidas' });
    }

    const token = jwt.sign({ username }, process.env.JWT_SECRET as string, { expiresIn: '1h' });
    res.json({ token });
});

export default router;

الخطوة 3: تأمين المسارات باستخدام البرامج الوسيطة

إضافة برامج وسيطة لحماية المسارات التي تتطلب المصادقة.

الوسيطة/authMiddleware.ts

import { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';

interface JwtPayload {
    username: string;
}

export const authMiddleware = (req: Request, res: Response, next: NextFunction): void => {
    const token = req.headers['authorization'];
    if (!token) {
        res.status(403).json({ message: 'Token não fornecido' });
        return;
    }

    jwt.verify(token, process.env.JWT_SECRET as string, (err, decoded) => {
        if (err) {
            res.status(401).json({ message: 'Token inválido' });
            return;
        }
        req.user = decoded as JwtPayload;
        next();
    });
};

تكوين الواجهة الأمامية باستخدام ReactJS

على الواجهة الأمامية، سنستخدم React للتعامل مع المصادقة وإرسال بيانات الاعتماد وتخزين رمز JWT.

الخطوة 1: تكوين واجهة تسجيل الدخول

أولاً، قم بإنشاء مكون Login.tsx لالتقاط بيانات اعتماد المستخدم وإرسال طلب تسجيل الدخول إلى الواجهة الخلفية.

تسجيل الدخول.tsx

import React, { useState } from 'react';
import axios from 'axios';

const Login: React.FC = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');

    const handleLogin = async (e: React.FormEvent) => {
        e.preventDefault();
        try {
            const response = await axios.post('/api/auth/login', { username, password });
            localStorage.setItem('token', response.data.token);
            window.location.href = '/dashboard';
        } catch (err) {
            setError('Credenciais inválidas');
        }
    };

    return (
        

             setUsername(e.target.value)}
            />
             setPassword(e.target.value)}
            />
            Login
            {error && 
{error}
}
        
    );
};

export default Login;

الخطوة 2: حماية المسارات في الواجهة الأمامية

قم بإنشاء وظيفة للمسارات المحمية، باستخدام رمز JWT للوصول إلى واجهة برمجة التطبيقات.

PrivateRoute.tsx

import React from 'react';
import { Route, Redirect, RouteProps } from 'react-router-dom';

interface PrivateRouteProps extends RouteProps {
    component: React.ComponentType;
}

const PrivateRoute: React.FC = ({ component: Component, ...rest }) => (
    
            localStorage.getItem('token') ? (
                
            ) : (
                
            )
        }
    />
);

export default PrivateRoute;

الخطوة 3: أرسل رمز JWT في الطلبات

قم بتكوين axios لتضمين رمز JWT المميز تلقائيًا في الطلبات المحمية.

axiosConfig.ts

import axios from 'axios';

const token = localStorage.getItem('token');
if (token) {
    axios.defaults.headers.common['Authorization'] = token;
}

export default axios;

الخطوة 4: مثال للاستخدام مع طريق محمي

الآن، قم بإنشاء مثال لصفحة محمية تتطلب الرمز المميز للوصول إليها.

Dashboard.tsx

import React, { useEffect, useState } from 'react';
import axios from './axiosConfig';

const Dashboard: React.FC = () => {
    const [data, setData] = useState('');

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('/api/protected');
                setData(response.data.message);
            } catch (error) {
                console.error(error);
            }
        };
        fetchData();
    }, []);

    return 
{data || 'Carregando...'}
;
};

export default Dashboard;

خاتمة

من خلال هذه الخطوات، قمنا بإعداد مصادقة JWT كاملة في TypeScript لمشروع يستخدم Node.js على الواجهة الخلفية وReact على الواجهة الأمامية. هذا النهج آمن للغاية وفعال ومعتمد على نطاق واسع لحماية التطبيقات الحديثة.