في الوقت الحاضر ، تعد اختبارات CAPTCHA جزءًا لا يتجزأ من أمان موقع الويب. يتم إكمال الملايين من اختبارات CAPTCHA عبر الإنترنت كل يوم.

إذا لم تكن قد نفذت التحقق من صحة CAPTCHA على موقع الويب الخاص بك ، فقد يؤدي ذلك إلى مشكلة كبيرة بالنسبة لك ، مما يجعلك هدفًا لمرسلي البريد العشوائي.

---

---

إليك كل ما تحتاج لمعرفته حول اختبارات CAPTCHA وكيف يمكنك تنفيذها بسهولة على موقع الويب الخاص بك باستخدام HTML و CSS و JavaScript.

ما هو اختبار CAPTCHA؟

CAPTCHA تعني 'اختبار تورينج العام المؤتمت بالكامل لإخبار الكمبيوتر وبصرف النظر عن البشر.' تمت صياغة هذا المصطلح في عام 2003 من قبل لويس فون آن ومانويل بلوم ونيكولاس جيه هوبر وجون لانجفورد. إنه نوع من اختبار التحدي والاستجابة الذي يستخدم لتحديد ما إذا كان المستخدم بشريًا أم لا.

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

نشأت فكرة الكابتشا من اختبار تورينج. اختبار تورينج هو طريقة لاختبار ما إذا كان يمكن للآلة أن تفكر مثل الإنسان أم لا. ومن المثير للاهتمام ، أن اختبار CAPTCHA يمكن أن يسمى 'اختبار تورينغ العكسي' لأنه في هذه الحالة ، يقوم الكمبيوتر بإنشاء الاختبار الذي يتحدى البشر.

لماذا يحتاج موقع الويب الخاص بك إلى التحقق من صحة CAPTCHA؟

تُستخدم اختبارات CAPTCHA بشكل أساسي لمنع الروبوتات من إرسال نماذج تحتوي على رسائل غير مرغوب فيها ومحتويات ضارة أخرى تلقائيًا. حتى الشركات مثل Google تستخدمها لمنع نظامها من هجمات البريد العشوائي. فيما يلي بعض الأسباب التي تجعل موقع الويب الخاص بك يستفيد من التحقق من صحة CAPTCHA:

---

---

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

هناك العديد من الأسباب التي تدعم دمج التحقق من صحة CAPTCHA في موقع الويب الخاص بك. يمكنك القيام بذلك باستخدام الكود التالي.

أشياء تفعلها على الإنترنت عندما تشعر بالملل

كود HTML CAPTCHA

يصف HTML ، أو HyperText Markup Language ، بنية صفحة الويب. استخدم كود HTML التالي لهيكلة نموذج التحقق من صحة CAPTCHA:

---

---










captcha text



Refresh








يتكون هذا الرمز بشكل أساسي من 7 عناصر:

• : يستخدم هذا العنصر لعرض عنوان نموذج CAPTCHA.

• : يستخدم هذا العنصر لعرض نص CAPTCHA.
• - يستخدم هذا العنصر لإنشاء مربع إدخال لكتابة CAPTCHA.
• : يقوم هذا الزر بإرسال النموذج والتحقق مما إذا كانت CAPTCHA والنص المكتوب متماثلان أم لا.
• : يستخدم هذا الزر لتحديث CAPTCHA.
• : يستخدم هذا العنصر لعرض المخرجات حسب النص المدخل.
• : هذا هو العنصر الأصل الذي يحتوي على جميع العناصر الأخرى.

ترتبط ملفات CSS و JavaScript بصفحة HTML هذه من خلال ملف و العناصر على التوالي. يجب عليك إضافة حلقة الوصل علامة داخل رئيس العلامة و النصي العلامة في نهاية هيئة .

يمكنك أيضًا دمج هذا الرمز مع النماذج الحالية لموقع الويب الخاص بك.

متعلق ب: ورقة الغش في أساسيات HTML: العلامات والسمات والمزيد

كود كابتشا CSS

يتم استخدام CSS ، أو أوراق الأنماط المتتالية ، لتصميم عناصر HTML. استخدم كود CSS التالي لتصميم عناصر HTML أعلاه:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
background-color: #232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
height: 220px;
width: 250px;
background-color: #2d3748;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#captchaHeading {
color: white;
}
#captcha {
height: 80%;
width: 80%;
font-size: 30px;
letter-spacing: 3px;
margin: auto;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#refreshButton {
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#textBox {
height: 25px;
}
.incorrectCaptcha {
color: #FF0000;
}
.correctCaptcha {
color: #7FFF00;
}

