🛡 WooCommerce-kassan suojaus: 2 tapaa lisätä CAPTCHA 15 minuutissa

Roskapostitilauksia, botteja ostoskorissa ja väärennettyjä rekisteröitymisiä, jokainen WooCommerce-kauppa käy tämän läpi. Kukaan ei halua siivota tietokantaa roskatilauksista käsin, ja jokainen kymmenes bottiliidi on hukattua aikaa ja rahaa.

CAPTCHA ratkaisee ongelman kymmenen minuutin asennuksella. Ei paisuneita kaikki-yhdessä-lisäosia, ei ytimen hakkerointia.

Alla on kaksi toimivaa tapaa lisätä varmennus kassalle: ilmaisella lisäosalla ja koodilla functions.php-tiedostossa. Lisäksi bonus: kirjautumissivun suojaaminen samassa viidessä minuutissa.

Mikä CAPTCHA on ja miksi tarvitset sen kassalla

💡 Pikakatsaus:

• Mikä CAPTCHA on ja millaisia tyyppejä on olemassa, lyhyesti, ei teoriaa teorian vuoksi
• Kaksi asennustapaa: ilmaisella reCAPTCHA for WooCommerce -lisäosalla ja koodilla
• Bonus: CAPTCHA ylläpidon kirjautumissivulla, brute-force-suojaus
• Yleiset asennusvirheet ja miten ne vältetään

CAPTCHA (Completely Automated Public Turing Test to Tell Computers and Humans Apart) on testi, joka erottaa oikean kävijän botista. Käyttäjä rastittaa "En ole robotti" -ruudun, ratkaisee yksinkertaisen kuva- tai pulmatehtävän, ja vasta sitten lomake lähetetään. Botti ei pysty läpäisemään tätä: sen pitäisi ymmärtää tehtävä, johon sitä ei ole koulutettu.

WooCommerce-kaupalle CAPTCHA kassalla ei ole ylellisyyttä, vaan välttämättömyys. Roskapostibotit voivat täyttää tilauslomakkeen kentät ja klikata "Lähetä": kaupan omistaja saa kymmeniä tyhjiä tilauksia hallintapaneeliin tukkimaan CRM:ää. Todellinen tapaus: kun reCAPTCHA otettiin käyttöön testisivustolla, väärennettyjen tilausten määrä putosi nollaan 24 tunnissa, ilman suodattimia, ilman IP-estoja, ilman .htaccess-muokkauksia.

Kuusi pääasiallista CAPTCHA-tyyppiä: tekstipohjainen (vääristyneitä kirjaimia ja numeroita), äänipohjainen (näkövammaisille käyttäjille), matemaattinen (yksinkertaisia tehtäviä kuten "3 + 4"), kuvapohjainen (valitse kaikki kuvat, joissa on liikennevalo), pulmapohjainen (raahaa pala paikalleen) ja näkymätön (reCAPTCHA v3, toimii taustalla, analysoi käyttäjän käyttäytymistä). Kaupalle reCAPTCHA v2 (valintaruutu) tai näkymätön v3 toimii parhaiten, ne eivät ärsytä asiakkaita mutta estävät valtaosan boteista.

Lisäosakatsaus: mitä asentaa WooCommerceen

Markkinoilla on kolme pääasiallista lisäosaa, jotka hoitavat tämän tehtävän. Käydään lyhyesti läpi, mikä sopii mihinkin tilanteeseen.

ReCAPTCHA for WooCommerce (RelyWP)

Ilmainen, ei lainkaan maksullista versiota. Tukee reCAPTCHA v2:ta kassalla, kirjautumisessa, rekisteröitymisessä ja salasanan palautussivulla. Yli 40 000 aktiivista asennusta, arvosana 4,5 WordPress.orgissa. Asentuu minuutissa: Googlen API-avaimet → rastita lomakkeen ruudut → valmista. Huono puoli: vain v2, ei v3-tukea. Jos tarvitset näkymätöntä varmennusta, katso vaihtoehtoja.

