Como posso validar o google reCAPTCHA v2 usando javascript / jQuery?

120

Tenho um formulário de contato simples no aspx. Quero validar o reCaptcha (lado do cliente) antes de enviar o formulário. Por favor ajude.

Código de amostra:

    <%@ 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>

Quero validar o captcha no cmdSubmitclique.

Por favor ajude.

— Mahatma Aladdin
fonte

2

O que você fez até agora? precisa de mais informações, a questão é muito vaga.

— Zaki

1

Se você não estiver enviando uma solicitação de postagem para o Google por meio da validação do servidor, também pode não incluir um captcha. As validações do lado do cliente sugeridas abaixo serão aprovadas por bots.

— Virge Assault

Validar captcha é clicado lado do cliente> fazer algo> validar dados de recaptcha lado do servidor> fazer algo.

— JPB

2

Veja um exemplo de tutorial aqui freakyjolly.com/…

— Code Spy

104

Esta verificação do lado do cliente de reCaptcha- o seguinte funcionou para mim:

se o reCaptcha não for validado nos grecaptcha.getResponse();retornos do lado do cliente null, senão retornará um valor diferente de null.

Código Javascript:

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified

— Palak Tanejaa
fonte

113

Isso está incorreto. O Captcha NÃO foi verificado pelo JS, você precisa enviar a resposta, junto com a chave do seu site e a chave secreta, para os servidores do Google a partir do seu código de back-end para determinar se o Captcha foi respondido com sucesso. Esta resposta é perigosamente incorreta.

— Sean Kendle

9

Citação: Quando um reCAPTCHA é resolvido pelo usuário final, um novo campo (g-recaptcha-resposta) será preenchido em HTML. developers.google.com/recaptcha/docs/verify

— CoalaWeb

6

Mas isso não é tudo @CoalaWeb! Citação: depois de obter o token de resposta, você precisa verificá-lo com reCAPTCHA usando a seguinte API para garantir que o token é válido. https://developers.google.com/recaptcha/docs/verify

— Dylan Smith

14

Para aqueles que dizem que a resposta não está correta, você ao menos leu a pergunta? A pergunta e a resposta especificam claramente o lado do cliente - a intenção óbvia é verificar se o captcha foi realmente preenchido no lado do cliente antes de enviar uma solicitação de postagem ao servidor para validação posterior.

— rococó

4

Você só pode saber se o usuário realmente o preencheu no lado do cliente. O valor de 'g-recaptcha-response' será preenchido, mas precisa ser enviado ao Google para que eles verifiquem se a resposta é válida ou não. Por exemplo, com a correspondência de imagens, você pode clicar em qualquer coisa ou em nada e clicar em enviar. Isso não está correto, mas o valor de 'g-recaptcha-response' foi preenchido. Você pode usar AJAX para verificá-lo, mas certifique-se de manter sua chave secreta no código do servidor. A resposta curta é que o servidor deve verificar se é válido, seja com AJAX ou com uma postagem de formulário completo.

— Sean Kendle

60

Use isso para validar o captcha do google com javascript simples.

Este código no corpo html:

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

Este código colocado na seção head na chamada do botão do formulário do método get_action (this):

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; 
    }
}

— Pravin Sharma
fonte

<div class = "g-recaptcha" id = "rcaptcha" style = "margin-left: 90px;" data-sitekey = "my_key"> </div> este código logo acima da tag span na seção do corpo

— Pravin Sharma

2

Acho que essa é a melhor solução. Dessa forma, você pode manipular a validação da resposta em seu manipulador de envio de formulário. Isso parece mais lógico do que tentar lidar com o retorno de chamada do captcha. Eu acho que depende se você está validando na hora ou no momento do envio.

— Lâmpada 1 de

4

Você deve usar ===e !==; nenhuma razão para não fazer.

— slikts de

28

Esta solução está errada. Eu acho que quando você obtém resposta, você tem que enviar o parâmetro (response + secretkey + ClientIp) para o google para a validação. Após a validação. O Google nos devolve o sucesso ou o fracasso. em seu exemplo, você não usa a segunda etapa. você pode me explicar: Onde está sua chave privada. Quando você vai usar?

— Mahmut EFE

3

Mahmut está correto, esta resposta está perigosamente errada e incompleta.

— Sean Kendle

27

Resposta de Paul simplificada:

Fonte:

<script src="https://www.google.com/recaptcha/api.js"></script>

HTML:

<div class="g-recaptcha" data-sitekey="YOUR_KEY" data-callback="correctCaptcha"></div>

JS:

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

— Manuel Azar
fonte

13

Como muitas das outras soluções erradas, você está apenas recebendo o token aqui. Você não o validou até enviá-lo ao Google com sua chave secreta.

— evolross 01 de

