Luo CAPTCHA -vahvistuslomake HTML: n, CSS: n ja JavaScriptin avulla

Luo CAPTCHA -vahvistuslomake HTML: n, CSS: n ja JavaScriptin avulla

Nykyään CAPTCHA: t ovat olennainen osa verkkosivujen turvallisuutta. Miljoonat CAPTCHA -testit suoritetaan päivittäin verkossa.





Jos et ole ottanut käyttöön CAPTCHA -validointia verkkosivustollasi, se voi aiheuttaa sinulle suuren ongelman ja asettaa sinut roskapostittajien kohteeksi.



Tässä on kaikki mitä sinun tarvitsee tietää CAPTCHA -ohjelmista ja kuinka voit ottaa ne helposti käyttöön verkkosivustollasi HTML-, CSS- ja JavaScript -koodien avulla.





Mikä on CAPTCHA?

CAPTCHA tarkoittaa 'täysin automatisoitua julkista Turing -testiä, joka kertoo tietokoneille ja ihmisille.' Tämän termin loivat vuonna 2003 Luis von Ahn, Manuel Blum, Nicholas J.Hopper ja John Langford. Se on eräänlainen haaste-vastaus-testi, jota käytetään määrittämään, onko käyttäjä ihminen vai ei.

CAPTCHA: t lisäävät verkkosivustojen turvallisuutta tarjoamalla haasteita, joita botit voivat suorittaa vaikeasti, mutta suhteellisen helposti ihmisille. Esimerkiksi kaikkien autokuvien tunnistaminen useista kuvista on botille vaikeaa, mutta tarpeeksi yksinkertaista ihmissilmälle.



CAPTCHA -idea on peräisin Turingin testistä. Turing -testi on menetelmä testata, kykeneekö kone ajattelemaan kuin ihminen vai ei. Mielenkiintoista on, että CAPTCHA -testiä voidaan kutsua käänteiseksi Turing -testiksi, koska tässä tapauksessa tietokone luo testin, joka haastaa ihmiset.

Miksi verkkosivustosi tarvitsee CAPTCHA -vahvistuksen?

CAPTCHA -ohjelmia käytetään pääasiassa estämään robotteja lähettämästä automaattisesti roskapostia ja muuta haitallista sisältöä sisältäviä lomakkeita. Jopa Googlen kaltaiset yritykset käyttävät sitä estääkseen järjestelmäänsä roskapostista. Seuraavassa on muutamia syitä, miksi verkkosivustosi hyötyy CAPTCHA -validoinnista:



  • CAPTCHAs auttaa estämään hakkereita ja robotteja roskapostittamasta rekisteröintijärjestelmiä luomalla vääriä tilejä. Jos heitä ei estetä, he voivat käyttää kyseisiä tilejä ilkeisiin tarkoituksiin.
  • CAPTCHA: t voivat kieltää raa'an pakotteen kirjautumishyökkäykset verkkosivustoltasi, joita hakkerit käyttävät yrittäessään kirjautua sisään tuhansilla salasanoilla.
  • CAPTCHA: t voivat estää botteja lähettämästä roskapostia tarkastusosioon tarjoamalla vääriä kommentteja.
  • CAPTCHA auttaa estämään lippujen inflaation, koska jotkut ihmiset ostavat suuren määrän lippuja jälleenmyyntiin. CAPTCHA voi jopa estää vääriä rekisteröintejä ilmaisiin tapahtumiin.
  • CAPTCHA -ohjelmat voivat rajoittaa tietoverkkorikollisia lähettämästä roskapostia blogeihin, joiden kommentit ja linkit ovat haitallisia.

On monia muita syitä, jotka tukevat CAPTCHA -validoinnin integrointia verkkosivustoosi. Voit tehdä sen seuraavalla koodilla.

muuntaa kuvan vektoriksi kuvittajaan

HTML CAPTCHA -koodi

HTML tai HyperText Markup Language kuvaa verkkosivun rakennetta. Rakenna CAPTCHA -vahvistuslomake seuraavan HTML -koodin avulla:












captcha text



Refresh