Advanced Google reCAPTCHA (WebFactory)

Yli 200 000 asennusta, arvosana 4,8 WordPress.orgissa. Kattaa WooCommerce-kassan, Easy Digital Downloadsin, BuddyPressin ja tavalliset WordPress-lomakkeet. Tukee v2:ta ja v3:a, ja varalla on matemaattinen CAPTCHA. Ilmainen versio kattaa 90% tarpeista; PRO-versio lisää maakohtaisen eston. Vivahteet: käyttöliittymä vaatii totuttelua (vanhan mallin välilehdet), ja arvosteluissa mainitaan satunnaisia ristiriitoja räätälöityjen teemojen kanssa.

ReCaptcha by BestWebSoft

Ilmainen versio + maksullinen versio hintaan $24 vuodessa. v2, v3 ja enterprise-tila. Widgetin koon ja sijainnin asetukset, monikielinen, RTL. Huono puoli: sidottu Googlen palveluihin, mikä voi olla kriittistä GDPR-herkissä projekteissa. Mutta toimivana työkaluna se on luotettava ja taistelutestattu kymmenissä live-projekteissa.

Tapa 1: CAPTCHA lisäosalla (ei koodia)

Yksinkertaisin reitti. Otetaan reCAPTCHA for WooCommerce, se on ilmainen, kevyt eikä vaadi temppuilua.

Vaihe 1: Asennus ja aktivointi

Siirry WordPressin hallintaan: Lisäosat → Lisää uusi. Kirjoita hakupalkkiin recaptcha for woo.

Löysit sen, klikkaa Asenna nyt, odota pari sekuntia ja aktivoi.

Aktivoinnin jälkeen reCAPTCHA WooCommerce -kohta ilmestyy Asetukset-valikkoon.

Vaihe 2: Googlen API-avaimet

Siirry reCAPTCHA-avainten luontisivulle. Täytä:

• Label, mikä tahansa nimi (esim. "Oma kauppa")
• reCAPTCHA type, v2 ("En ole robotti" -valintaruutu)
• Domains, verkkokauppasi verkkotunnus ilman https://-alkua

Klikkaa Submit, ja järjestelmä antaa sinulle Site Keyn ja Secret Keyn.

Vaihe 3: Lisäosan asetukset

Kopioi avaimet ja liitä ne lisäosan kenttiin: Asetukset → reCAPTCHA WooCommerce.

Vieritä alas WooCommerce Forms -osioon. Valitse WooCommerce Checkout -valintaruutu (ja Login/Register, jos haluat suojata sisäänkirjautumisen).

Tallenna muutokset.

Vaihe 4: Varmistus

Samalla asetussivulla on Test API Response -painike. Klikkaa sitä, ja jos avaimet ovat oikein, näet vihreän tilan.

Valmista. Nyt captcha ilmestyy kassasivulle ennen "Tilaa"-painiketta. Testaa sitä incognito-tilassa, bottitarkistuksen pitäisi tulla näkyviin.

Tapa 2: CAPTCHA koodilla (ei ylimääräisiä lisäosia)

Jos et halua asentaa toista lisäosaa, tässä on koodinpätkä, joka lisää reCAPTCHAn kassalle functions.php-tiedoston kautta.

Vaihe 1: Valmistelu

Ennen kuin muokkaat mitään koodia, tee täysi varmuuskopio sivustosta. Muokkaamme lapsiteeman functions.php-tiedostoa tai käytämme Code Snippets-lisäosaa, joka on turvallisempi: koodivirhe ei kaada koko sivustoa, vaan koodinpätkä yksinkertaisesti poistetaan käytöstä.

Vaihe 2: Koodi

Alla on kaksi PHP-funktiota. Ensimmäinen näyttää reCAPTCHA-widgetin kassalla, toinen vahvistaa Googlen vastauksen, kun tilaus lähetetään.

1
/**
2
 * Display reCAPTCHA on the WooCommerce checkout page
3
 */
