Vahvista Google reCAPTCHA JavaScriptin avulla
Google reCAPTCHA on suosittu valinta verkkosivujen suojaamiseksi roskapostilta ja roboteilta. ReCAPTCHA pyytää käyttäjiä ratkaisemaan yksinkertaisia pulmia, jotka ovat helppoja ihmisille, mutta vaikeita botteille. Tämän seurauksena palvelintilaa voidaan säästää lisäämättä tarpeettomia roskapostitietueita tietokantaan. Se säästää myös aikaa, koska emme koskaan saa roskapostikommentteja postilaatikkoomme.
Kun lisätään Google reCAPTCHA verkkosivustolomakkeisiin, meidän on kirjoitettava koodinpätkä reCAPTCHA: n vastauksen vahvistamiseksi. Jos vastaus on kelvollinen, vain lomakkeen tulisi jatkua.
Vastaus voidaan vahvistaa kahdella tavalla: yksi on palvelinpuoli ja toinen asiakaspuoli. Tässä artikkelissa keskitymme asiakaspuolen validointiin ja tutkimme, miten Google reCAPTCHA voidaan vahvistaa JavaScriptin avulla.
Jos etsit palvelinpuolen vahvistusta, katso artikkeli Google reCAPTCHA: n käyttäminen verkkosivustolomakkeissasi PHP: n kanssa.
Rekisteröi sivusto ja hanki API-avaimet
Aloittamiseksi sinun on rekisteröitävä sivustosi täällä – https://www.google.com/recaptcha/admin.
Valitse vaihtoehto ‘reCAPTCHA v2’, joka antaa "En ole robotti" -valintaruudun.
Kun olet syöttänyt tiedot yllä olevaan lomakkeeseen, saat sivustoavaimesi ja salaisen avaimen. Koska kyseessä on asiakaspuolen vahvistus, tarvitsemme vain sivustoavaimen.
Jos haluat testata sitä paikallisella palvelimella, lisää ‘localhost’ toimialueeksi.
Vahvista Google reCAPTCHA JavaScriptin avulla
Ensin sinun on lisättävä Google reCAPTCHA lomakkeeseesi. Voit tehdä sen käyttämällä alla olevaa koodia.
<form method="post" onsubmit="return submitUserForm();">
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="verifyCaptcha"></div>
<div id="g-recaptcha-error"></div>
<input type="submit" name="submit" value="Submit" />
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>Yllä olevassa koodissa käytän onsubmittapahtumaa. Tämä johtuu siitä, että kun käyttäjä lähettää lomakkeen, meidän on tarkistettava reCAPTCHA-vastaus ja annettava sen sitten lähettää lomake.
Sitten lisäsin verCaptcha ” soittopyynnön nimeksi attribuuttiin ‘data-callback’. Käytän tätä takaisinsoittomenetelmää virhesanoman poistamiseksi, kun vahvistus on läpäisty. Lisäsin myös div: n, jonka tunnus on ‘g-recaptcha-error’, virheilmoituksen näyttämiseksi.
Sinun tulisi korvata paikkamerkki ‘YOUR_SITE_KEY’ todellisella sivustoavaimellasi.
Lopuksi kirjoitetaan JavaScript-koodi, joka käsittelee reCAPTCHA-vastauksen. Ja vastauksen perusteella se näyttää joko virheilmoituksen tai antaa lomakkeen edetä.
<script>
function submitUserForm() {
var response = grecaptcha.getResponse();
if(response.length == 0) {
document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
return false;
}
return true;
}
function verifyCaptcha() {
document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>Menetelmässä submitUserFormsaamme reCAPTCHA-vastauksen käyttämällä grecaptcha.getResponse(). Tämä on sisäänrakennettu toiminto, jonka tarjoaa Google reCAPTCHA -palvelu.
Jos vastaus on virheellinen, se palauttaa arvon 0. Se tarkoittaa, että käyttäjä ei ole vielä validoinut reCAPTCHA: ta. Ja niin, se heittää virheen ja liittyy div: iin, jolla on tunnus ‘g-recaptcha-error’.
Kun Google reCAPTCHA lähettää kelvollisen vastauksen, palautan todellisen arvon, joka sallii lomakkeen edetä.
verifyCaptchaMenetelmä saa puhelun, kun ratkaista kaikki palapelit reCAPTCHA. Poistamme sitten virheilmoituksen, kun pulmapeli on ratkaistu.
Viimeinen koodi on:
<form method="post" onsubmit="return submitUserForm();">
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="verifyCaptcha"></div>
<div id="g-recaptcha-error"></div>
<input type="submit" name="submit" value="Submit" />
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function submitUserForm() {
var response = grecaptcha.getResponse();
if(response.length == 0) {
document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
return false;
}
return true;
}
function verifyCaptcha() {
document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>Toivon, että ymmärrät, miten Google reCAPTCHA vahvistetaan JavaScriptin avulla. Kokeile sitä projektissasi ja jaa ajatuksesi tai ehdotuksesi alla olevassa kommenttiosassa.