مرحباً,
لحماية التطبيق الخاص بك وتنفيذ حد لمحاولات إدخال كلمة المرور الخاطئة، يمكنك اتباع الخطوات التالية في العمل على الجانب الخلفي والأمامي:
الجانب الخلفي (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، لإدارة عملية المصادقة والتحقق من صحة كلمات المرور وإدارة الحظر والحماية الأخرى.