ایچ ٹی ایم ایل ، سی ایس ایس اور جاوا اسکرپٹ کا استعمال کرتے ہوئے ایک کیپچا توثیق فارم بنائیں۔

ایچ ٹی ایم ایل ، سی ایس ایس اور جاوا اسکرپٹ کا استعمال کرتے ہوئے ایک کیپچا توثیق فارم بنائیں۔

آج کل کیپچا ویب سائٹ کی حفاظت کا ایک لازمی حصہ ہیں۔ لاکھوں کیپچا ٹیسٹ ہر روز آن لائن مکمل ہوتے ہیں۔





اگر آپ نے اپنی ویب سائٹ پر کیپچا کی توثیق کو نافذ نہیں کیا ہے ، تو یہ آپ کے لیے ایک بڑا مسئلہ پیدا کر سکتا ہے اور آپ کو اسپامرز کے لیے ہدف بنا سکتا ہے۔





یہاں وہ سب کچھ ہے جو آپ کو کیپچا کے بارے میں جاننے کی ضرورت ہے اور آپ HTML ، CSS اور جاوا اسکرپٹ کا استعمال کرتے ہوئے انہیں اپنی ویب سائٹ پر آسانی سے کیسے نافذ کرسکتے ہیں۔





کیپچا کیا ہے؟

کیپچا کا مطلب ہے 'کمپیوٹر اور انسانوں کو الگ الگ بتانے کے لیے مکمل طور پر خودکار پبلک ٹورنگ ٹیسٹ۔' یہ اصطلاح 2003 میں Luis von Ahn ، Manuel Blum ، Nicholas J. Hopper ، اور John Langford نے وضع کی تھی۔ یہ ایک قسم کا چیلنج ریسپانس ٹیسٹ ہے جو اس بات کا تعین کرنے کے لیے استعمال کیا جاتا ہے کہ صارف انسان ہے یا نہیں۔

CAPTCHAs ویب سائٹس کو چیلنجز فراہم کر کے سیکورٹی میں اضافہ کرتے ہیں جو بوٹس کے لیے مشکل ہیں لیکن انسانوں کے لیے نسبتا easy آسان ہیں۔ مثال کے طور پر ، ایک سے زیادہ تصاویر کے سیٹ سے گاڑی کی تمام تصاویر کی شناخت کرنا بوٹس کے لیے مشکل ہے لیکن انسانی آنکھوں کے لیے کافی آسان ہے۔



کیپچا کا خیال ٹورنگ ٹیسٹ سے شروع ہوا۔ ٹورنگ ٹیسٹ ایک ایسا طریقہ ہے جس کی جانچ کی جاتی ہے کہ مشین انسان کی طرح سوچ سکتی ہے یا نہیں۔ دلچسپ بات یہ ہے کہ کیپچا ٹیسٹ کو 'ریورس ٹورنگ ٹیسٹ' کہا جا سکتا ہے کیونکہ اس معاملے میں کمپیوٹر ایسا ٹیسٹ بناتا ہے جو انسانوں کو چیلنج کرتا ہے۔

آپ کی ویب سائٹ کو کیپچا کی توثیق کی ضرورت کیوں ہے؟

کیپچا بنیادی طور پر بوٹس کو سپیم اور دیگر نقصان دہ مواد کے ساتھ خود بخود جمع کرنے سے روکنے کے لیے استعمال ہوتے ہیں۔ یہاں تک کہ گوگل جیسی کمپنیاں اپنے سسٹم کو سپیم حملوں سے روکنے کے لیے استعمال کرتی ہیں۔ یہاں کچھ وجوہات ہیں کہ آپ کی ویب سائٹ کیپچا کی توثیق سے فائدہ اٹھاتی ہے۔





  • کیپچا جعلی اکاؤنٹس بنا کر رجسٹریشن سسٹم کو ہیکرز اور بوٹس کو سپیم کرنے سے روکنے میں مدد کرتے ہیں۔ اگر ان کو نہیں روکا گیا تو وہ ان اکاؤنٹس کو مذموم مقاصد کے لیے استعمال کر سکتے ہیں۔
  • کیپچا آپ کی ویب سائٹ سے وحشیانہ لاگ ان حملوں کو روک سکتے ہیں جسے ہیکرز ہزاروں پاس ورڈ استعمال کرکے لاگ ان کرنے کی کوشش کرتے ہیں۔
  • کیپچا جھوٹے تبصرے دے کر بوٹس کو ریویو سیکشن کو سپیم کرنے سے روک سکتے ہیں۔
  • کیپچا ٹکٹ مہنگائی کو روکنے میں مدد کرتا ہے کیونکہ کچھ لوگ دوبارہ فروخت کے لیے بڑی تعداد میں ٹکٹ خریدتے ہیں۔ کیپچا مفت ایونٹس میں جھوٹی رجسٹریشن کو بھی روک سکتا ہے۔
  • CAPTCHAs سائبر بدمعاشوں کو بلاگ سپیم کرنے سے روک سکتے ہیں جن میں غلط تبصرے اور نقصان دہ ویب سائٹس کے لنکس ہیں۔

اور بھی بہت سی وجوہات ہیں جو آپ کی ویب سائٹ میں کیپچا کی توثیق کو ضم کرنے میں معاون ہیں۔ آپ مندرجہ ذیل کوڈ کے ساتھ ایسا کر سکتے ہیں۔

میموری کے استعمال کو کم کرنے کا طریقہ ونڈوز 10۔

ایچ ٹی ایم ایل کیپچا کوڈ۔

ایچ ٹی ایم ایل ، یا ہائپر ٹیکسٹ مارک اپ لینگویج ، ویب پیج کی ساخت کو بیان کرتی ہے۔ اپنے CAPTCHA توثیق فارم کی تشکیل کے لیے درج ذیل HTML کوڈ استعمال کریں:














captcha text



Refresh






یہ کوڈ بنیادی طور پر 7 عناصر پر مشتمل ہے:

  • : یہ عنصر CAPTCHA فارم کی سرخی ظاہر کرنے کے لیے استعمال ہوتا ہے۔

  • : یہ عنصر کیپچا متن کو ظاہر کرنے کے لیے استعمال کیا جاتا ہے۔
  • - یہ عنصر CAPTCHA ٹائپ کرنے کے لیے ایک ان پٹ باکس بنانے کے لیے استعمال ہوتا ہے۔
  • : یہ بٹن فارم جمع کراتا ہے اور چیک کرتا ہے کہ کیپچا اور ٹائپ کردہ متن ایک ہے یا نہیں۔
  • : یہ بٹن کیپچا کو ریفریش کرنے کے لیے استعمال ہوتا ہے۔
  • : یہ عنصر داخل کردہ متن کے مطابق آؤٹ پٹ ظاہر کرنے کے لیے استعمال ہوتا ہے۔
  • : یہ بنیادی عنصر ہے جس میں دیگر تمام عناصر شامل ہیں۔

CSS اور جاوا اسکرپٹ فائلیں اس ایچ ٹی ایم ایل پیج سے بذریعہ منسلک ہیں۔ اور عناصر بالترتیب آپ کو شامل کرنا ہوگا۔ لنک کے اندر ٹیگ سر ٹیگ اور سکرپٹ کے آخر میں ٹیگ جسم .

آپ اس کوڈ کو اپنی ویب سائٹ کی موجودہ شکلوں کے ساتھ بھی ضم کر سکتے ہیں۔

متعلقہ: ایچ ٹی ایم ایل لوازمات دھوکہ شیٹ: ٹیگز ، اوصاف ، اور بہت کچھ۔



سی ایس ایس کیپچا کوڈ۔

CSS ، یا Cascading Style Sheets ، HTML عناصر کو سٹائل کرنے کے لیے استعمال کیا جاتا ہے۔ مندرجہ بالا HTML عناصر کو سٹائل کرنے کے لیے درج ذیل CSS کوڈ استعمال کریں:

@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;
}

اپنی پسند کے مطابق اس کوڈ سے سی ایس ایس پراپرٹیز شامل کریں یا ہٹائیں۔ آپ فارم کنٹینر کو استعمال کرتے ہوئے ایک خوبصورت شکل بھی دے سکتے ہیں۔ سی ایس ایس باکس شیڈو پراپرٹی۔ .