Isso de alguma forma está causando problemas no meu elemento. Webpack não pode compilá-lo sozinho se usarmos callback de dados dentro do elemento

— Faris Rayhan

2

Esta deve ser a resposta aceita, pois não requer sobrescrever a função de renderização. Quanto à validação puramente em JS, duvido que seja possível, pois exigiria colocar a chave secreta no JS e, assim, permitir que todos colocassem suas mãos sobre ele.

— Askerman

25

Se você renderizar o Recaptcha em um retorno de chamada

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

usando um DIV vazio como um espaço reservado

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

então você pode especificar uma chamada de função opcional em uma resposta CAPTCHA bem-sucedida

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

A resposta de recaptcha será enviada para a função 'correctCaptcha'.

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

Tudo isso veio das notas da API do Google:

Notas da API Google Recaptcha v2

Não sei por que você faria isso. Normalmente, você enviaria o campo g-recaptcha-response junto com sua chave privada para validar com segurança do lado do servidor. A menos que você queira desativar o botão de envio até que a recaptcha seja bem-sucedida ou algo semelhante - neste caso, o procedimento acima deve funcionar.

Espero que isto ajude.

Paulo

— pphillips001
fonte

1

risque isso, eu descobri - parte do seu código está incorreto, então vou propor uma edição. Felicidades!

— Prefixo

@Prefix Você já propôs a edição? Ansioso por sua versão.

— thanks_in_advance

1

A declaração de função de retorno de chamada correctCaptcha (dentro de grecaptcha.render) deve estar sem aspas e deve ser colocada antes de onloadCallback.

— Pratul Sanwal

9

Usei a solução de HarveyEV, mas a interpretei mal e fiz isso com o jQuery validate em vez do validador Bootstrap.

  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
  <script>
    $("#contactForm").validate({
      submitHandler: function (form) {
        var response = grecaptcha.getResponse();
        //recaptcha failed validation
        if (response.length == 0) {
          $('#recaptcha-error').show();
          return false;
        }
          //recaptcha passed validation
        else {
          $('#recaptcha-error').hide();
          return true;
        }
      }
    });
  </script>

— imjosh
fonte

6

Achei todos eles ótimos, mas tive problemas para fazê-los funcionar com javascript e c #. Aqui está o que eu fiz. Espero que isso ajude mais alguém.

//put this at the top of the page
<script src="https://www.google.com/recaptcha/api.js"></script>

//put this under the script tag
<script>
var isCaptchaValid = false;
function doCaptchaValidate(source, args) {
    args.IsValid = isCaptchaValid;
}
var verifyCallback = function (response) {
    isCaptchaValid = true;
};
</script>

//retrieved from google and added callback
<div class="g-recaptcha" data-sitekey="sitekey" data-callback="verifyCallback">

//created a custom validator and added error message and ClientValidationFucntion
<asp:CustomValidator runat="server" ID="CustomValidator1" ValidationGroup="Initial" ErrorMessage="Captcha Required" ClientValidationFunction="doCaptchaValidate"/>

— BV2005
fonte

4

você pode renderizar seu recaptcha usando o seguinte código

<div id="recapchaWidget" class="g-recaptcha"></div>

<script type="text/javascript">
   var widId = "";
   var onloadCallback = function ()
   {
    widId = grecaptcha.render('recapchaWidget', {
    'sitekey':'Your Site Key'
            });
   };
 </script>

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

Então você pode validar seu recaptcha usando o método "IsRecapchaValid ()" como segue.

 <script type="text/javascript">
     function IsRecapchaValid()
      {
      var res = grecaptcha.getResponse(widId);
      if (res == "" || res == undefined || res.length == 0)
         {
          return false;
         }
       return true;
      }
 </script>

— Tabish Usman
fonte

Então, assim: return res && res.length não se esqueça da validação do servidor.

— Alex Gurskiy

1

Usei a solução de Palek dentro de um validador Bootstrap e funcionou. Eu teria adicionado um comentário ao dele, mas não tenho o representante;). Versão simplificada:

        $('#form').validator().on('submit', function (e) {
           var response = grecaptcha.getResponse();
           //recaptcha failed validation
           if(response.length == 0) {
               e.preventDefault();
               $('#recaptcha-error').show();
           }
           //recaptcha passed validation
           else {
               $('#recaptcha-error').hide();
           }
           if (e.isDefaultPrevented()) {
              return false;
           } else {
              return true;
           }
       });

— HarveyEV
fonte

1

Link da fonte

Você pode simplesmente verificar no lado do cliente usando o método grecaptcha.getResponse ()

          var rcres = grecaptcha.getResponse();
          if(rcres.length){
            grecaptcha.reset();
            showHideMsg("Form Submitted!","success");
          }else{
            showHideMsg("Please verify reCAPTCHA","error");
          }

— Code Spy
fonte

