Numera är CAPTCHA en integrerad del av webbplatsens säkerhet. Miljoner 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 och hur du enkelt kan implementera dem på din webbplats med HTML, CSS och JavaScript.

Vad är CAPTCHA?

CAPTCHA står för "Helt automatiserad offentlig 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 utmaning-svar-test som används för att avgöra om användaren är mänsklig eller inte.

CAPTCHA lägger till säkerhet på webbplatser genom att tillhandahålla utmaningar som är svåra för bots att utföra men relativt lätt för människor. Det är till exempel svårt för robotar att identifiera alla bilder från en bil från en uppsättning med 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 kan ett CAPTCHA-test kallas ett "omvänd Turing-test" eftersom i detta fall skapar datorn testet som utmanar människor.

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

CAPTCHA används främst för att förhindra att bots automatiskt skickar formulär med skräppost och annat skadligt innehåll. Även företag som Google använder det för att förhindra deras system från skräppostattacker. 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 bots från att skräpposta registreringssystemen genom att skapa falska konton. Om de inte förhindras kan de använda dessa konton för onödiga ändamål.
• CAPTCHAs kan förbjuda brute force-inloggningsattacker från din webbplats som hackare använder för att försöka logga in med tusentals lösenord.
• CAPTCHA kan begränsa bots från att skräpposta granskningssektionen genom att ge 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 gratisevenemang.
• CAPTCHA kan begränsa cyber-skurkar 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.

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-valideringsformulär:

Captcha Validator med HTML, CSS och JavaScript



captcha text




Uppdatera

Denna kod består huvudsakligen av 7 element:

• : Detta element används för att visa rubriken för 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.
• : Den här knappen skickar in formuläret och kontrollerar om CAPTCHA och den skrivna texten är desamma eller inte.
• : Den här knappen används för att uppdatera CAPTCHA.
• : Detta element används för att visa utdata 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. Du måste lägga till länk tagg inuti huvud tagg och manus tagg i slutet av kropp.

Du kan också integrera den här koden 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');
kropp {
bakgrundsfärg: # 232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
höjd: 200px;
bredd: 250px;
bakgrundsfärg: # 2d3748;
display: flex;
align-items: center;
justify-content: center;
flexriktning: kolumn;
}
#captchaHeading {
färg vit;
}
#captcha {
marginal botten: 1 em;
teckenstorlek: 30 pixlar;
bokstavsavstånd: 3 pixlar;
färg: # 08e5ff;
}
.Centrum {
display: flex;
flexriktning: kolumn;
align-items: center;
}
#skickaknapp {
margin-top: 2em;
marginal-botten: 2em;
bakgrundsfärg: # 08e5ff;
gräns: 0px;
font-vikt: fet;
}
#refreshButton {
bakgrundsfärg: # 08e5ff;
gräns: 0px;
font-vikt: fet;
}
#textruta {
höjd: 25px;
}
.incorrectCaptcha {
färg: # FF0000;
}
.correctCaptcha {
färg: # 7FFF00;
}

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

JavaScript CAPTCHA-kod

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

// document.querySelector () används för att välja ett element från dokumentet med dess ID
låt captchaText = document.querySelector ('# captcha');
låt userText = document.querySelector ('# textBox');
låt submitButton = document.querySelector ('# submitButton');
låt output = document.querySelector ('# output');
låt refreshButton = document.querySelector ('# refreshButton');
// alphaNums innehåller de tecken som du vill skapa CAPTCHA med
låt 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'];
låt emptyArr = [];
// Denna slinga genererar en slumpmässig sträng på 7 tecken med alphaNums
// Vidare visas denna sträng som en CAPTCHA
för (låt i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Den här evenemangslyssnaren stimuleras när användaren trycker på "Enter" -knappen
// "Korrekt!" eller "Fel, försök igen" meddelandet är
// visas efter validering av inmatningstexten med CAPTCHA
userText.addEventListener ('keyup', funktion (e) {
// Nyckelkodvärdet för "Enter" -knappen är 13
if (e.keyCode 13) {
om (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Rätt!";
} annat {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "Fel, försök igen";
}
}
});
// Denna lyssnare stimuleras när användaren klickar på knappen "Skicka"
// "Korrekt!" eller "Fel, försök igen" meddelandet är
// visas efter validering av inmatningstexten med CAPTCHA
submitButton.addEventListener ('klicka', funktion () {
om (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Rätt!";
} annat {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "Fel, försök igen";
}
});
// Den här evenemangslyssnaren stimuleras när användaren trycker på "Uppdatera" -knappen
// En ny slumpmässig CAPTCHA genereras och visas efter att användaren klickar på "Uppdatera" -knappen
refreshButton.addEventListener ('klicka', funktion () {
userText.value = "";
låt refreshArr = [];
för (låt j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Nu har du ett fullt fungerande CAPTCHA-valideringsformulär! Om du vill titta på hela koden kan du klona GitHub-förvar för detta CAPTCHA-Validator-projekt. Efter kloning av förvaret kör du HTML-filen så får du följande utdata:

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 lidit stora förluster som dataintrång, skräppostattacker etc. som ett resultat av att inte ha CAPTCHA-formulär på sina webbplatser. Det rekommenderas starkt att lägga till CAPTCHA på din webbplats, eftersom det lägger till ett säkerhetsskikt för att förhindra webbplatsen från cyberbrottslingar.

Google lanserade också en gratis tjänst som heter "reCAPTCHA" som hjälper till att skydda webbplatser från skräppost och missbruk. CAPTCHA och reCAPTCHA verkar lika, men de är inte helt samma sak. Ibland känns CAPTCHAs frustrerande och svåra att förstå för många användare. Även om det finns en viktig anledning till varför de är svåra.

Hur fungerar CAPTCHAs 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

Om författaren