السلام عليكم ورحمة الله وبركاته.
الإخوة الكرام تحية طيبة للجميع.
هل سمعتم عن أدوات تقوم بتوليد كلمات مرور عشوائية قوية يصعب تخمينها؟
بجميع الأحوال, سواء إن كنت سمعت عن مثل هكذا أدوات أم لا فسنكتب سويًا أداتنا الخاصة لهذا الغرض مستخدمين في ذلك html و javascript.
ملحوظات
سأقوم بوضع الكود مع شرح مقتضب عن وظيفة كل سطر. وهنا يجب عليك معرفة أن شرح الأكواد سيتم عن طريق وضع تعليق أسفل كل كود , والتعليقات لا تؤثر على سير الكود, لذا فلو أردت نسخ الكود مع تعليقاته فستعمل الأداة دون مشاكل بإذن الله.
<div dir="rtl">
<!-- ضبط اتجاه الكلام بحيث يكون من اليمين إلى اليسار باستخدام الحاوي div الذي يعطينا حيزًا وهميًا لوضع المحتوى والتحكم به كاملًا -->
<font size=18>
<!-- تحديد حجم الخط -->
<h1> <strong> مولد كلمات المرور </strong> </h1>
<!-- عنوان الأداة -->
<table border=0>
<!-- ترتيب الأزرار والعناصر بشكل عام في شاشة الأداة باستخدام طريقة الجدول الوهمي -->
<tr id="options" width=100%>
<!-- الصف الذي تظهر فيه مربعات الاختيار لتحديد ما يتم تضمينه في كلمة المرور -->
<td width="25%">
<label for="opt1">تضمين الحروف الكبيرة </label>
<input type="checkbox" id="opt1" checked onclick="generate_disable()">
</td>
<td width="25%">
<label for="opt2">تضمين الحروف الصغيرة </label>
<input type="checkbox" id="opt2" checked onclick="generate_disable()">
</td>
<td width="25%">
<label for="opt3">تضمين الأرقام </label>
<input type="checkbox" id="opt3" checked onclick="generate_disable()">
</td>
<td width="25%">
<label for="opt4">تضمين الرموز </label>
<input type="checkbox" id="opt4" onclick="generate_disable()">
</td>
</tr>
<tr id="crt" width=100%>
<!-- الصف الذي يظهر فيه شريط السحب لاختيار طول كلمة المرور, بالإضافة إلى زر التوليد -->
<td width=75%>
<label for="length"> طول كلمة المرور: </label>
<input type="range" min=4 max=170 id="length" value="4">
<!-- هذا هو شريط السحب الذي يتم من خلاله اختيار طول كلمة المرور , وقد تم تحديد القيمة الصغرى له إلى 4 , والقيمة القصوى 170 -->
</td>
<td width=2%>
</td>
<td width=3%>
</td>
<td width=20%>
<button id="genbutton" onclick="generate()"> توليد </button>
</td>
</tr>
<tr id="rslt" width=100% style="display: none">
<!-- الصف الذي يظهر فيه مربع الناتج بالإضافة إلى زر النسخ وزر العودة -->
<td width=60%>
<label for="result" id="resultlbl">ناتج التوليد: </label>
<input type="text" id="result" readonly>
<!-- هذا هو المربع النصي الذي تظهر فيه النتيجة , وهو للقراءة فقط. دلنا على ذلك صفة readonly الموجودة ضمن إعداداته -->
</td>
<td width=20%>
<button onclick="pw_copy()"> نسخ </button>
</td>
<td width=2%>
</td>
<td width=3%>
</td>
<td width=15%>
<button onclick="pw_new()"> عودة </button>
</td>
</tr>
</table>
</font>
<!-- إغلاق الوسم font الذي يحدد حجم الخط -->
</div>
<!-- إغلاق الوسم div -->
<!-- تبدأ الآن تعليمات javascript , والملحوظ أنه عندما قمنا بإنشاء العناصر كالمربعات والأزرار وغيرها فإننا قد أعطينا كل فرد منها قيمة id ليتسنى لنا بعد ذلك استدعائها داخل أكواد javascript
<script>
var result = document.getElementById("result")
// استدعاء المربع النصي لعرض النتائج , وقد استدعيناه خارج الدوال لأننا سنضطر إلى استخدامه في أكثر من دالة
function generate() {
// بدء الدالة الرئيسية والمربوطة بزر التوليد
var chars = "abcdefghijklmnopqrstuvwxyz";
// متغير نصي وضعنا فيه جميع الحروف الإنجليزية الصغيرة small leters للاختيار العشوائي بينها لاحقًا
var capChars = chars.toUpperCase();
// متغير نصي وضعنا فيه جميع الحروف الإنجليزية الكبيرة capital leters للاختيار العشوائي بينها لاحقًا
var numbers = "0123456789"
// متغير نصي وضعنا فيه الأرقام من 0 إلى 9 للاختيار العشوائي بينها
var simbles = "!@#$%^&*()_+-><?/."
// متغير نصي آخر وضعنا فيه عدد من الرموز للاختيار فيما بينها عشوائيًأ
var categories = []
// قائمة فارغة سنضيف فيها التصنيفات السابقة بعد التحقق من حالة مربعات التحديد
if (document.getElementById("opt1").checked) {
// إذا كان مربع التحديد الأول محددًا
categories.push(capChars)
// أضف فئة الحروف الكبيرة إلى قائمة الفئات
}
if (document.getElementById("opt2").checked) {
// إذا كان المربع الثاني محددًا
categories.push(chars)
// أضف الحروف الصغيرة إلى قائمة الفئات
}
if (document.getElementById("opt3").checked) {
// إذا كان مربع التحديد الثالث محددًا
categories.push(numbers)
// أضف فئة الأرقام
}
if (document.getElementById("opt4").checked) {
// إذا كان المربع الرابع محددًا
categories.push(simbles)
// أضف فئة الرموز
}
var length = document.getElementById("length")
// استدعاء شريط السحب الذي يحدد طول كلمة المرور
length = Number(length.value)
// تحويل قيمة شريط السحب إلى integer ليسهل التعامل معها كرقم
var i = 0
// متغير نستخدمه في الحلقة التكرارية ليتم الزيادة عليه في كل مرة رقمًا واحدًا إلى أن يساوي length التي تمثر طول كلمة المرور
var category = ""
// متغير سيتم استخدامه لاحقًا لاختيار الفئة العشوائية في كل دورة تدور فيها الحلقة التكرارية
var unit = ""
// متغير سيتم استخدامه لاحقًا لتخزين الحرف أو الرقم أو الرمز الذي وقع عليه الاختيار العشوائي
var pw = ""
//متغير لتخزين كلمة المرور
for (i;i<length;i++) {
// بدء الحلقة التكرارية التي ستدور إلى أن يساوي i قيمة length التي تمثل طول كلمة المرور
category = categories[Math.floor(Math.random() *categories.length)]
// اختيار فئة عشوائية. ففي كل مرة تدور فيها الحلقة يتم اختيار فئة من الفئات عشوائيًا سواء حرف فئة الحروف الكبيرة , الحروف الصغيرة , الأرقام , أو الرموز, وفي الخطوة التالية يتم اختيار عنصرًا عشوائيًا من الفئة المختارة هي أيضًا بشكل عشوائي
unit = category[Math.floor(Math.random() *category.length)]
// اختيار عنصر عشوائي من الفئة المختارة
pw += unit
// إضافة العنصر إلى متغير pw في كل مرة تدور فيه الحلقة , وهذا هو المتغير الذي تخزن فيه كلمة المرور
}
result.value = pw
// ضبط محتوى مربع النتيجة بحيث يساوي قيمة المتغير pw وهو بدوره يساوي كلمة المرور العشوائية التي تم إنشاؤها داخل الحلقة
document.getElementById("options").style.display = "none"
// اخفاء صف الخيارات
document.getElementById("crt").style.display = "none"
// إخفاء الصف الحاوي على زر التوليد بالإضافة إلى شريط اختيار طول ال password
document.getElementById("rslt").style.display = "block"
// إظهار الصف الحاوي على مربع النتيجة وزر النسخ وزر العودة
result.focus()
// تركيز المؤشر على مربع النتيجة
}
// إنهاء دالة التوليد
function pw_copy() {
// بدء دالة النسخ
result.select()
// تحديد النص الذي بداخل خانة النتيجة
result.setSelectionRange(0, 99999);
// أمر لمواأمة وظيفة تحديد النص في الهواتف الذكية
document.execCommand("copy");
// تنفيذ أمر النسخ للنص المحدد
window.alert("تم النسخ بنجاح.")
// إظهار رسالة لإبلاغ المستخدم بنجاح عملية النسخ
}
// إنهاء دالة النسخ
function pw_new() {
// بدء الدالة المرتبطة بزر العودة والذي يقوم بإخفاء صف النتيجة بما فيه من أزرار وإظهار خيارات إنشاء كلمة مرور عشوائية جديدة
document.getElementById("rslt").style.display = "none"
// إخفاء صف النتيجة
document.getElementById("options").style.display = "block"
// إظهار صف خيارات كلمة المرور
document.getElementById("crt").style.display = "block"
// إظهار صف شريط السحب وزر التوليد
document.getElementById("length").focus()
// التركيز على شريط السحب, يمكنك تحديد العنصر الذي سيتم التركيز عليه إلى عنصر آخر بتغيير ال id داخل دالة getElementById
}
// إنهاء دالة العودة
function generate_disable() {
// بدء دالة جديدة وظيفتها تعطيل زر التوليد في حال لو لم يكن أحد الخيارات مفعلًا
if (document.getElementById("opt1").checked == false && document.getElementById("opt2").checked == false && document.getElementById("opt3").checked == false && document.getElementById("opt4").checked == false) {
// أمر شرطي يتحقق ما إذا كانت جميع مربعات التحديد غير محددة
document.getElementById("genbutton").disabled = true
// سيقوم الأمر الشرطي بتعطيل زر التوليد لو نجح الشرط
} else {
// إن لم ينجح الشرط السابق
document.getElementById("genbutton").disabled = false
// فسيعيد تنشيط زر التوليد
}
}
// إنهاء الدالة
</script>
في ختام هذه المشاركة, أسأل الله أن يبارك فيكم ويوفقكم ويكتب لكم ما فيه الخير.
والسلام عليكم ورحمة الله وبركاته.
الإخوة الكرام تحية طيبة للجميع.
هل سمعتم عن أدوات تقوم بتوليد كلمات مرور عشوائية قوية يصعب تخمينها؟
بجميع الأحوال, سواء إن كنت سمعت عن مثل هكذا أدوات أم لا فسنكتب سويًا أداتنا الخاصة لهذا الغرض مستخدمين في ذلك html و javascript.
ملحوظات
سأقوم بوضع الكود مع شرح مقتضب عن وظيفة كل سطر. وهنا يجب عليك معرفة أن شرح الأكواد سيتم عن طريق وضع تعليق أسفل كل كود , والتعليقات لا تؤثر على سير الكود, لذا فلو أردت نسخ الكود مع تعليقاته فستعمل الأداة دون مشاكل بإذن الله.
الكود
<div dir="rtl">
<!-- ضبط اتجاه الكلام بحيث يكون من اليمين إلى اليسار باستخدام الحاوي div الذي يعطينا حيزًا وهميًا لوضع المحتوى والتحكم به كاملًا -->
<font size=18>
<!-- تحديد حجم الخط -->
<h1> <strong> مولد كلمات المرور </strong> </h1>
<!-- عنوان الأداة -->
<table border=0>
<!-- ترتيب الأزرار والعناصر بشكل عام في شاشة الأداة باستخدام طريقة الجدول الوهمي -->
<tr id="options" width=100%>
<!-- الصف الذي تظهر فيه مربعات الاختيار لتحديد ما يتم تضمينه في كلمة المرور -->
<td width="25%">
<label for="opt1">تضمين الحروف الكبيرة </label>
<input type="checkbox" id="opt1" checked onclick="generate_disable()">
</td>
<td width="25%">
<label for="opt2">تضمين الحروف الصغيرة </label>
<input type="checkbox" id="opt2" checked onclick="generate_disable()">
</td>
<td width="25%">
<label for="opt3">تضمين الأرقام </label>
<input type="checkbox" id="opt3" checked onclick="generate_disable()">
</td>
<td width="25%">
<label for="opt4">تضمين الرموز </label>
<input type="checkbox" id="opt4" onclick="generate_disable()">
</td>
</tr>
<tr id="crt" width=100%>
<!-- الصف الذي يظهر فيه شريط السحب لاختيار طول كلمة المرور, بالإضافة إلى زر التوليد -->
<td width=75%>
<label for="length"> طول كلمة المرور: </label>
<input type="range" min=4 max=170 id="length" value="4">
<!-- هذا هو شريط السحب الذي يتم من خلاله اختيار طول كلمة المرور , وقد تم تحديد القيمة الصغرى له إلى 4 , والقيمة القصوى 170 -->
</td>
<td width=2%>
</td>
<td width=3%>
</td>
<td width=20%>
<button id="genbutton" onclick="generate()"> توليد </button>
</td>
</tr>
<tr id="rslt" width=100% style="display: none">
<!-- الصف الذي يظهر فيه مربع الناتج بالإضافة إلى زر النسخ وزر العودة -->
<td width=60%>
<label for="result" id="resultlbl">ناتج التوليد: </label>
<input type="text" id="result" readonly>
<!-- هذا هو المربع النصي الذي تظهر فيه النتيجة , وهو للقراءة فقط. دلنا على ذلك صفة readonly الموجودة ضمن إعداداته -->
</td>
<td width=20%>
<button onclick="pw_copy()"> نسخ </button>
</td>
<td width=2%>
</td>
<td width=3%>
</td>
<td width=15%>
<button onclick="pw_new()"> عودة </button>
</td>
</tr>
</table>
</font>
<!-- إغلاق الوسم font الذي يحدد حجم الخط -->
</div>
<!-- إغلاق الوسم div -->
<!-- تبدأ الآن تعليمات javascript , والملحوظ أنه عندما قمنا بإنشاء العناصر كالمربعات والأزرار وغيرها فإننا قد أعطينا كل فرد منها قيمة id ليتسنى لنا بعد ذلك استدعائها داخل أكواد javascript
<script>
var result = document.getElementById("result")
// استدعاء المربع النصي لعرض النتائج , وقد استدعيناه خارج الدوال لأننا سنضطر إلى استخدامه في أكثر من دالة
function generate() {
// بدء الدالة الرئيسية والمربوطة بزر التوليد
var chars = "abcdefghijklmnopqrstuvwxyz";
// متغير نصي وضعنا فيه جميع الحروف الإنجليزية الصغيرة small leters للاختيار العشوائي بينها لاحقًا
var capChars = chars.toUpperCase();
// متغير نصي وضعنا فيه جميع الحروف الإنجليزية الكبيرة capital leters للاختيار العشوائي بينها لاحقًا
var numbers = "0123456789"
// متغير نصي وضعنا فيه الأرقام من 0 إلى 9 للاختيار العشوائي بينها
var simbles = "!@#$%^&*()_+-><?/."
// متغير نصي آخر وضعنا فيه عدد من الرموز للاختيار فيما بينها عشوائيًأ
var categories = []
// قائمة فارغة سنضيف فيها التصنيفات السابقة بعد التحقق من حالة مربعات التحديد
if (document.getElementById("opt1").checked) {
// إذا كان مربع التحديد الأول محددًا
categories.push(capChars)
// أضف فئة الحروف الكبيرة إلى قائمة الفئات
}
if (document.getElementById("opt2").checked) {
// إذا كان المربع الثاني محددًا
categories.push(chars)
// أضف الحروف الصغيرة إلى قائمة الفئات
}
if (document.getElementById("opt3").checked) {
// إذا كان مربع التحديد الثالث محددًا
categories.push(numbers)
// أضف فئة الأرقام
}
if (document.getElementById("opt4").checked) {
// إذا كان المربع الرابع محددًا
categories.push(simbles)
// أضف فئة الرموز
}
var length = document.getElementById("length")
// استدعاء شريط السحب الذي يحدد طول كلمة المرور
length = Number(length.value)
// تحويل قيمة شريط السحب إلى integer ليسهل التعامل معها كرقم
var i = 0
// متغير نستخدمه في الحلقة التكرارية ليتم الزيادة عليه في كل مرة رقمًا واحدًا إلى أن يساوي length التي تمثر طول كلمة المرور
var category = ""
// متغير سيتم استخدامه لاحقًا لاختيار الفئة العشوائية في كل دورة تدور فيها الحلقة التكرارية
var unit = ""
// متغير سيتم استخدامه لاحقًا لتخزين الحرف أو الرقم أو الرمز الذي وقع عليه الاختيار العشوائي
var pw = ""
//متغير لتخزين كلمة المرور
for (i;i<length;i++) {
// بدء الحلقة التكرارية التي ستدور إلى أن يساوي i قيمة length التي تمثل طول كلمة المرور
category = categories[Math.floor(Math.random() *categories.length)]
// اختيار فئة عشوائية. ففي كل مرة تدور فيها الحلقة يتم اختيار فئة من الفئات عشوائيًا سواء حرف فئة الحروف الكبيرة , الحروف الصغيرة , الأرقام , أو الرموز, وفي الخطوة التالية يتم اختيار عنصرًا عشوائيًا من الفئة المختارة هي أيضًا بشكل عشوائي
unit = category[Math.floor(Math.random() *category.length)]
// اختيار عنصر عشوائي من الفئة المختارة
pw += unit
// إضافة العنصر إلى متغير pw في كل مرة تدور فيه الحلقة , وهذا هو المتغير الذي تخزن فيه كلمة المرور
}
result.value = pw
// ضبط محتوى مربع النتيجة بحيث يساوي قيمة المتغير pw وهو بدوره يساوي كلمة المرور العشوائية التي تم إنشاؤها داخل الحلقة
document.getElementById("options").style.display = "none"
// اخفاء صف الخيارات
document.getElementById("crt").style.display = "none"
// إخفاء الصف الحاوي على زر التوليد بالإضافة إلى شريط اختيار طول ال password
document.getElementById("rslt").style.display = "block"
// إظهار الصف الحاوي على مربع النتيجة وزر النسخ وزر العودة
result.focus()
// تركيز المؤشر على مربع النتيجة
}
// إنهاء دالة التوليد
function pw_copy() {
// بدء دالة النسخ
result.select()
// تحديد النص الذي بداخل خانة النتيجة
result.setSelectionRange(0, 99999);
// أمر لمواأمة وظيفة تحديد النص في الهواتف الذكية
document.execCommand("copy");
// تنفيذ أمر النسخ للنص المحدد
window.alert("تم النسخ بنجاح.")
// إظهار رسالة لإبلاغ المستخدم بنجاح عملية النسخ
}
// إنهاء دالة النسخ
function pw_new() {
// بدء الدالة المرتبطة بزر العودة والذي يقوم بإخفاء صف النتيجة بما فيه من أزرار وإظهار خيارات إنشاء كلمة مرور عشوائية جديدة
document.getElementById("rslt").style.display = "none"
// إخفاء صف النتيجة
document.getElementById("options").style.display = "block"
// إظهار صف خيارات كلمة المرور
document.getElementById("crt").style.display = "block"
// إظهار صف شريط السحب وزر التوليد
document.getElementById("length").focus()
// التركيز على شريط السحب, يمكنك تحديد العنصر الذي سيتم التركيز عليه إلى عنصر آخر بتغيير ال id داخل دالة getElementById
}
// إنهاء دالة العودة
function generate_disable() {
// بدء دالة جديدة وظيفتها تعطيل زر التوليد في حال لو لم يكن أحد الخيارات مفعلًا
if (document.getElementById("opt1").checked == false && document.getElementById("opt2").checked == false && document.getElementById("opt3").checked == false && document.getElementById("opt4").checked == false) {
// أمر شرطي يتحقق ما إذا كانت جميع مربعات التحديد غير محددة
document.getElementById("genbutton").disabled = true
// سيقوم الأمر الشرطي بتعطيل زر التوليد لو نجح الشرط
} else {
// إن لم ينجح الشرط السابق
document.getElementById("genbutton").disabled = false
// فسيعيد تنشيط زر التوليد
}
}
// إنهاء الدالة
</script>
مولد كلمات المرور
في ختام هذه المشاركة, أسأل الله أن يبارك فيكم ويوفقكم ويكتب لكم ما فيه الخير.
والسلام عليكم ورحمة الله وبركاته.
ليست هناك تعليقات:
إرسال تعليق
قل شيئًا