{"id":28367,"date":"2021-05-22T12:05:00","date_gmt":"2021-05-22T09:05:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28367"},"modified":"2021-10-17T04:44:27","modified_gmt":"2021-10-17T01:44:27","slug":"validera-google-recaptcha-med-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/validera-google-recaptcha-med-javascript\/","title":{"rendered":"Validera Google reCAPTCHA med JavaScript"},"content":{"rendered":"

Google reCAPTCHA \u00e4r ett popul\u00e4rt val f\u00f6r att skydda webbplatsformul\u00e4ren mot skr\u00e4ppost och bots. ReCAPTCHA ber anv\u00e4ndarna att l\u00f6sa enkla pussel som \u00e4r l\u00e4tta f\u00f6r m\u00e4nniskor men sv\u00e5ra f\u00f6r bots. Som ett resultat kan man spara sitt serverutrymme fr\u00e5n att infoga on\u00f6diga skr\u00e4ppostposter i databasen. Det sparar ocks\u00e5 tid eftersom vi aldrig f\u00e5r skr\u00e4ppostkommentarer i v\u00e5r brevl\u00e5da.<\/p>\n

N\u00e4r vi l\u00e4gger till en Google reCAPTCHA i webbplatsformul\u00e4r m\u00e5ste vi skriva en kod f\u00f6r att validera svaret fr\u00e5n reCAPTCHA. Om ett svar \u00e4r giltigt ska endast v\u00e5rt formul\u00e4r forts\u00e4tta.<\/p>\n

Det finns tv\u00e5 s\u00e4tt att validera svaret, det ena \u00e4r serversidan och det andra \u00e4r klientsidan. I den h\u00e4r artikeln fokuserar vi p\u00e5 validering p\u00e5 klientsidan och d\u00e4rf\u00f6r studerar vi hur man validerar Google reCAPTCHA med JavaScript.<\/p>\n

Om du letar efter validering p\u00e5 serversidan, se artikeln Anv\u00e4nda Google reCAPTCHA p\u00e5 din webbplats med PHP<\/a>.<\/p>\n

Registrera webbplatsen och f\u00e5 API-nycklar<\/h3>\n

F\u00f6r att komma ig\u00e5ng m\u00e5ste du registrera din webbplats h\u00e4r – <\/a>https:\/\/www.google.com\/recaptcha\/admin<\/a>.<\/p>\n

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

V\u00e4lj alternativet "reCAPTCHA v2" som ger kryssrutan "Jag \u00e4r inte en robot".<\/p>\n

N\u00e4r du har angett information i ovanst\u00e5ende formul\u00e4r f\u00e5r du din webbplatsnyckel och hemliga nyckel. Eftersom vi har att g\u00f6ra med valideringen p\u00e5 klientsidan beh\u00f6ver vi bara en webbplatsnyckel.<\/p>\n

Om du vill testa det p\u00e5 en lokal server l\u00e4gger du till ’localhost’ som en dom\u00e4n.<\/p>\n

Validera Google reCAPTCHA med JavaScript<\/h3>\n

F\u00f6rst m\u00e5ste du l\u00e4gga till Google reCAPTCHA i ditt formul\u00e4r. Du kan g\u00f6ra det med koden nedan.<\/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
I ovanst\u00e5ende kod anv\u00e4nder jag onsubmit<\/code>h\u00e4ndelse. Detta beror p\u00e5 att n\u00e4r anv\u00e4ndaren skickar in ett formul\u00e4r m\u00e5ste vi kontrollera reCAPTCHA-svaret och sedan l\u00e5ta det skicka ett formul\u00e4r.<\/p>\n
Sedan lade jag till en ’verifieraCaptcha’ som ett namn p\u00e5 en \u00e5teruppringningsfunktion i attributet ’data-callback’. Jag kommer att anv\u00e4nda denna \u00e5teruppringningsmetod f\u00f6r att ta bort felmeddelandet n\u00e4r valideringen \u00e4r klar. Jag lade ocks\u00e5 till en div med ett id ’g-recaptcha-error’ f\u00f6r att visa felmeddelandet.<\/p>\n
Du b\u00f6r ers\u00e4tta platsh\u00e5llaren ’YOUR_SITE_KEY’ med din faktiska webbplatsnyckel.<\/p>\n
Slutligen, l\u00e5t oss skriva en JavaScript-kod som hanterar reCAPTCHA-svaret. Och baserat p\u00e5 svaret visar det antingen ett felmeddelande eller l\u00e5ter formul\u00e4ret forts\u00e4tta.<\/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
I metoden f\u00e5r submitUserForm<\/code>vi reCAPTCHA-svaret med grecaptcha.getResponse()<\/code>. Detta \u00e4r en inbyggd funktion som tillhandah\u00e5lls av Googles reCAPTCHA-tj\u00e4nst.<\/p>\n
Om svaret \u00e4r ogiltigt returnerar det 0. Det betyder att en anv\u00e4ndare \u00e4nnu inte har validerat reCAPTCHA. Och s\u00e5, det kastar ett fel och l\u00e4gger till div som har id ’g-recaptcha-error’.<\/p>\n
N\u00e4r Google reCAPTCHA skickar ett giltigt svar returnerar jag ett sant v\u00e4rde, vilket g\u00f6r att formul\u00e4ret kan forts\u00e4tta vidare.<\/p>\n
Den verifyCaptcha<\/code>metoden f\u00e5r ett samtal n\u00e4r du l\u00f6sa alla pussel av reCAPTCHA. Vi tar sedan bort felmeddelandet n\u00e4r ett pussel \u00e4r l\u00f6st.<\/p>\n
V\u00e5r sista kod \u00e4r:<\/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
Jag hoppas att du f\u00f6rst\u00e5r hur du validerar Google reCAPTCHA med JavaScript. Prova det i ditt projekt och dela dina tankar eller f\u00f6rslag i kommentarf\u00e4ltet nedan.<\/p>\n
relaterade artiklar<\/h4>\n