العودة للمقالات

مصادقة حديثة باستخدام React ووظائف بلا خادم

Majd Muhtaseb31‏/08‏/20257 دقيقة

مقدمة

قد يكون بناء المصادقة من البداية مهمة شاقة. توفر هذه المقالة نهجًا مبسطًا لتنفيذ مصادقة آمنة في تطبيق React الخاص بك باستخدام وظائف بلا خادم. سنركز على المفاهيم الأساسية ونقدم مقتطفات من التعليمات البرمجية لتبدأ بسرعة.

اختيار مزود بلا خادم

يقدم العديد من المزودين إمكانات الوظائف بلا خادم. تتضمن الأمثلة:

• Netlify Functions
• AWS Lambda
• Firebase Cloud Functions
• Vercel Functions

في هذا المثال، لنفترض أننا نستخدم Netlify Functions للتبسيط. تترجم المفاهيم جيدًا إلى مزودين آخرين.

إعداد الوظيفة بلا خادم (مثال - Node.js)

قم بإنشاء ملف netlify/functions/authenticate.js:

// netlify/functions/authenticate.js
exports.handler = async (event, context) => {
  // قم بمحاكاة مصادقة المستخدم (استبدل بالمنطق الحقيقي)
  const { username, password } = JSON.parse(event.body);

  if (username === 'testuser' && password === 'password123') {
    return {
      statusCode: 200,
      body: JSON.stringify({
        message: 'تمت المصادقة بنجاح',
        token: 'fake-jwt-token', // في الواقع، قم بإنشاء JWT حقيقي
      }),
    };
  } else {
    return {
      statusCode: 401,
      body: JSON.stringify({ message: 'بيانات اعتماد غير صالحة' }),
    };
  }
};

تذكر تثبيت التبعيات المطلوبة إذا كانت موجودة.

تطبيق React Frontend

قم بإنشاء مكون React بسيط:

// src/components/Login.js
import React, { useState } from 'react';

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [token, setToken] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      const response = await fetch('/.netlify/functions/authenticate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ username, password }),
      });

      const data = await response.json();

      if (response.ok) {
        setToken(data.token);
        setError('');
      } else {
        setError(data.message);
        setToken('');
      }
    } catch (err) {
      setError('حدث خطأ أثناء المصادقة.');
      setToken('');
      console.error(err);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="username">اسم المستخدم:</label>
          <input
            type="text"
            id="username"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="password">كلمة المرور:</label>
          <input
            type="password"
            id="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <button type="submit">تسجيل الدخول</button>
      </form>

      {error && <p style={{ color: 'red' }}>{error}</p>}
      {token && <p>رمز المصادقة: {token}</p>}
    </div>
  );
}

export default Login;

تأمين المسارات (مثال)

بعد المصادقة الناجحة، قم بتخزين الرمز المميز (على سبيل المثال، في localStorage أو ملف تعريف الارتباط). استخدم هذا الرمز المميز لحماية المسارات في تطبيقك. مثال بسيط يتضمن التحقق من وجود هذا الرمز المميز لتحديد عرض المكونات.

خاتمة

توفر هذه المقالة إطارًا أساسيًا للمصادقة الحديثة باستخدام React ووظائف بلا خادم. تذكر استبدال منطق المصادقة الوهمي بحل قوي يعالج تسجيل المستخدم وإدارة كلمات المرور وإنشاء/التحقق من صحة الرموز الآمنة. تعد الوظائف بلا خادم أداة قوية لبناء أنظمة مصادقة قابلة للتطوير وآمنة.