0

Infelizmente, não há como validar o captcha apenas no lado do cliente (navegador da web), porque a natureza do captcha em si requer pelo menos dois atores (lados) para concluir o processo. O lado do cliente - pede a um humano para resolver algum quebra-cabeça, equitação matemática, reconhecimento de texto, e a resposta está sendo codificada por um algoritmo junto com alguns metadados como captcha resolvendo timestamp, código de desafio pseudo-aleatório. Depois que o lado do cliente envia o formulário com um código de resposta captcha, o lado do servidor precisa validar esse código de resposta de captcha com um conjunto predefinido de regras, ou seja, se o captcha for resolvido em um período de 5 minutos, se os endereços IP do cliente forem iguais e assim por diante. Esta é uma descrição muito geral, de como os captchas funcionam, de cada implementação (como o ReCaptcha do Google, algumas equações matemáticas básicas resolvendo captchas feitas por você mesmo),

NB. O cliente (navegador da web) tem a opção de desabilitar a execução do código JavaScript, o que significa que as soluções propostas são completamente inúteis.

— vchyzhevskyi
fonte

-1

if (typeof grecaptcha !== 'undefined' && $("#dvCaptcha").length > 0 && $("#dvCaptcha").html() == "") {
                dvcontainer = grecaptcha.render('dvCaptcha', {
                    'sitekey': ReCaptchSiteKey,
                    'expired-callback' :function (response){
                        recaptch.reset();
                        c_responce = null;
                    },
                    'callback': function (response) {
                        $("[id*=txtCaptcha]").val(c_responce);
                        $("[id*=rfvCaptcha]").hide();
                        c_responce = response;

                    }
                });
            }
            
            function callonanybuttonClick(){
             
                if (c_responce == null) {
                    $("[id*=txtCaptcha]").val("");
                    $("[id*=rfvCaptcha]").show();

                    return false;
                }
                else {
                    $("[id*=txtCaptcha]").val(c_responce);
                    $("[id*=rfvCaptcha]").hide();
                    return true;
                }
            
}

<div id="dvCaptcha" class="captchdiv"></div>
    <asp:TextBox ID="txtCaptcha" runat="server" Style="display: none" />
    <label id="rfvCaptcha" style="color:red;display:none;font-weight:normal;">Captcha validation is required.</label>

Expandir trecho

A validação de Captcha é necessária.

— Karangiri goswami
fonte

-2

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <script type="text/javascript">
        function get_action() {
            var v = grecaptcha.getResponse();
            console.log("Resp" + v);
            if (v == '') {
                document.getElementById('captcha').innerHTML = "You can't leave Captcha Code empty";
                return false;
            }
            else {
                document.getElementById('captcha').innerHTML = "Captcha completed";
                return true;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" onsubmit="return get_action();">
    <div>
    <div class="g-recaptcha" data-sitekey="6LeKyT8UAAAAAKXlohEII1NafSXGYPnpC_F0-RBS"></div>
    </div>
   <%-- <input type="submit" value="Button" />--%>
   <asp:Button ID="Button1" runat="server"
       Text="Button" />
    <div id="captcha"></div>
    </form>
</body>
</html>

Funcionará conforme o esperado.

— Papun Sahoo
fonte

-2

O Google reCAPTCHA versão 2 ASP.Net permite validar a resposta Captcha do lado do cliente usando suas funções de retorno de chamada. No presente exemplo , o Google nova reCAPTCHA será validado usando ASP.Net RequiredField Validator.

<script type="text/javascript">
    var onloadCallback = function () {
        grecaptcha.render('dvCaptcha', {
            'sitekey': '<%=ReCaptcha_Key %>',
            'callback': function (response) {
                $.ajax({
                    type: "POST",
                    url: "Demo.aspx/VerifyCaptcha",
                    data: "{response: '" + response + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        var captchaResponse = jQuery.parseJSON(r.d);
                        if (captchaResponse.success) {
                            $("[id*=txtCaptcha]").val(captchaResponse.success);
                            $("[id*=rfvCaptcha]").hide();
                        } else {
                            $("[id*=txtCaptcha]").val("");
                            $("[id*=rfvCaptcha]").show();
                            var error = captchaResponse["error-codes"][0];
                            $("[id*=rfvCaptcha]").html("RECaptcha error. " + error);
                        }
                    }
                });
            }
        });
    };
</script>


    <asp:TextBox ID="txtCaptcha" runat="server" Style="display: none" />
    <asp:RequiredFieldValidator ID="rfvCaptcha" ErrorMessage="The CAPTCHA field is required." ControlToValidate="txtCaptcha"
        runat="server" ForeColor="Red" Display="Dynamic" />

    <br />
    <asp:Button ID="btnSubmit" Text="Submit" runat="server" />

— Julia
fonte