كيفية وضع حد لإدخال كلمة السر والبريد في للبرنامج؟

السلام عليكم ,
يمكنك تنفيذ المطلوب بأكثر من طريقة ,
على سبيل المثال اذا كنت تستعمل قاعدة بيانات mySql فيمكنك اما عمل جدول مخصص لعدد محاولات الuser الفاشلة و الربط بينة و بين جدول الuser عبر الid و في كل مرة يحاول فيها المستخدم التسجيل يتم فحص عدد المحاولات أولا .

هناك طريقة أخرى و على سبيل المثال إذا كنت تستعمل mongoDb 
فيمكنك اضافة في الschema الخاصة بالuser عدد المحاولات الفاشلة و في حالة ان عدد المحاولات تجاوز ال5 يتم أيضا اضافة تاريخ فك الحظر الذي تريدة .
و عند تسجيل الدخول يتم التأكد أولا , اذا كان تاريخ فك الحظر لم يأتي بعد ف يتم ارسال خطأ 

مثال :
 

const express = require('express');
const mongoose = require('mongoose');
const bcrypt = require('bcrypt');
const rateLimit = require('express-rate-limit');

const app = express();
const PORT = 3000;

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/yourDatabase', { useNewUrlParser: true, useUnifiedTopology: true });

// Define User Schema
const userSchema = new mongoose.Schema({
  username: String,
  password: String,
  loginAttempts: { type: Number, default: 0 },
  lockUntil: { type: Number, default: 0 },
});

const User = mongoose.model('User', userSchema);

// Rate Limit Middleware
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // limit each IP to 5 requests per windowMs
  message: 'Too many login attempts. Try again later.',
});

app.use('/login', limiter);

// Login Endpoint
app.post('/login', async (req, res) => {
  const { username, password } = req.body;

  // Check if the account is locked
  const user = await User.findOne({ username });
  if (user && user.lockUntil > Date.now()) {
    return res.status(429).send('Account is locked. Try again later.');
  }

  // Check the password
  const passwordMatch = await bcrypt.compare(password, user.password);

  if (passwordMatch) {
    // Reset login attempts upon successful login
    await User.findOneAndUpdate({ username }, { loginAttempts: 0, lockUntil: 0 });
    res.send('Login successful!');
  } else {
    // Increase login attempts and lock the account if necessary
    await User.findOneAndUpdate({ username }, { $inc: { loginAttempts: 1 }, $set: { lockUntil: getLockExpirationTime() } });
    res.status(401).send('Invalid username or password.');
  }
});

// Helper function to calculate lock expiration time
function getLockExpirationTime() {
  return Date.now() + 15 * 60 * 1000; // Lock for 15 minutes
}

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

________
بالنسبة للfrontend و react فالتعامل معه في هذة الحالة هو نفس التعامل مع api بشكل عادي 

مرحباً,

لحماية التطبيق الخاص بك وتنفيذ حد لمحاولات إدخال كلمة المرور الخاطئة، يمكنك اتباع الخطوات التالية في العمل على الجانب الخلفي والأمامي:

 الجانب الخلفي (Back-end)

• إنشاء قاعدة بيانات لتخزين معلومات المستخدمين، بما في ذلك الاسم وكلمة المرور وعدد المرات التي تم فيها إدخال كلمة المرور الخاطئة.
• عندما يقوم المستخدم بإدخال كلمة مرور خاطئة، قم بزيادة عدد المحاولات الفاشلة في قاعدة البيانات.
• قم بفحص عدد المحاولات الفاشلة للمستخدم بعد كل محاولة، وإذا وصلت إلى الحد المحدد (مثل ٥ مرات)، فقم بتحديث حالة المستخدم إلى "محظور" واحفظ وقت الحظر في قاعدة البيانات (مثل تاريخ ووقت الحظر).
• عندما يحاول المستخدم المحظور الوصول إلى الموقع، قم بفحص وقت الحظر المخزن وقارنه بالوقت الحالي. إذا انتهت فترة الحظر، قم بإزالة حالة المستخدم "المحظور" وأعد عدد المحاولات الفاشلة إلى الصفر.

