{"id":25423,"date":"2021-06-07T13:36:00","date_gmt":"2021-06-07T10:36:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25423"},"modified":"2021-10-17T20:24:29","modified_gmt":"2021-10-17T17:24:29","slug":"opas-google-recaptcha-v3-n-lisaamisesta-laravel-verkkosivustoosi","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/opas-google-recaptcha-v3-n-lisaamisesta-laravel-verkkosivustoosi\/","title":{"rendered":"Opas Google reCAPTCHA v3: n lis\u00e4\u00e4misest\u00e4 Laravel-verkkosivustoosi"},"content":{"rendered":"

Aiemmin olen julkaissut artikkelin Google reCAPTCHA: n lis\u00e4\u00e4misest\u00e4 Laravel-lomakkeisiin<\/a>. Google on tuonut sitten reCAPTCHA: n seuraavan version v3. Yksi lukijoistamme kysyi, kuinka integroida reCAPTCHA v3 Laravel-sovellukseen.<\/p>\n

reCAPTCHA v3: lla on hieman erilainen k\u00e4ytt\u00e4ytyminen. Toisin kuin reCAPTCHA: n vanhempi versio, sinun ei tarvitse laittaa captchaa lomakkeeseesi. T\u00e4ss\u00e4 versiossa k\u00e4vij\u00f6iden ei tarvitse ratkaista palapeli\u00e4. Sen sijaan n\u00e4et reCAPTCHA-kuvakkeen verkkosivustosi oikeassa alakulmassa. T\u00e4m\u00e4 reCAPTCHA: n v3-versio taistelee taustalla olevia botteja vastaan. Mik\u00e4 t\u00e4rkeint\u00e4, sinun ei tarvitse lis\u00e4t\u00e4 captchaa kaikissa muodoissa. Lis\u00e4\u00e4 vain kerran ja se suojaa verkkosivustosi kaikkia muotoja.<\/p>\n

T\u00e4ss\u00e4 artikkelissa tutkitaan, kuinka k\u00e4ytt\u00e4j\u00e4 voi lis\u00e4t\u00e4 reCAPTCHA v3: n Laravel-verkkosivustoonsa. ReCAPTCHA: n lis\u00e4\u00e4minen suojaa verkkosivustoasi robotteilta ja roskapostilta.<\/p>\n

Hanki reCAPTCHA: n sivustoavain ja salainen avain<\/h3>\n

Aloittamiseksi sinun on ensin rekister\u00f6it\u00e4v\u00e4 sivustosi Google reCAPTCHA -palvelussa. Siirry Google reCAPTCHA -palveluun<\/a> ja rekister\u00f6i sivustosi napsauttamalla + -kuvaketta. Lis\u00e4\u00e4 seuraavalla sivulla verkkosivustosi verkkotunnus ja valitse reCAPTCHA v3 -vaihtoehto. Jos haluat testata sit\u00e4 paikallisella palvelimella, lis\u00e4\u00e4 toimialue-kentt\u00e4\u00e4n ’localhost’.<\/p>\n

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

Kun painat L\u00e4het\u00e4-painiketta, saat sivuston avaimen ja salaisen avaimen. Kopioi n\u00e4m\u00e4 avaimet. Ne edellytt\u00e4v\u00e4t seuraavia vaiheita.<\/p>\n

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

Asenna ja m\u00e4\u00e4rit\u00e4 Laravel reCAPTCHA -kirjasto<\/h3>\n

Suuntaa Laravel-projektiisi ja asenna biscolabin kirjasto,<\/a> joka on rakennettu integroimaan reCAPTCHA Laraveliin. Avaa p\u00e4\u00e4te projektin juurihakemistossa ja suorita komento:<\/p>\n

composer require biscolab\/laravel-recaptcha<\/code><\/pre>\n
Kun kirjasto on asennettu, julkaise m\u00e4\u00e4ritystiedosto alla olevan komennon avulla.<\/p>\n
php artisan vendor:publish --provider=\"BiscolabReCaptchaReCaptchaServiceProvider\"<\/code><\/pre>\n
Avaa .env<\/code>tiedosto editorissasi ja lis\u00e4\u00e4 sivustosi ja reCAPTCHA: n salaiset avaimet alla olevan kuvan mukaisesti.<\/p>\n
RECAPTCHA_SITE_KEY=ADD_YOUR_SITE_KEY\nRECAPTCHA_SECRET_KEY=ADD_YOUR_SECRET_KEY<\/code><\/pre>\n
Muista korvata paikkamerkit ’ADD_YOUR_SITE_KEY’ ja ’ADD_YOUR_SECRET_KEY’ todellisilla arvoilla. Seuraavaksi avaa config\/recaptcha.php<\/code>ja aseta versioksi v3.<\/p>\n
return [\n\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0'version' => 'v3',\n\u00a0\u00a0\u00a0\u00a0...\n];<\/code><\/pre>\n
T\u00e4m\u00e4n j\u00e4lkeen tyhjenn\u00e4 m\u00e4\u00e4ritysv\u00e4limuisti komennolla:<\/p>\n
php artisan config:cache<\/code><\/pre>\n
Lis\u00e4\u00e4 Google reCAPTCHA v3 Laravel-verkkosivustoosi<\/h3>\n
Olemme suorittaneet kaikki asetukset ja kaikki valmiit lis\u00e4\u00e4m\u00e4\u00e4n reCAPTCHA: n verkkosivustolle. T\u00e4t\u00e4 varten sinun on ensin lis\u00e4tt\u00e4v\u00e4 HTML-sis\u00e4ll\u00f6nkuvauskentt\u00e4 csrf-tokenille p\u00e4\u00e4osaan.<\/p>\n
<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\"><\/code><\/pre>\n
Jos verkkosivustosi on jo lis\u00e4nnyt t\u00e4m\u00e4n tunnisteen, ohita vain yll\u00e4 oleva vaihe. Aseta seuraavaksi htmlScriptTagJsApi()<\/code>auttaja ennen p\u00e4\u00e4tunnisteen sulkemista.<\/p>\n
<!DOCTYPE html>\n<html>\n\u00a0\u00a0\u00a0\u00a0<head>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{!! htmlScriptTagJsApi() !!}\n\u00a0\u00a0\u00a0\u00a0<\/head><\/code><\/pre>\n
Siirry nyt verkkosivustollesi, lataa se uudelleen ja sinun pit\u00e4isi n\u00e4hd\u00e4 reCAPTCHA-kuvake sivun oikeassa alakulmassa. Se tarkoittaa, ett\u00e4 verkkosivustosi on nyt suojattu Google reCAPTCHA: lla.<\/p>\n
Olet lis\u00e4nnyt Google reCAPTCHA: n Laravel-verkkosivustoosi. Jos haluat lis\u00e4\u00e4 uteliaisuutta, jos haluat n\u00e4hd\u00e4 reCAPTCHA: n vastauksen, sinun on muutettava hieman p\u00e4\u00e4tunnisteen koodia.<\/p>\n
<head>\n...\n<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n<script type=\"text\/javascript\">\nfunction callbackThen(response){\n\u00a0\u00a0\u00a0\u00a0\/\/ read HTTP status\n\u00a0\u00a0\u00a0\u00a0console.log(response.status);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ read Promise object\n\u00a0\u00a0\u00a0\u00a0response.json().then(function(data){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(data);\n\u00a0\u00a0\u00a0\u00a0});\n}\nfunction callbackCatch(error){\n\u00a0\u00a0\u00a0\u00a0console.error('Error:', error)\n}\n<\/script>\n\u00a0\n{!! htmlScriptTagJsApi([\n\u00a0\u00a0\u00a0\u00a0'callback_then' => 'callbackThen',\n\u00a0\u00a0\u00a0\u00a0'callback_catch' => 'callbackCatch'\n]) !!}\n<\/head><\/code><\/pre>\n
Lataa sivu uudelleen ja tarkista selainkonsolista, niin n\u00e4et Google reCAPTCHA: n vastauksen. Minun tapauksessani se n\u00e4kyy alla olevana kuvakaappauksena.<\/p>\n
\"Opas<\/a><\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n