[javascript] javascript / jQuery를 사용하여 Google reCAPTCHA v2의 유효성을 검사하려면 어떻게해야합니까?

Program / 글쓴이

aspx에 간단한 문의 양식이 있습니다. 양식을 제출하기 전에 reCaptcha (클라이언트 측)를 확인하고 싶습니다. 도와주세요.

샘플 코드 :

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

cmdSubmit클릭시 보안 문자를 확인하고 싶습니다 .

도와주세요.

답변

이 클라이언트 측 확인 reCaptcha-다음이 나를 위해 일했습니다.

reCaptcha가 클라이언트 측 grecaptcha.getResponse();반환 null에서 유효성이 검사되지 않으면 그렇지 않으면 이외의 값을 반환합니다 null.

자바 스크립트 코드 : 

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified

답변

이것을 사용하여 간단한 자바 스크립트로 Google 보안 문자를 확인하십시오.

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" />

이 코드는 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;
    }
}

답변

단순화 된 Paul의 대답 :

출처:

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

답변

콜백에서 Recaptcha를 렌더링하는 경우

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

빈 DIV를 자리 표시 자로 사용

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

그런 다음 성공적인 CAPTCHA 응답에 대한 선택적 함수 호출을 지정할 수 있습니다.

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

그러면 recaptcha 응답이 ‘correctCaptcha’함수로 전송됩니다.

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

이 모든 것은 Google API 노트에서 가져온 것입니다.

Google Recaptcha v2 API 노트

왜 이렇게 하려는지 잘 모르겠습니다. 일반적으로 개인 키와 함께 g-recaptcha-response 필드를 전송하여 서버 측의 유효성을 안전하게 검사합니다. recaptcha가 성공할 때까지 제출 버튼을 비활성화하지 않으려면 위의 작업이 작동합니다.

도움이 되었기를 바랍니다.

폴

답변

HarveyEV의 솔루션을 사용했지만 잘못 읽었으며 Bootstrap 유효성 검사기 대신 jQuery 유효성 검사로 수행했습니다.

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

답변

나는 그들 모두가 훌륭하다고 생각했지만 실제로 자바 스크립트와 C #으로 작업하는 데 어려움을 겪었습니다. 여기 내가 한 일이 있습니다. 다른 사람에게 도움이되기를 바랍니다.

//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"/>

답변

다음 코드를 사용하여 recaptcha를 렌더링 할 수 있습니다.

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

그런 다음 다음과 같이 “IsRecapchaValid ()”메서드를 사용하여 recaptcha의 유효성을 검사 할 수 있습니다.

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