الجانب الأمامي (Front-end)

•    عند إدخال كلمة المرور في واجهة المستخدم، قم بإرسالها إلى الخادم باستخدام طلب HTTP.
•    استخدم استجابة الخادم لفحص ما إذا كانت كلمة المرور صحيحة أم لا.
•    إذا كانت كلمة المرور خاطئة، فقم بعرض رسالة خطأ للمستخدم وتحديث عدد المحاولات الفاشلة التي تمت.
•     عندما يتم حظر المستخدم، قم بعرض رسالة له يبلغه فيها عن حظره ومتى سينتهي الحظر.

مثال عملي : بفرض لدينا تطبيق Express و React  , فسوف نقوم بالتالي :

من الجانب الخلفي Express :

// Import required modules and set up database connection

// Route to handle login requests
app.post('/login', async (req, res) => {
  const { username, password } = req.body;

  try {
    // Fetch user from the database based on the username
    const user = await User.findOne({ username });

    if (!user) {
      return res.status(404).json({ message: 'Invalid username or password' });
    }

    // Check if password matches
    const passwordMatches = await user.comparePassword(password);

    if (!passwordMatches) {
      // Increase the failed login attempts for the user
      user.failedAttempts += 1;
      await user.save();

      if (user.failedAttempts >= 5) {
        // Set the user status to "blocked" and save the block time
        user.status = 'blocked';
        user.blockedUntil = Date.now() + (2 * 60 * 60 * 1000); // Block for 2 hours
        await user.save();

        return res.status(401).json({ message: 'Your account has been blocked. Please try again after 2 hours.' });
      }

      return res.status(401).json({ message: 'Invalid username or password' });
    }

    // Reset the failed login attempts and save the user
    user.failedAttempts = 0;
    await user.save();

    // Generate and return the authentication token
    const token = generateAuthToken(user);
    res.json({ token });
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Internal server error' });
  }
});

من الجانب الأمامي React :

import React, { useState } from 'react';

const LoginForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

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

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

      if (response.ok) {
        const { token } = await response.json();
        // Store the token in local storage or state for future requests
      } else {
        const { message } = await response.json();
        setError(message);
      }
    } catch (error) {
      console.error(error);
      setError('An error occurred. Please try again later.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">Login</button>
      {error && <p>{error}</p>}
    </form>
  );
};

export default LoginForm;

لاحظ أنه من الجانب الخلفي قمنا بحظر المستخدم لمدة ساعتين عندما قام بالمحاول 5 مرات بإدخال كلمة المرور .
وأيضاً نقوم بإرجاع رسالة الخطأ من الجانب الخلفي , ومن الجانب الأمامي نقوم فقط بعرضها .

بالإضافة إلى تنفيذ حد لمحاولات إدخال كلمة المرور، هناك بعض النصائح الأمنية الأخرى التي يجب مراعاتها:

• تخزين كلمات المرور بشكل آمن باستخدام تقنيات التجزئة (hashing) و (salting) لمنع الوصول إلى الكلمات المرور الأصلية.
• استخدم HTTPS لتأمين اتصالاتك وتشفير بيانات المستخدم الحساسة أثناء النقل.
• قم بتنفيذ إجراءات الحماية من هجمات Cross-Site Scripting (XSS) وCross-Site Request Forgery (CSRF) وInjection وغيرها من هجمات الأمان الشائعة.
• تحقق من صحاستخدم مكتبة حماية الهوية والوصول الموثوق بها في إطار العمل الخاص بك، مثل Passport.js، لإدارة عملية المصادقة والتحقق من صحة كلمات المرور وإدارة الحظر والحماية الأخرى.