{"id":29215,"date":"2021-06-07T13:27:00","date_gmt":"2021-06-07T10:27:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29215"},"modified":"2021-10-17T04:23:42","modified_gmt":"2021-10-17T01:23:42","slug":"en-guide-om-hur-du-lagger-till-google-recaptcha-v3-till-din-laravel-webbplats","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/en-guide-om-hur-du-lagger-till-google-recaptcha-v3-till-din-laravel-webbplats\/","title":{"rendered":"En guide om hur du l\u00e4gger till Google reCAPTCHA v3 till din Laravel-webbplats"},"content":{"rendered":"

Tidigare har jag publicerat en artikel om att l\u00e4gga till Google reCAPTCHA i Laravel-formul\u00e4ret<\/a>. Google har sedan tagit n\u00e4sta version v3 av reCAPTCHA. En av v\u00e5ra l\u00e4sare fr\u00e5gade hur man integrerar reCAPTCHA v3 i en Laravel-applikation.<\/p>\n

reCAPTCHA v3 har n\u00e5got annorlunda beteende. Till skillnad fr\u00e5n den \u00e4ldre versionen av reCAPTCHA beh\u00f6ver du inte placera captcha i ditt formul\u00e4r. I den h\u00e4r versionen beh\u00f6ver dina bes\u00f6kare inte l\u00f6sa ett pussel. Ist\u00e4llet ser du reCAPTCHA-ikonen l\u00e4ngst ned till h\u00f6ger p\u00e5 din webbplats. Denna v3-version av reCAPTCHA k\u00e4mpar mot robotarna i bakgrunden. Viktigast \u00e4r att du inte beh\u00f6ver l\u00e4gga till captcha i alla former. L\u00e4gg bara till det en g\u00e5ng s\u00e5 skyddar det alla former av din webbplats.<\/p>\n

I den h\u00e4r artikeln studerar vi hur en anv\u00e4ndare kan l\u00e4gga till reCAPTCHA v3 till sin Laravel-webbplats. L\u00e4gga till reCAPTCHA skyddar din webbplats fr\u00e5n bots och skr\u00e4ppost.<\/p>\n

Skaffa platsnyckel och hemlig nyckel till reCAPTCHA<\/h3>\n

F\u00f6r att komma ig\u00e5ng m\u00e5ste du f\u00f6rst registrera din webbplats med Google reCAPTCHA. G\u00e5 till Google reCAPTCHA<\/a> och klicka p\u00e5 ’+’ ikonen f\u00f6r att registrera din webbplats. P\u00e5 n\u00e4sta sida l\u00e4gger du till dom\u00e4nen p\u00e5 din webbplats, v\u00e4ljer alternativet ’reCAPTCHA v3’. Om du vill testa det p\u00e5 en lokal server ska du l\u00e4gga till "localhost" till dom\u00e4nf\u00e4ltet.<\/p>\n

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

N\u00e4r du har tryckt p\u00e5 knappen Skicka f\u00e5r du platsnyckeln och den hemliga nyckeln. Kopiera dessa nycklar. De kommer att kr\u00e4va n\u00e4sta steg.<\/p>\n

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

Installera och konfigurera Laravel reCAPTCHA-bibliotek<\/h3>\n

G\u00e5 till ditt<\/a> Laravel-projekt och installera biscolabs bibliotek<\/a> som \u00e4r byggt f\u00f6r att integrera reCAPTCHA i Laravel. \u00d6ppna terminalen i din projektkatalog och k\u00f6r kommandot:<\/p>\n

composer require biscolab\/laravel-recaptcha<\/code><\/pre>\n
Vid installation av biblioteket, publicera konfigurationsfilen med kommandot nedan.<\/p>\n
php artisan vendor:publish --provider=\"BiscolabReCaptchaReCaptchaServiceProvider\"<\/code><\/pre>\n
\u00d6ppna .env<\/code>filen i din redigerare och l\u00e4gg till din webbplats och hemliga nycklar f\u00f6r reCAPTCHA som visas nedan.<\/p>\n
RECAPTCHA_SITE_KEY=ADD_YOUR_SITE_KEY\nRECAPTCHA_SECRET_KEY=ADD_YOUR_SECRET_KEY<\/code><\/pre>\n
Se till att ers\u00e4tta platsh\u00e5llarna ’ADD_YOUR_SITE_KEY’ och ’ADD_YOUR_SECRET_KEY’ med de faktiska v\u00e4rdena. \u00d6ppna sedan config\/recaptcha.php<\/code>och st\u00e4ll in version till 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
Efter detta rensar konfigurationscachen med kommandot:<\/p>\n
php artisan config:cache<\/code><\/pre>\n
L\u00e4gg till Google reCAPTCHA v3 till din Laravel-webbplats<\/h3>\n
Vi \u00e4r klara med alla inst\u00e4llningar och redo att l\u00e4gga till reCAPTCHA p\u00e5 webbplatsen. F\u00f6r detta m\u00e5ste du f\u00f6rst l\u00e4gga till HTML-metataggen f\u00f6r csrf-token i huvudavsnittet.<\/p>\n
<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\"><\/code><\/pre>\n
Om din webbplats redan har lagt till den h\u00e4r taggen, ignorerar du bara ovanst\u00e5ende steg. S\u00e4tt sedan in htmlScriptTagJsApi()<\/code>hj\u00e4lpen innan du st\u00e4nger huvudetiketten.<\/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
G\u00e5 nu till din webbplats, ladda om den och du ska se reCAPTCHA-ikonen l\u00e4ngst ned till h\u00f6ger p\u00e5 en sida. Det betyder att din webbplats nu \u00e4r skyddad med Google reCAPTCHA.<\/p>\n
Du \u00e4r klar med att l\u00e4gga till Google reCAPTCHA p\u00e5 din Laravel-webbplats. F\u00f6r ytterligare nyfikenhet, om du vill se svaret fr\u00e5n reCAPTCHA m\u00e5ste du \u00e4ndra koden n\u00e5got i huvudetiketten.<\/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
Ladda om sidan och kolla in webbl\u00e4sarkonsolen, du ser svaret fr\u00e5n Google reCAPTCHA. I mitt fall visas det som en sk\u00e4rmdump nedan.<\/p>\n
\"En<\/a><\/p>\n
relaterade artiklar<\/h4>\n