Tämä koodi koostuu pääasiassa 7 elementistä:

  • : Tätä elementtiä käytetään CAPTCHA -lomakkeen otsikon näyttämiseen.

  • : Tätä elementtiä käytetään CAPTCHA -tekstin näyttämiseen.
  • - Tätä elementtiä käytetään luomaan syöttölaatikko CAPTCHA: n kirjoittamista varten.
  • : Tämä painike lähettää lomakkeen ja tarkistaa, onko CAPTCHA ja kirjoitettu teksti sama vai ei.
  • : Tällä painikkeella päivitetään CAPTCHA.
  • : Tätä elementtiä käytetään tulosteen näyttämiseen syötetyn tekstin mukaisesti.
  • : Tämä on pääelementti, joka sisältää kaikki muut elementit.

CSS- ja JavaScript -tiedostot linkitetään tälle HTML -sivulle ja elementtejä. Sinun on lisättävä linkki tunnisteen sisällä pää tunniste ja käsikirjoitus -tunniste lopussa vartalo .

Voit myös integroida tämän koodin verkkosivustosi olemassa oleviin muotoihin.

Aiheeseen liittyviä: HTML Essentials -huijaussivu: Tunnisteet, attribuutit ja paljon muuta



CSS CAPTCHA -koodi

CSS: ää tai CSS -tyylitaulua käytetään HTML -elementtien muotoiluun. Käytä seuraavaa CSS -koodia yllä olevien HTML -elementtien muotoiluun:

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

Lisää tai poista CSS -ominaisuudet tästä koodista haluamallasi tavalla. Voit myös antaa lomakekotelolle tyylikkään ilmeen käyttämällä CSS box-shadow -ominaisuus .

JavaScript CAPTCHA -koodi

JavaScript käytetään toiminnallisuuden lisäämiseen muuten staattiselle verkkosivulle. Käytä seuraavaa koodia lisätäksesi täydelliset toiminnot CAPTCHA -vahvistuslomakkeeseen:

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

Nyt sinulla on täysin toimiva CAPTCHA -vahvistuslomake! Jos haluat tarkastella koko koodia, voit kloonata Tämän CAPTCHA-validointiprojektin GitHub-arkisto . Kun arkisto on kloonattu, suorita HTML -tiedosto ja saat seuraavan tuloksen:

miten voin vapauttaa tilaa omenakellossani

Kun syötät oikean CAPTCHA -koodin syöttökenttään, seuraava tulos tulee näkyviin:

Kun syötät väärän CAPTCHA -koodin syöttökenttään, seuraava tulos tulee näkyviin:

Tee sivustostasi suojattu CAPTCHA -laitteilla

Aiemmin monet organisaatiot ja yritykset ovat kärsineet suuria tappioita, kuten tietomurtoja, roskapostihyökkäyksiä jne., Koska heillä ei ole CAPTCHA -lomakkeita verkkosivuillaan. On erittäin suositeltavaa lisätä CAPTCHA verkkosivustollesi, koska se lisää suojakerroksen, joka estää verkkosivustoa rikollisilta.

Google käynnisti myös ilmaisen reCAPTCHA -palvelun, joka auttaa suojaamaan verkkosivustoja roskapostilta ja väärinkäytöltä. CAPTCHA ja reCAPTCHA näyttävät samanlaisilta, mutta ne eivät ole aivan sama asia. Joskus CAPTCHA -laitteet tuntuvat turhauttavilta ja vaikeilta ymmärtää monille käyttäjille. On kuitenkin tärkeä syy siihen, miksi heistä tehdään vaikeita.

Jaa Jaa Tweet Sähköposti Miten CAPTCHA -laitteet toimivat ja miksi ne ovat niin vaikeita?

CAPTCHA ja reCAPTCHA estävät roskapostin. Miten ne toimivat? Ja miksi CAPTCHA -ratkaisut ovat mielestäsi niin vaikeita ratkaista?

Lue seuraava Liittyvät aiheet
  • Ohjelmointi
  • HTML
  • JavaScript
  • CSS
Kirjailijasta Yuvraj Chandra(60 artikkelia julkaistu)

Yuvraj on tietojenkäsittelytieteen perusopiskelija Delhin yliopistossa Intiassa. Hän on intohimoinen Full Stack Web -kehityksestä. Kun hän ei kirjoita, hän tutkii eri tekniikoiden syvyyttä.

Lisää Yuvraj Chandralta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi