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

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

Tässä on kaikki mitä sinun tarvitsee tietää CAPTCHA: sta ja kuinka voit helposti ottaa ne käyttöön verkkosivustollasi HTML: n, CSS: n ja JavaScriptin avulla.

Mikä on CAPTCHA?

CAPTCHA tarkoittaa "Täysin automatisoitu julkisen Turingin testi kertoa tietokoneille ja ihmisille paitsi". Tämän termin keksi vuonna 2003 Luis von Ahn, Manuel Blum, Nicholas J. Hopper ja John Langford. Se on eräänlainen haaste-vaste -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 bottien on vaikea suorittaa, mutta suhteellisen helposti ihmisille. Esimerkiksi kaikkien autokuvien tunnistaminen useista kuvista on bottien kannalta vaikeaa, mutta ihmissilmälle tarpeeksi yksinkertaista.

CAPTCHA-idea on peräisin Turingin testistä. Turingin testi on tapa testata, pystyykö kone ajattelemaan ihmisen tavoin vai ei. Mielenkiintoista on, että CAPTCHA-testiä voidaan kutsua "käänteiseksi Turingin testiksi", koska tässä tapauksessa tietokone luo ihmisen haastavan testin.

Miksi verkkosivustosi tarvitsee CAPTCHA-vahvistusta?

CAPTCHA: ita käytetään pääasiassa estämään robotteja lähettämästä lomakkeita automaattisesti roskapostin ja muun haitallisen sisällön kanssa. Jopa Googlen kaltaiset yritykset käyttävät sitä estääkseen järjestelmäänsä roskapostikohtauksia. Tässä on joitain syitä, miksi verkkosivustosi hyötyy CAPTCHA-vahvistuksesta:

• CAPTCHA: t auttavat estämään hakkereita ja robotteja roskapostista rekisteröintijärjestelmiä luomalla väärennettyjä tilejä. Jos heitä ei estetä, he voivat käyttää näitä tilejä turhiin tarkoituksiin.
• CAPTCHA: t voivat kieltää verkkosivustoltasi tapahtuvan jyrkän sisäänkirjautumisen hyökkäykset, joita hakkerit yrittävät kirjautua sisään tuhansilla salasanoilla.
• CAPTCHA: t voivat estää botteja lähettämästä tarkistusosiosta roskapostia antamalla vääriä kommentteja.
• CAPTCHA auttaa estämään lipun inflaatiota, koska jotkut ihmiset ostavat suuren määrän lippuja jälleenmyyntiin. CAPTCHA voi jopa estää väärät rekisteröinnit ilmaisiin tapahtumiin.
• CAPTCHA: t voivat rajoittaa verkkokäyttäjiä roskapostin lähettämisessä kavereilla kommenteilla ja linkeillä haitallisille verkkosivustoille.

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

HTML CAPTCHA -koodi

HTML tai HyperText Markup Language kuvaa verkkosivun rakennetta. Käytä seuraavaa HTML-koodia rakentaaksesi CAPTCHA-vahvistuslomakkeen:

Captcha Validator käyttää HTML: ää, CSS: ää ja JavaScriptiä



captcha-teksti




virkistää

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ökenttä CAPTCHA: n kirjoittamiseksi.
• : Tämä painike lähettää lomakkeen ja tarkistaa, ovatko CAPTCHA ja kirjoitettu teksti samat vai eivät.
• : Tätä painiketta käytetään CAPTCHA: n päivittämiseen.
• : Tätä elementtiä käytetään näyttämään tulos syötetyn tekstin mukaan.
• : Tämä on pääelementti, joka sisältää kaikki muut elementit.

CSS- ja JavaScript-tiedostot on linkitetty tälle HTML-sivulle ja vastaavasti. Sinun on lisättävä linkki -tunniste pää ja käsikirjoitus -tagi tagin lopussa runko.

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

Liittyvät: HTML Essentials -huijausarkki: Tunnisteet, määritteet ja paljon muuta

CSS CAPTCHA -koodi

CSS: ää tai CSS-tyylitaulukoita käytetään HTML-elementtien muotoiluun. Käytä seuraavaa CSS-koodia muotoillaksesi yllä olevat HTML-elementit:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
runko {
taustaväri: # 232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
korkeus: 200px;
leveys: 250px;
taustaväri: # 2d3748;
näyttö: joustava;
kohdista tuotteet: keskellä;
perustella sisältö: keskus;
taipumissuunta: sarake;
}
#captchaHeading {
väri valkoinen;
}
#captcha {
alareuna: 1em;
kirjasinkoko: 30 kuvapistettä;
kirjainten väli: 3 kuvapistettä;
väri: # 08e5ff;
}
.center {
näyttö: joustava;
taipumissuunta: sarake;
kohdista tuotteet: keskellä;
}
#submitButton {
yläreuna: 2em;
alareuna: 2em;
taustaväri: # 08e5ff;
reunus: 0px;
fontin paino: lihavoitu;
}
#refreshButton {
taustaväri: # 08e5ff;
reunus: 0px;
fontin paino: lihavoitu;
}
#tekstilaatikko {
korkeus: 25px;
}
.incorrectCaptcha {
väri: # FF0000;
}
.correctCaptcha {
väri: # 7FFF00;
}

Lisää tai poista CSS-ominaisuuksia tästä koodista mieltymystesi mukaan. Voit myös antaa tyylikkään ilmeen lomakesäiliöön käyttämällä CSS box-shadow -ominaisuus.

JavaScript CAPTCHA -koodi

JavaScript käytetään toiminnallisuuden lisäämiseen muuten staattiselle verkkosivulle. Lisää täydellinen toiminto CAPTCHA-vahvistuslomakkeeseen seuraavalla koodilla:

// document.querySelector () käytetään elementin valitsemiseen dokumentista sen ID: n avulla
anna captchaText = document.querySelector ('# captcha');
anna userText = document.querySelector ('# textBox');
anna submitButton = document.querySelector ('# submitButton');
anna tuloksen = document.querySelector ('# output');
anna refreshButton = document.querySelector ('# refreshButton');
// alphaNums sisältää merkit, joilla haluat luoda CAPTCHA: n
olkoon alfaNums = ['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'];
anna tyhjänArr = [];
// Tämä silmukka tuottaa satunnaisen 7 merkin merkkijonon alphaNums-koodilla
// Lisäksi tämä merkkijono näytetään CAPTCHA: na
for (olkoon i = 1; i <= 7; i ++) {
emptyArr.push (alfaNumit [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Tätä tapahtumakuuntelijaa stimuloidaan aina, kun käyttäjä painaa "Enter" -painiketta
// "Oikea!" tai "Virheellinen, yritä uudelleen" -viesti on
// näkyy sen jälkeen, kun syötetty teksti on vahvistettu CAPTCHA: lla
userText.addEventListener ('keyup', function (e) {
// Enter-painikkeen avainkoodi on 13
if (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Oikea!";
} muu {
output.classList.add ("falseCaptcha");
output.innerHTML = "Virheellinen, yritä uudelleen";
}
}
});
// Tätä tapahtumakuuntelijaa stimuloidaan aina, kun käyttäjä napsauttaa Lähetä-painiketta
// "Oikea!" tai "Virheellinen, yritä uudelleen" -viesti on
// näkyy sen jälkeen, kun syötetty teksti on vahvistettu CAPTCHA: lla
submitButton.addEventListener (napsauta, funktio () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Oikea!";
} muu {
output.classList.add ("falseCaptcha");
output.innerHTML = "Virheellinen, yritä uudelleen";
}
});
// Tätä tapahtumakuuntelijaa stimuloidaan aina, kun käyttäjä painaa "Päivitä" -painiketta
// Uusi satunnainen CAPTCHA luodaan ja näytetään, kun käyttäjä napsauttaa "Päivitä" -painiketta
refreshButton.addEventListener (napsauta, toiminto () {
userText.value = "";
anna refreshArr = [];
for (olkoon j = 1; j <= 7; j ++) {
refreshArr.push (alfaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

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

Kun syötät oikean CAPTCHA-koodin syöttöruutuun, seuraava tulos näkyy:

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

Tee verkkosivustostasi turvallinen CAPTCHA: illa

Aiemmin monet organisaatiot ja yritykset ovat kärsineet suuria menetyksiä, kuten tietorikkomukset, roskapostikohtaukset jne. seurauksena siitä, ettei verkkosivustoillaan ole CAPTCHA-lomakkeita. On erittäin suositeltavaa lisätä CAPTCHA verkkosivustollesi, koska se lisää tietoturvakerroksen estääkseen verkkosivustoa tietoverkkorikollisilta.

Google lanseerasi 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: t tuntevat turhauttavaa ja vaikeasti ymmärrettävää monille käyttäjille. On kuitenkin tärkeä syy siihen, miksi heidät tehdään vaikeiksi.

Kuinka CAPTCHAt toimivat ja miksi ne ovat niin vaikeita?

CAPTCHA ja reCAPTCHA estävät roskapostia. Kuinka ne toimivat? Ja miksi CAPTCHA: t ovat niin vaikeita ratkaista?

Lue seuraava

Kirjailijasta