{"id":24603,"date":"2021-05-22T11:57:00","date_gmt":"2021-05-22T08:57:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24603"},"modified":"2021-10-17T20:45:21","modified_gmt":"2021-10-17T17:45:21","slug":"vahvista-google-recaptcha-javascriptin-avulla","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/vahvista-google-recaptcha-javascriptin-avulla\/","title":{"rendered":"Vahvista Google reCAPTCHA JavaScriptin avulla"},"content":{"rendered":"

Google reCAPTCHA on suosittu valinta verkkosivujen suojaamiseksi roskapostilta ja roboteilta. ReCAPTCHA pyyt\u00e4\u00e4 k\u00e4ytt\u00e4ji\u00e4 ratkaisemaan yksinkertaisia \u200b\u200bpulmia, jotka ovat helppoja ihmisille, mutta vaikeita botteille. T\u00e4m\u00e4n seurauksena palvelintilaa voidaan s\u00e4\u00e4st\u00e4\u00e4 lis\u00e4\u00e4m\u00e4tt\u00e4 tarpeettomia roskapostitietueita tietokantaan. Se s\u00e4\u00e4st\u00e4\u00e4 my\u00f6s aikaa, koska emme koskaan saa roskapostikommentteja postilaatikkoomme.<\/p>\n

Kun lis\u00e4t\u00e4\u00e4n Google reCAPTCHA verkkosivustolomakkeisiin, meid\u00e4n on kirjoitettava koodinp\u00e4tk\u00e4 reCAPTCHA: n vastauksen vahvistamiseksi. Jos vastaus on kelvollinen, vain lomakkeen tulisi jatkua.<\/p>\n

Vastaus voidaan vahvistaa kahdella tavalla: yksi on palvelinpuoli ja toinen asiakaspuoli. T\u00e4ss\u00e4 artikkelissa keskitymme asiakaspuolen validointiin ja tutkimme, miten Google reCAPTCHA voidaan vahvistaa JavaScriptin avulla.<\/p>\n

Jos etsit palvelinpuolen vahvistusta, katso artikkeli Google reCAPTCHA: n k\u00e4ytt\u00e4minen verkkosivustolomakkeissasi PHP: n kanssa<\/a>.<\/p>\n

Rekister\u00f6i sivusto ja hanki API-avaimet<\/h3>\n

Aloittamiseksi sinun on rekister\u00f6it\u00e4v\u00e4 sivustosi t\u00e4\u00e4ll\u00e4 – <\/a>https:\/\/www.google.com\/recaptcha\/admin<\/a>.<\/p>\n

\"Vahvista<\/a><\/p>\n

Valitse vaihtoehto ’reCAPTCHA v2’, joka antaa "En ole robotti" -valintaruudun.<\/p>\n

Kun olet sy\u00f6tt\u00e4nyt tiedot yll\u00e4 olevaan lomakkeeseen, saat sivustoavaimesi ja salaisen avaimen. Koska kyseess\u00e4 on asiakaspuolen vahvistus, tarvitsemme vain sivustoavaimen.<\/p>\n

Jos haluat testata sit\u00e4 paikallisella palvelimella, lis\u00e4\u00e4 ’localhost’ toimialueeksi.<\/p>\n

Vahvista Google reCAPTCHA JavaScriptin avulla<\/h3>\n

Ensin sinun on lis\u00e4tt\u00e4v\u00e4 Google reCAPTCHA lomakkeeseesi. Voit tehd\u00e4 sen k\u00e4ytt\u00e4m\u00e4ll\u00e4 alla olevaa koodia.<\/p>\n

<form method=\"post\" onsubmit=\"return submitUserForm();\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"g-recaptcha\" data-sitekey=\"YOUR_SITE_KEY\" data-callback=\"verifyCaptcha\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<div id=\"g-recaptcha-error\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script><\/code><\/pre>\n
Yll\u00e4 olevassa koodissa k\u00e4yt\u00e4n onsubmit<\/code>tapahtumaa. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 kun k\u00e4ytt\u00e4j\u00e4 l\u00e4hett\u00e4\u00e4 lomakkeen, meid\u00e4n on tarkistettava reCAPTCHA-vastaus ja annettava sen sitten l\u00e4hett\u00e4\u00e4 lomake.<\/p>\n
Sitten lis\u00e4sin <\/code> verCaptcha ” soittopyynn\u00f6n nimeksi attribuuttiin ’data-callback’. K\u00e4yt\u00e4n t\u00e4t\u00e4 takaisinsoittomenetelm\u00e4\u00e4 virhesanoman poistamiseksi, kun vahvistus on l\u00e4p\u00e4isty. Lis\u00e4sin my\u00f6s div: n, jonka tunnus on ’g-recaptcha-error’, virheilmoituksen n\u00e4ytt\u00e4miseksi.<\/p>\n
Sinun tulisi korvata paikkamerkki ’YOUR_SITE_KEY’ todellisella sivustoavaimellasi.<\/p>\n
Lopuksi kirjoitetaan JavaScript-koodi, joka k\u00e4sittelee reCAPTCHA-vastauksen. Ja vastauksen perusteella se n\u00e4ytt\u00e4\u00e4 joko virheilmoituksen tai antaa lomakkeen edet\u00e4.<\/p>\n
<script>\nfunction submitUserForm() {\n\u00a0\u00a0\u00a0\u00a0var response = grecaptcha.getResponse();\n\u00a0\u00a0\u00a0\u00a0if(response.length == 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '<span style=\"color:red;\">This field is required.<\/span>';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return true;\n}\n\u00a0\nfunction verifyCaptcha() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '';\n}\n<\/script><\/code><\/pre>\n
Menetelm\u00e4ss\u00e4 submitUserForm<\/code>saamme reCAPTCHA-vastauksen k\u00e4ytt\u00e4m\u00e4ll\u00e4 grecaptcha.getResponse()<\/code>. T\u00e4m\u00e4 on sis\u00e4\u00e4nrakennettu toiminto, jonka tarjoaa Google reCAPTCHA -palvelu.<\/p>\n
Jos vastaus on virheellinen, se palauttaa arvon 0. Se tarkoittaa, ett\u00e4 k\u00e4ytt\u00e4j\u00e4 ei ole viel\u00e4 validoinut reCAPTCHA: ta. Ja niin, se heitt\u00e4\u00e4 virheen ja liittyy div: iin, jolla on tunnus ’g-recaptcha-error’.<\/p>\n
Kun Google reCAPTCHA l\u00e4hett\u00e4\u00e4 kelvollisen vastauksen, palautan todellisen arvon, joka sallii lomakkeen edet\u00e4.<\/p>\n
verifyCaptcha<\/code>Menetelm\u00e4 saa puhelun, kun ratkaista kaikki palapelit reCAPTCHA. Poistamme sitten virheilmoituksen, kun pulmapeli on ratkaistu.<\/p>\n
Viimeinen koodi on:<\/p>\n
<form method=\"post\" onsubmit=\"return submitUserForm();\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"g-recaptcha\" data-sitekey=\"YOUR_SITE_KEY\" data-callback=\"verifyCaptcha\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<div id=\"g-recaptcha-error\"><\/div>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form>\n<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script>\n<script>\nfunction submitUserForm() {\n\u00a0\u00a0\u00a0\u00a0var response = grecaptcha.getResponse();\n\u00a0\u00a0\u00a0\u00a0if(response.length == 0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '<span style=\"color:red;\">This field is required.<\/span>';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return true;\n}\n\u00a0\nfunction verifyCaptcha() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('g-recaptcha-error').innerHTML = '';\n}\n<\/script><\/code><\/pre>\n
Toivon, ett\u00e4 ymm\u00e4rr\u00e4t, miten Google reCAPTCHA vahvistetaan JavaScriptin avulla. Kokeile sit\u00e4 projektissasi ja jaa ajatuksesi tai ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n