4
function doublee_show_me_the_checkout_captcha($checkout) {
5
    echo '<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>';
6
}
7
add_action('woocommerce_checkout_order_review', 'doublee_show_me_the_checkout_captcha', 18);
8
 
9
/**
10
 * Verify reCAPTCHA response during checkout
11
 */
12
function doublee_process_recaptcha() {
13
    $postdata = $_POST['g-recaptcha-response'];
14
    $verified_recaptcha = file_get_contents(
15
        'https://www.google.com/recaptcha/api/siteverify?secret=YOUR_SECRET_KEY&response=' . $postdata
16
    );
17
    $response = json_decode($verified_recaptcha);
18
    if (!$response->success) {
19
        wc_add_notice('Please verify that you are not a robot', 'error');
20
    }
21
}
22
add_action('woocommerce_checkout_process', 'doublee_process_recaptcha');

Mitä tässä tapahtuu:

• woocommerce_checkout_order_review, koukku, joka laukeaa, kun tilauslohko renderöidään kassalla. Koukutamme siihen tulostaaksemme <div>-elementin, jossa on data-sitekey-attribuutti (se on Site Key Google-konsolista).
• woocommerce_checkout_process, validointikoukku, joka laukeaa tilauksen lähetyksessä. Funktio lähettää captcha-vastauksen Googlen palvelimelle siteverify-päätepisteen kautta, purkaa JSONin, ja jos vahvistus epäonnistuu, lisää virheen käyttäen wc_add_notice()-funktiota, WooCommercen vakiomekanismia.
• Jos allow_url_fopen on poistettu käytöstä hotellissasi (file_get_contents-funktio ei toimi URL-osoitteille), korvaa se wp_remote_get()-funktiolla, joka toimii cURL:n kautta eikä ole riippuvainen php.ini-asetuksista.

Vaihe 3: Lisää ja testaa

Lisää koodi Code Snippets-lisäosan kautta tai lapsiteemasi functions.php-tiedostoon ja tallenna.

Tallennuksen jälkeen käy kassasivulla incognito-tilassa, reCAPTCHA-widgetin pitäisi ilmestyä näkyviin. Kokeile lähettää tilaus valitsematta valintaruutua: saat "Vahvista, ettet ole robotti" -virheen.

Bonus: CAPTCHA kirjautumissivulla

Kassa ei ole ainoa kipupiste. Brute force -hyökkäykset /wp-login.php- ja /my-account/-osoitteisiin jatkuvat ympäri vuorokauden, jopa pienissä verkkokaupoissa. Sama reCAPTCHA for WooCommerce -lisäosa lukitsee kirjautumislomakkeen muutamalla klikkauksella.

Mene kohtaan Asetukset → reCAPTCHA WooCommerce, WooCommerce Forms -osioon ja ota käyttöön Login:

Tallenna, niin /my-account/ on suojattu. Jos sinun täytyy lukita myös /wp-login.php, tämä sama lisäosa tukee WordPress-lomakkeita: sama logiikka, valitse vain WordPress Login Form.

Tyypilliset ongelmat ja niiden ratkaisut

• CAPTCHA ei ilmesty kassalle. Tarkista avaimesi: Site Keyn ja Secret Keyn on oltava v2-versiosta ("En ole robotti" -valintaruutu), ei v3:sta. Jos versio ei täsmää, widget ei yksinkertaisesti renderöidy.
• CAPTCHA näkyy kahteen kertaan. Todennäköisesti sinulla on kaksi reCAPTCHA-lisäosaa aktiivisena samanaikaisesti (esimerkiksi yksi teemassa, toinen erikseen). Poista kaksoiskappale käytöstä.
• "Invalid key" -virhe API-testin aikana. Joko näppäilyvirhe avaimia kopioidessa tai avaimet on luotu eri verkkotunnukselle. Luo avaimet uudelleen ja tarkista verkkotunnus Google-konsolista.
• Ristiriita mukautetun kassapohjan kanssa. Vaihda oletusteemaan (Storefront) ja tarkista: jos CAPTCHA ilmestyy, ongelma on teemasi hookeissa. Ratkaisu: koodiin lisätty mukautettu hook (Menetelmä 2), joka on sidottu omaan pohjaasi.
• Kassa ei lataudu CAPTCHA:n käyttöönoton jälkeen. Tyhjennä välimuisti (lisäosa + selain), poista JS-minimointi käytöstä testin ajaksi; ristiriidat johtuvat useimmiten aggressiivisesta skriptien optimoinnista.
• Asiakkaat valittavat, että CAPTCHA hylkää oikeita ihmisiä. Laske herkkyyttä reCAPTCHA-asetuksissa tai vaihda v2-valintaruutuun; se on hellävaraisempi kuin v3 eikä estä "epäilyttävän" käyttäytymismallin perusteella.

⁉️🤔 Usein kysytyt kysymykset

Tarvitaanko CAPTCHA kassalla, jos roskapostin estolisäosa on jo asennettu?

Roskapostin estolisäosat, kuten Akismet, suojaavat kommentteja ja yhteydenottolomakkeita, mutta eivät WooCommerce-kassaa. Väärennettyjä tilauksia tekevät botit ohittavat vakiosuodattimet; ne eivät tarvitse kommenttikenttiä, vaan täyttävät itse tilauslomakkeen. CAPTCHA paikkaa tämän aukon.

Mikä reCAPTCHA-versio kannattaa valita, v2 vai v3?

Verkkokaupalle suosittelemme v2-valintaruutua: kävijä rastittaa yhden ruudun ja tilaus menee läpi. v3 toimii taustalla ja voi estää oikean asiakkaan, jos tämän käyttäytymismalli vaikuttaa järjestelmästä "epäilyttävältä", ja kassalla jokainen asiakas on tärkeä.

Voinko suojata CAPTCHA:lla vain vieraskassan ja päästää kirjautuneet käyttäjät läpi?

Kyllä. reCAPTCHA for WooCommerce -lisäosassa WooCommerce Checkout -valintaruutu ottaa CAPTCHA:n käyttöön kaikille. Päästääksesi kirjautuneet käyttäjät läpi sinun on lisättävä ehto koodiin (Menetelmä 2): kääri hook if (!is_user_logged_in()) -ehdon sisään. Ilman koodia onnistuu vain lisäosilla, joissa on ehdollinen logiikka, kuten Advanced Google reCAPTCHA PRO.

Vaikuttaako CAPTCHA kassan latausnopeuteen?

Ei merkittävästi. reCAPTCHA-skripti latautuu asynkronisesti ja vain sivuilla, joilla lomake todella näytetään. Ei ylimääräistä kuormaa koko sivustolle. Käytännössä kassan nopeusero ennen ja jälkeen on 100-200 ms sisällä.

Yhteenveto

CAPTCHA:n lisääminen WooCommerce-kassalle on 15 minuutin tehtävä, ja vaikutus on selkeä. Ei roskapostitilauksia, ei manuaalista tietokannan siivousta, ei botteja ostoputkessa.

Jos et halua asentaa ylimääräisiä lisäosia, käytä toista menetelmää koodin kanssa. Se lisää tasan kaksi funktiota functions.php-tiedostoon eikä vaadi päivityksiä. Jos pidät "asenna ja unohda" -lähestymistavasta, reCAPTCHA for WooCommerce: ilmainen, 40 tuhatta asennusta, jatkuvat päivitykset ja Block Checkout -tuki suoraan paketista.

Varmista, että CAPTCHA toimii kaikilla laitteilla: avaa kassa puhelimella ja tietokoneella incognito-tilassa. Jos widget siirtyy mobiilissa, säädä CSS-säiliötä tai vaihda widgetin koko Compact-tilaan Google reCAPTCHA -konsolissa. Viisi minuuttia testausta nyt säästää tunteja roskapostitilausten siivoamista myöhemmin.