جاوا اسکرپٹ کیپچا کوڈ۔

جاوا اسکرپٹ۔ دوسری صورت میں جامد ویب پیج میں فعالیت شامل کرنے کے لیے استعمال کیا جاتا ہے۔ کیپچا توثیق فارم میں مکمل فعالیت شامل کرنے کے لیے درج ذیل کوڈ کا استعمال کریں:

// 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 = '';
});

اب آپ کے پاس مکمل طور پر فعال کیپچا توثیق فارم ہے! اگر آپ مکمل کوڈ پر ایک نظر ڈالنا چاہتے ہیں تو ، آپ کلون کر سکتے ہیں اس کیپچا ویلیڈیٹر پروجیکٹ کا گٹ ہب ذخیرہ۔ . ذخیرے کو کلون کرنے کے بعد ، HTML فائل پر عمل کریں اور آپ کو درج ذیل آؤٹ پٹ ملیں گے۔

کال کرتے وقت نمبر چھپانے کا طریقہ

جب آپ ان پٹ باکس میں درست کیپچا کوڈ داخل کریں گے تو درج ذیل آؤٹ پٹ ظاہر ہوگا۔

جب آپ ان پٹ باکس میں کوئی غلط CAPTCHA کوڈ داخل کریں گے تو درج ذیل آؤٹ پٹ ظاہر ہو گا:

اپنی ویب سائٹ کو CAPTCHAs کے ساتھ محفوظ بنائیں۔

ماضی میں ، بہت سی تنظیموں اور کاروباری اداروں کو اپنی ویب سائٹس پر کیپچا فارم نہ ہونے کے نتیجے میں ڈیٹا کی خلاف ورزی ، سپیم اٹیک وغیرہ جیسے بھاری نقصانات کا سامنا کرنا پڑا ہے۔ اپنی ویب سائٹ میں کیپچا شامل کرنے کی انتہائی سفارش کی جاتی ہے ، کیونکہ یہ ویب سائٹ کو سائبر جرائم پیشہ افراد سے بچانے کے لیے سیکورٹی لیئر کا اضافہ کرتی ہے۔

گوگل نے 'reCAPTCHA' کے نام سے ایک مفت سروس بھی لانچ کی ہے جو ویب سائٹس کو سپیم اور غلط استعمال سے بچانے میں مدد دیتی ہے۔ CAPTCHA اور reCAPTCHA ایک جیسے لگتے ہیں ، لیکن وہ بالکل ایک جیسی چیز نہیں ہیں۔ بعض اوقات کیپچا مایوس کن اور بہت سے صارفین کے لیے سمجھنا مشکل محسوس کرتے ہیں۔ اگرچہ ، ایک اہم وجہ یہ ہے کہ انہیں مشکل کیوں بنایا گیا ہے۔

بانٹیں بانٹیں ٹویٹ ای میل۔ کیپچا کیسے کام کرتے ہیں اور وہ اتنے مشکل کیوں ہیں؟

CAPTCHAs اور reCAPTCHAs سپیم کو روکتے ہیں۔ وہ کیسے کام کرتے ہیں؟ اور آپ کو CAPTCHAs کو حل کرنا اتنا مشکل کیوں لگتا ہے؟

اگلا پڑھیں۔
متعلقہ موضوعات۔
  • پروگرامنگ۔
  • ایچ ٹی ایم ایل
  • جاوا اسکرپٹ۔
  • سی ایس ایس
مصنف کے بارے میں یوراج چندر۔(60 مضامین شائع ہوئے)

یوراج دہلی یونیورسٹی ، انڈیا میں کمپیوٹر سائنس کے انڈر گریجویٹ طالب علم ہیں۔ وہ فل اسٹیک ویب ڈویلپمنٹ کے بارے میں پرجوش ہے۔ جب وہ نہیں لکھ رہا ہے ، وہ مختلف ٹیکنالوجیز کی گہرائی کو تلاش کر رہا ہے۔

یوراج چندر سے مزید

ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

سبسکرائب کرنے کے لیے یہاں کلک کریں۔