قم بإضافة أو إزالة خصائص CSS من هذا الرمز وفقًا لتفضيلاتك. يمكنك أيضًا إلقاء نظرة أنيقة على حاوية النموذج باستخدام ملف خاصية CSS box-shadow .

كود JavaScript CAPTCHA

جافا سكريبت يستخدم لإضافة وظائف إلى صفحة ويب ثابتة بخلاف ذلك. استخدم الكود التالي لإضافة وظائف كاملة إلى نموذج التحقق من صحة CAPTCHA:

// document.querySelector() is used to select an element from the document using its ID
let captchaText = document.querySelector('#captcha');
var ctx = captchaText.getContext('2d');
ctx.font = '30px Roboto';
ctx.fillStyle = '#08e5ff';

let userText = document.querySelector('#textBox');
let submitButton = document.querySelector('#submitButton');
let output = document.querySelector('#output');
let refreshButton = document.querySelector('#refreshButton');

// alphaNums contains the characters with which you want to create the CAPTCHA
let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
let emptyArr = [];
// This loop generates a random string of 7 characters using alphaNums
// Further this string is displayed as a CAPTCHA
for (let i = 1; i <= 7; i++) {
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
var c = emptyArr.join('');
ctx.fillText(emptyArr.join(''),captchaText.width/4, captchaText.height/2);

// This event listener is stimulated whenever the user press the 'Enter' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
userText.addEventListener('keyup', function(e) {
// Key Code Value of 'Enter' Button is 13
if (e.keyCode === 13) {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
}
});
// This event listener is stimulated whenever the user clicks the 'Submit' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
submitButton.addEventListener('click', function() {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
});
// This event listener is stimulated whenever the user press the 'Refresh' button
// A new random CAPTCHA is generated and displayed after the user clicks the 'Refresh' button
refreshButton.addEventListener('click', function() {
userText.value = '';
let refreshArr = [];
for (let j = 1; j <= 7; j++) {
refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
ctx.clearRect(0, 0, captchaText.width, captchaText.height);
c = refreshArr.join('');
ctx.fillText(refreshArr.join(''),captchaText.width/4, captchaText.height/2);
output.innerHTML = '';
});


الآن لديك نموذج التحقق من صحة CAPTCHA يعمل بكامل طاقته! إذا كنت تريد إلقاء نظرة على الكود الكامل ، فيمكنك استنساخ ملف مستودع GitHub لمشروع التحقق من CAPTCHA . بعد استنساخ المستودع ، قم بتنفيذ ملف HTML وستحصل على الإخراج التالي:

إنشاء والكتابة إلى ملف بيثون

عند إدخال كود CAPTCHA الصحيح في مربع الإدخال ، سيتم عرض الإخراج التالي:

عند إدخال أي كود كابتشا غير صحيح في مربع الإدخال ، سيتم عرض الإخراج التالي:

اجعل موقع الويب الخاص بك آمنًا باستخدام اختبارات CAPTCHA

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

أطلقت Google أيضًا خدمة مجانية تسمى reCAPTCHA تساعد في حماية مواقع الويب من البريد العشوائي وإساءة الاستخدام. يبدو أن CAPTCHA و reCAPTCHA متشابهان ، لكنهما ليسا نفس الشيء تمامًا. تشعر أحيانًا كابتشا بالإحباط ويصعب فهمها للعديد من المستخدمين. على الرغم من أن هناك سببًا مهمًا لسبب صعوبة ذلك.

يشارك يشارك سقسقة بريد الالكتروني كيف تعمل الكابتشا ولماذا هي صعبة للغاية؟

تمنع اختبارات CAPTCHA و reCAPTCHA الرسائل غير المرغوب فيها. كيف يعملون؟ ولماذا تجد صعوبة في حل CAPTCHA؟

اقرأ التالي مواضيع ذات صلة

• برمجة
• لغة البرمجة
• جافا سكريبت
• CSS

نبذة عن الكاتب يوفراج شاندرا(تم نشر 60 مقالاً)

يوفراج طالب جامعي في علوم الكمبيوتر بجامعة دلهي بالهند. إنه شغوف بتطوير الويب Full Stack. عندما لا يكتب ، فإنه يستكشف عمق التقنيات المختلفة.

المزيد من Yuvraj Chandra

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك