Home-theater-designers
இப்போதெல்லாம் CAPTCHA கள் வலைத்தள பாதுகாப்பின் ஒரு ஒருங்கிணைந்த பகுதியாகும். மில்லியன் கணக்கான CAPTCHA சோதனைகள் ஒவ்வொரு நாளும் ஆன்லைனில் முடிக்கப்படுகின்றன.
உங்கள் வலைத்தளத்தில் CAPTCHA சரிபார்ப்பை நீங்கள் செயல்படுத்தவில்லை என்றால், அது உங்களுக்கு ஒரு பெரிய சிக்கலை உருவாக்கி, உங்களை ஸ்பேமர்களுக்கு இலக்காக அமைக்கும்.
CAPTCHA களைப் பற்றி நீங்கள் தெரிந்து கொள்ள வேண்டிய அனைத்தும் மற்றும் HTML, CSS மற்றும் JavaScript ஐப் பயன்படுத்தி அவற்றை உங்கள் இணையதளத்தில் எவ்வாறு எளிதாக செயல்படுத்தலாம் என்பது இங்கே.
கேப்ட்சா என்றால் என்ன?
CAPTCHA என்பது 'கம்ப்யூட்டரி மற்றும் மனிதர்களைத் தவிர்த்து முற்றிலும் தானியங்கி பொது டூரிங் சோதனை.' இந்த வார்த்தையை 2003 இல் லூயிஸ் வான் ஆன், மானுவல் ப்ளம், நிக்கோலஸ் ஜே. ஹாப்பர் மற்றும் ஜான் லாங்ஃபோர்ட் ஆகியோரால் உருவாக்கப்பட்டது. இது ஒரு வகை சவால்-பதில் சோதனை, இது பயனர் மனிதரா இல்லையா என்பதைத் தீர்மானிக்கப் பயன்படுகிறது.
CAPTCHA கள் வலைத்தளங்களுக்கு பாதுகாப்பைச் சேர்க்கின்றன, அவை சவால்களை வழங்குவதன் மூலம் போட்களைச் செய்வது கடினம், ஆனால் மனிதர்களுக்கு ஒப்பீட்டளவில் எளிதானது. உதாரணமாக, பல படங்களின் தொகுப்பிலிருந்து ஒரு காரின் அனைத்து படங்களையும் அடையாளம் காண்பது போட்களுக்கு கடினம் ஆனால் மனித கண்களுக்கு போதுமானது.
கேப்ட்சாவின் யோசனை டூரிங் சோதனையிலிருந்து தோன்றியது. ஒரு இயந்திரம் மனிதனைப் போல சிந்திக்கிறதா இல்லையா என்பதை சோதிக்கும் ஒரு முறை டூரிங் டெஸ்ட். சுவாரஸ்யமாக, ஒரு கேப்ட்சா சோதனையை 'ரிவர்ஸ் டூரிங் டெஸ்ட்' என்று அழைக்கலாம், ஏனெனில் இந்த விஷயத்தில், கணினி மனிதர்களுக்கு சவால் விடும் சோதனையை உருவாக்குகிறது.
உங்கள் வலைத்தளத்திற்கு ஏன் CAPTCHA சரிபார்ப்பு தேவை?
CAPTCHA கள் முக்கியமாக ஸ்பேம் மற்றும் பிற தீங்கு விளைவிக்கும் உள்ளடக்கத்துடன் படிவங்களை தானாகவே சமர்ப்பிப்பதைத் தடுக்கப் பயன்படுத்தப்படுகின்றன. கூகிள் போன்ற நிறுவனங்கள் கூட தங்கள் கணினியை ஸ்பேம் தாக்குதல்களிலிருந்து தடுக்கப் பயன்படுத்துகின்றன. உங்கள் வலைத்தளம் CAPTCHA சரிபார்ப்பிலிருந்து பயனடைய சில காரணங்கள் இங்கே:
- போலி கணக்குகளை உருவாக்குவதன் மூலம் பதிவு அமைப்புகளை ஹேக்கர்கள் மற்றும் போட்கள் ஸ்பேம் செய்வதைத் தடுக்க CAPTCHA கள் உதவுகின்றன. அவை தடுக்கப்படாவிட்டால், அவர்கள் அந்தக் கணக்குகளை மோசமான நோக்கங்களுக்காகப் பயன்படுத்தலாம்.
- ஆயிரக்கணக்கான கடவுச்சொற்களைப் பயன்படுத்தி உள்நுழைய ஹேக்கர்கள் பயன்படுத்தும் உங்கள் வலைத்தளத்திலிருந்து மிருகத்தனமான உள்நுழைவு தாக்குதல்களை CAPTCHA கள் தடுக்கலாம்.
- பொய்யான கருத்துகளை வழங்குவதன் மூலம் CAPTCHA கள் மறுபரிசீலனை பிரிவை ஸ்பேம் செய்வதிலிருந்து போட்களை கட்டுப்படுத்தலாம்.
- CAPTCHA கள் டிக்கெட் பணவீக்கத்தை தடுக்க உதவுகின்றன, ஏனெனில் சிலர் மறுவிற்பனைக்கு அதிக எண்ணிக்கையிலான டிக்கெட்டுகளை வாங்குகிறார்கள். இலவச நிகழ்வுகளுக்கு தவறான பதிவுகளை கூட CAPTCHA தடுக்க முடியும்.
- கேப்ட்சாக்கள் இணையதள வலைப்பதிவுகளிலிருந்து ஸ்பேமிங் வலைப்பதிவுகளிலிருந்து மோசமான கருத்துகள் மற்றும் தீங்கு விளைவிக்கும் வலைத்தளங்களுக்கான இணைப்புகளைக் கட்டுப்படுத்தலாம்.
உங்கள் வலைத்தளத்தில் CAPTCHA சரிபார்ப்பை ஒருங்கிணைக்க இன்னும் பல காரணங்கள் உள்ளன. பின்வரும் குறியீட்டைக் கொண்டு நீங்கள் இதைச் செய்யலாம்.
ஆப்பிள் வாட்சில் பேட்டரியை எப்படி சேமிப்பது
HTML கேப்ட்சா குறியீடு
HTML, அல்லது ஹைப்பர் டெக்ஸ்ட் மார்க்அப் மொழி, ஒரு வலைப்பக்கத்தின் கட்டமைப்பை விவரிக்கிறது. உங்கள் CAPTCHA சரிபார்ப்பு படிவத்தை கட்டமைக்க பின்வரும் HTML குறியீட்டைப் பயன்படுத்தவும்:
captcha text
Refresh
இந்த குறியீடு முக்கியமாக 7 கூறுகளைக் கொண்டுள்ளது:
-
: இந்த உறுப்பு CAPTCHA படிவத்தின் தலைப்பை காட்ட பயன்படுகிறது. - : இந்த உறுப்பு CAPTCHA உரையைக் காண்பிக்கப் பயன்படுகிறது.
- - இந்த உறுப்பு CAPTCHA ஐ தட்டச்சு செய்ய ஒரு உள்ளீட்டு பெட்டியை உருவாக்க பயன்படுகிறது.
- : இந்த பொத்தான் படிவத்தை சமர்ப்பித்து, CAPTCHA மற்றும் தட்டச்சு செய்த உரை ஒன்றுதானா இல்லையா என்பதைச் சரிபார்க்கவும்.
- : இந்த பொத்தான் CAPTCHA ஐ புதுப்பிக்க பயன்படுகிறது.
- : இந்த உறுப்பு உள்ளிடப்பட்ட உரைக்கு ஏற்ப வெளியீட்டை காட்ட பயன்படுகிறது.
- : இது மற்ற அனைத்து கூறுகளையும் உள்ளடக்கிய பெற்றோர் உறுப்பு.
CSS மற்றும் JavaScript கோப்புகள் இந்த HTML பக்கத்துடன் இணைக்கப்பட்டுள்ளன மற்றும் கூறுகள் முறையே. நீங்கள் சேர்க்க வேண்டும் இணைப்பு உள்ளே குறிச்சொல் தலை குறிச்சொல் மற்றும் கையால் எழுதப்பட்ட தாள் குறி இறுதியில் உடல் .
உங்கள் வலைத்தளத்தின் ஏற்கனவே உள்ள படிவங்களுடன் இந்த குறியீட்டை ஒருங்கிணைக்கலாம்.
தொடர்புடையது: HTML எசென்ஷியல்ஸ் ஏமாற்று தாள்: குறிச்சொற்கள், பண்புக்கூறுகள் மற்றும் பல
CSS CAPTCHA குறியீடு
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;
}உங்கள் விருப்பத்திற்கு ஏற்ப இந்த குறியீட்டிலிருந்து CSS பண்புகளைச் சேர்க்கவும் அல்லது அகற்றவும். நீங்கள் படிவ கொள்கலனுக்கு ஒரு நேர்த்தியான தோற்றத்தை கொடுக்கலாம் CSS பெட்டி நிழல் சொத்து .
ஜாவாஸ்கிரிப்ட் கேப்ட்சா குறியீடு
ஜாவாஸ்கிரிப்ட் இல்லையெனில் நிலையான வலைப்பக்கத்தில் செயல்பாட்டைச் சேர்க்கப் பயன்படுகிறது. 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 சரிபார்ப்பு படிவம் உள்ளது! நீங்கள் முழுமையான குறியீட்டைப் பார்க்க விரும்பினால், நீங்கள் குளோன் செய்யலாம் இந்த CAPTCHA-Validator திட்டத்தின் GitHub களஞ்சியம் . களஞ்சியத்தை குளோனிங் செய்த பிறகு, HTML கோப்பை இயக்கவும், நீங்கள் பின்வரும் வெளியீட்டைப் பெறுவீர்கள்:
குறியீட்டில் ஒரு செயல்பாடு என்ன
உள்ளீட்டு பெட்டியில் நீங்கள் சரியான CAPTCHA குறியீட்டை உள்ளிடும்போது, பின்வரும் வெளியீடு காட்டப்படும்:
நீங்கள் உள்ளீடு பெட்டியில் தவறான CAPTCHA குறியீட்டை உள்ளிடும்போது, பின்வரும் வெளியீடு காட்டப்படும்:
உங்கள் வலைத்தளத்தை CAPTCHA களுடன் பாதுகாப்பானதாக்குங்கள்
கடந்த காலங்களில், பல நிறுவனங்கள் மற்றும் வணிகங்கள் தங்கள் வலைத்தளங்களில் CAPTCHA படிவங்கள் இல்லாததால் தரவு மீறல்கள், ஸ்பேம் தாக்குதல்கள் போன்ற பல இழப்புகளைச் சந்தித்தன. இணையதள குற்றவாளிகளிடமிருந்து வலைத்தளத்தைத் தடுக்க பாதுகாப்பு அடுக்கு சேர்க்கப்படுவதால், உங்கள் வலைத்தளத்தில் CAPTCHA வைச் சேர்க்க பரிந்துரைக்கப்படுகிறது.
ஸ்பேம் மற்றும் துஷ்பிரயோகத்திலிருந்து வலைத்தளங்களைப் பாதுகாக்க உதவும் 'reCAPTCHA' என்ற இலவச சேவையையும் கூகுள் அறிமுகப்படுத்தியது. கேப்ட்சா மற்றும் ரீகாப்ட்சா ஒத்ததாகத் தோன்றுகிறது, ஆனால் அவை ஒரே மாதிரியானவை அல்ல. சில நேரங்களில் CAPTCHA கள் பல பயனர்களுக்கு வெறுப்பாகவும் புரிந்துகொள்ள கடினமாகவும் இருக்கும். இருப்பினும், அவை கடினமாக இருப்பதற்கு ஒரு முக்கிய காரணம் இருக்கிறது.
பகிர் பகிர் ட்வீட் மின்னஞ்சல் CAPTCHA கள் எவ்வாறு வேலை செய்கின்றன, அவை ஏன் மிகவும் கடினம்?CAPTCHA கள் மற்றும் reCAPTCHA கள் ஸ்பேமைத் தடுக்கின்றன. அவர்கள் எப்படி வேலை செய்கிறார்கள்? கேப்ட்சாவை ஏன் தீர்க்க மிகவும் கடினமாக இருக்கிறீர்கள்?
அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்- நிரலாக்க
- HTML
- ஜாவாஸ்கிரிப்ட்
- CSS
யுவராஜ் இந்தியாவின் டெல்லி பல்கலைக்கழகத்தில் கணினி அறிவியல் இளங்கலை மாணவர். அவர் முழு ஸ்டாக் வலை மேம்பாட்டில் ஆர்வம் கொண்டவர். அவர் எழுதாதபோது, அவர் பல்வேறு தொழில்நுட்பங்களின் ஆழத்தை ஆராய்கிறார்.
யுவராஜ் சந்திராவின் மேலும்எங்கள் செய்திமடலுக்கு குழுசேரவும்
தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!
குழுசேர இங்கே சொடுக்கவும்