Hoe kan ik valideren google reCAPTCHA v2 met behulp van javascript / jQuery?

Question

Meer

Bron Niet AMP-versie Bewerken

Hoe kan ik valideren google reCAPTCHA v2 met behulp van javascript / jQuery?

Ik heb een eenvoudig contactformulier in aspx. Ik wil de reCaptcha valideren (client-side) voordat ik het formulier verzend. Gelieve te helpen.

Voorbeeld code:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Test Form</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
        <script>
            $("#cmdSubmit").click(function () {
                //need to validate the captcha
            });
        </script> 
    </head>
    <body>
        <form id="form1" runat="server">
            <label class="clsLabe">First Name<sup>*</sup></label><br />
            <input type="text" id="txtFName" name="txtFName" class="clsInput" /><br />
            <div class="g-recaptcha" data-sitekey="my_key"></div>
            <img id="cmdSubmit" src="SubmitBtn.png" alt="Submit Form" style="cursor:pointer;" />
        </form>
    </body>
    </html>

Ik wil de captcha valideren als ik op cmdSubmit klik.

Gelieve te helpen.

Mahatma Aladdin

Bewerkte vraag 12de0 januari 2015 в 1:09

Programmering

google-api asp.net javascript jquery recaptcha

12de0 januari 2015 в 12:56

4 views

Palak Tanejaa · Answer 1 · 2015-04-23T10:07:41+00:00

Palak Tanejaa

Bron Niet AMP-versie Bewerken

Client side verificatie van reCaptcha - het volgende werkte voor mij :

" grecaptcha.getResponse(); " retourneert een null als reCaptcha niet is gevalideerd aan de client kant, anders retourneert het een waarde anders dan null.

Javascript Code :

var response = grecaptcha.getResponse();

if(response.length == 0)
    //reCaptcha not verified

else
    //reCaptch verified

Umer MehAr

Bewerkt antwoord 12de5 maart 2016 в 11:59

94

0

Commentaren (11)

Pravin Sharma · Answer 2 · 2015-02-19T13:42:47+00:00

Gebruik dit om Google captcha te valideren met eenvoudige javascript.

Deze code in de html body:

<div class="g-recaptcha" id="rcaptcha" style="margin-left: 90px;" data-sitekey="my_key"></div>
<span id="captcha" style="margin-left:100px;color:red" />

Deze code zet je in het hoofd gedeelte van de oproep get_action(this) methode formulier knop:

function get_action(form) 
{
    var v = grecaptcha.getResponse();
    if(v.length == 0)
    {
        document.getElementById('captcha').innerHTML="You can't leave Captcha Code empty";
        return false;
    }
    else
    {
        document.getElementById('captcha').innerHTML="Captcha completed";
        return true; 
    }
}

pphillips001 · Answer 3 · 2015-01-20T11:49:32+00:00

Als u de Recaptcha rendert op een callback

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

met behulp van een lege DIV als plaatshouder

<div id='html_element'></div>

dan kunt u een optionele functie aanroep op een succesvolle CAPTCHA antwoord specificeren

var onloadCallback = function() {
    grecaptcha.render('html_element', {
      'sitekey' : 'your_site_key',
      'callback' : correctCaptcha
    });
  };

De recaptcha respons zal dan naar de 'correctCaptcha' functie gestuurd worden.

var correctCaptcha = function(response) {
    alert(response);
};

Dit alles was van de Google API notities :

Google Recaptcha v2 API Notes

Ik'ben een beetje onzeker waarom je dit zou willen doen. Normaal gesproken zou je het g-recaptcha-response veld samen met je privésleutel sturen om veilig server-side te valideren. Tenzij je de submit knop wilde uitschakelen totdat de recaptcha succesvol was of zo - in dat geval zou het bovenstaande moeten werken.

Hoop dat dit helpt.

Paul