Numera är CAPTCHA en integrerad del av webbplatsens säkerhet. Miljontals CAPTCHA -test genomförs online varje dag.

Om du inte har implementerat CAPTCHA -validering på din webbplats kan det skapa ett stort problem för dig och ställa in dig som ett mål för spammare.

---

---

Här är allt du behöver veta om CAPTCHA: er och hur du enkelt kan implementera dem på din webbplats med HTML, CSS och JavaScript.

Vad är CAPTCHA?

CAPTCHA står för 'Helt automatiserat offentligt Turing -test för att berätta för datorer och människor.' Denna term myntades 2003 av Luis von Ahn, Manuel Blum, Nicholas J. Hopper och John Langford. Det är en typ av test-svarstest som används för att avgöra om användaren är människa eller inte.

CAPTCHA: er lägger till säkerhet på webbplatser genom att tillhandahålla utmaningar som är svåra för robotar att utföra men relativt enkla för människor. Till exempel är det svårt för robotar att identifiera alla bilder av en bil från en uppsättning av flera bilder men tillräckligt enkelt för mänskliga ögon.

Idén med CAPTCHA härstammar från Turing -testet. Ett Turing -test är en metod för att testa om en maskin kan tänka som en människa eller inte. Intressant nog kan ett CAPTCHA -test kallas ett 'reverse Turing Test' eftersom datorn i detta fall skapar testet som utmanar människor.

Varför behöver din webbplats CAPTCHA -validering?

CAPTCHA används främst för att förhindra att robotar automatiskt skickar in formulär med skräppost och annat skadligt innehåll. Även företag som Google använder det för att förhindra att deras system utsätts för spamangrepp. Här är några av anledningarna till att din webbplats kan dra nytta av CAPTCHA -validering:

---

---

• CAPTCHA hjälper till att förhindra hackare och robotar från att skräpposta registreringssystemen genom att skapa falska konton. Om de inte förhindras kan de använda dessa konton för obehagliga ändamål.
• CAPTCHAs kan förbjuda brutala inloggningsattacker från din webbplats som hackare använder för att försöka logga in med tusentals lösenord.
• CAPTCHAs kan begränsa robotar från att skräpposta granskningsavsnittet genom att lämna falska kommentarer.
• CAPTCHAs hjälper till att förhindra biljettinflation eftersom vissa människor köper ett stort antal biljetter för återförsäljning. CAPTCHA kan till och med förhindra falska registreringar till gratis evenemang.
• CAPTCHA kan begränsa cyberskurkar från att skräpposta bloggar med tvivelaktiga kommentarer och länkar till skadliga webbplatser.

Det finns många fler anledningar som stöder integrering av CAPTCHA -validering på din webbplats. Du kan göra det med följande kod.

hur man överför google docs till ett annat konto

HTML CAPTCHA -kod

HTML, eller HyperText Markup Language, beskriver strukturen på en webbsida. Använd följande HTML -kod för att strukturera ditt CAPTCHA -verifieringsformulär:

---

---










captcha text



Refresh








Denna kod består huvudsakligen av 7 element:

• : Detta element används för att visa rubriken på CAPTCHA -formuläret.

• : Detta element används för att visa CAPTCHA -texten.
• - Detta element används för att skapa en inmatningsruta för att skriva CAPTCHA.
• : Denna knapp skickar in formuläret och kontrollera om CAPTCHA och den skrivna texten är desamma eller inte.
• : Denna knapp används för att uppdatera CAPTCHA.
• : Detta element används för att visa utmatningen enligt den inmatade texten.
• : Detta är det överordnade elementet som innehåller alla andra element.

CSS- och JavaScript -filer är länkade till denna HTML -sida via och element respektive. Du måste lägga till länk tagg inuti huvud tagga och manus tagg i slutet av kropp .

Du kan också integrera denna kod med befintliga former på din webbplats.

Relaterad: HTML Essentials Cheat Sheet: Taggar, attribut och mer

CSS CAPTCHA -kod

CSS, eller Cascading Style Sheets, används för att utforma HTML -element. Använd följande CSS -kod för att utforma ovanstående HTML -element:

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

Lägg till eller ta bort CSS -egenskaper från den här koden enligt dina önskemål. Du kan också ge ett elegant utseende till formulärbehållaren med hjälp av CSS box-shadow-egenskap .

JavaScript CAPTCHA -kod

JavaScript används för att lägga till funktionalitet på en annars statisk webbsida. Använd följande kod för att lägga till fullständig funktionalitet i CAPTCHA -verifieringsformuläret:

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


Nu har du ett fullt fungerande CAPTCHA -verifieringsformulär! Om du vill titta på hela koden kan du klona GitHub-förråd för detta CAPTCHA-Validator-projekt . När du har klonat förvaret kör du HTML -filen och du får följande utdata:

hur man hittar gamla textmeddelanden

När du anger rätt CAPTCHA -kod i inmatningsrutan visas följande utdata:

När du anger fel CAPTCHA -kod i inmatningsrutan visas följande utdata:

Gör din webbplats säker med CAPTCHA

Tidigare har många organisationer och företag drabbats av stora förluster som dataintrång, spamattacker etc. som ett resultat av att de inte har CAPTCHA -formulär på sina webbplatser. Det rekommenderas starkt att lägga till CAPTCHA på din webbplats, eftersom det lägger till ett säkerhetslager för att förhindra webbplatsen från cyberkriminella.

Google lanserade också en gratis tjänst som kallas 'reCAPTCHA' som hjälper till att skydda webbplatser mot skräppost och missbruk. CAPTCHA och reCAPTCHA verkar lika, men de är inte riktigt samma sak. Ibland känns CAPTCHA frustrerande och svåra att förstå för många användare. Det finns dock en viktig anledning till varför de är svåra.

Dela med sig Dela med sig Tweet E-post Hur fungerar CAPTCHA och varför är de så svåra?

CAPTCHA och reCAPTCHA förhindrar skräppost. Hur fungerar de? Och varför tycker du att CAPTCHA är så svåra att lösa?

Läs Nästa Relaterade ämnen

• Programmering
• HTML
• JavaScript
• CSS

Om författaren Yuvraj Chandra(60 artiklar publicerade)

Yuvraj är en datavetenskaplig grundstudent vid University of Delhi, Indien. Han brinner för Full Stack webbutveckling. När han inte skriver utforskar han djupet i olika tekniker.

Mer från Yuvraj Chandra

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera