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

120

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클릭시 보안 문자를 확인하고 싶습니다 .

도와주세요.

javascript  jquery  asp.net  google-api  recaptcha 
— 마하트마 알라딘
소스
2
지금까지 무엇을 했습니까? 더 많은 정보가 필요합니다. 질문이 너무 모호합니다.
— Zaki
1
서버 측 유효성 검사를 통해 Google에 게시 요청을 보내지 않는 경우 보안 문자를 포함하지 않을 수도 있습니다. 아래 제안 된 클라이언트 측 유효성 검사는 봇에 의해 전달됩니다.
— Virge Assault
보안 문자 확인을 클릭하면 클라이언트 측> 작업 수행> recaptcha 데이터 서버 측 확인> 작업 수행.
— JPB
2
— Code Spy

답변:

103

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

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

자바 스크립트 코드 : 

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified
— 팔락 타네 자
소스
112
이것은 올바르지 않습니다. Captcha는 JS에 의해 확인되지 않았습니다. Captcha가 성공적으로 응답되었는지 확인하려면 백엔드 코드에서 Google 서버에 사이트 키 및 비밀 키와 함께 응답을 제출해야합니다. 이 대답은 위험 할 정도로 틀 렸습니다.
— 숀 켄
9
인용문 : 최종 사용자가 reCAPTCHA를 해결하면 새 필드 (g-recaptcha-response)가 HTML로 채워집니다. developers.google.com/recaptcha/docs/verify
— CoalaWeb
6
하지만 그게 전부는 아닙니다 @CoalaWeb! 인용구 : 당신이 응답 토큰을 얻을 후, 당신은 그것을 확인해야 토큰이 유효한지 확인하기 위해 다음과 같은 API를 사용하여 reCAPTCHA를 함께. https://developers.google.com/recaptcha/docs/verify
— Dylan Smith
14
답이 맞지 않다고 말하는 사람들에게 질문을 읽었습니까? 질문과 답변 모두 클라이언트 측을 명확하게 지정합니다. 명백한 의도는 추가 유효성 검사를 위해 서버에 게시 요청을 보내기 전에 보안 문자가 실제로 클라이언트 측에 채워
— rococo
4
사용자가 실제로 클라이언트 측에서 작성했는지 여부 만 알 수 있습니다. 'g-recaptcha-response'의 값이 채워지지만 응답이 유효한지 확인하기 위해 Google에 전송해야합니다. 예를 들어 이미지 일치를 사용하면 아무거나 클릭하지 않고 제출을 클릭 할 수 있습니다. 정답은 아니지만 'g-recaptcha-response'의 값이 채워져 있습니다. AJAX를 사용하여 확인할 수 있지만 서버 측 코드에 비밀 키를 보관해야합니다. 짧은 대답은 AJAX를 사용하든 전체 양식 게시물을 사용하든 서버가 유효한지 확인해야한다는 것입니다.
— Sean Kendle 2018
60

이것을 사용하여 간단한 자바 스크립트로 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; 
    }
}
— 프라 빈 샤르마
소스
<div class = "g-recaptcha"id = "rcaptcha"style = "margin-left : 90px;" data-sitekey = "my_key"> </ div> 본문 섹션의 span 태그 바로 위에있는이 코드
— Pravin Sharma
2
이것이 더 나은 해결책이라고 생각합니다. 이렇게하면 양식 제출 처리기에서 응답의 유효성 검사를 처리 할 수 ​​있습니다. 이것은 captcha 콜백에서 처리하는 것보다 더 논리적으로 보입니다. 즉석에서 또는 제출시 유효성 검사에 따라 다릅니다.
— Lightbulb1 2015
4
당신은 사용해야 ===하고 !==, 하지 않을 이유가 없습니다.
— slikts
28
이 솔루션은 잘못되었습니다. 응답을 받으면 유효성 검사를 위해 매개 변수 (response + secretkey + ClientIp)를 Google에 보내야한다고 생각합니다. 확인 후. Google은 성공 또는 실패를 반환합니다. 귀하의 예에서는 두 번째 단계를 사용하지 않습니다. 설명해 주시겠습니까? 개인 키는 어디에 있습니까? 언제 사용 하시겠습니까?
— Mahmut EFE
3
Mahmut이 맞습니다.이 대답은 위험 할 정도로 잘못되고 불완전합니다.
— Sean Kendle
27

단순화 된 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);
    };
— 마누엘 아자르
소스
13
다른 많은 잘못된 솔루션과 마찬가지로 여기에서 토큰을 얻습니다. 보안 키를 사용하여 Google에 전송할 때까지 유효성을 확인 하지 않았습니다 .
— evolross
이것은 어떻게 든 내 요소에 문제를 일으키는 것입니다. 우리는 요소 내부 데이터 콜백을 사용하는 경우 웹팩 그것을 자기를 컴파일 할 수 없습니다
— 패리스 Rayhan에게
2
이것은 render 함수를 덮어 쓸 필요가 없기 때문에 받아 들여진 대답이어야합니다. 순전히 JS에서의 유효성 검사에 관해서는 비밀 키를 JS에 배치해야하므로 모든 사람이 모든 것을 손에 넣을 수 있기 때문에 가능하지 않습니다.
— Askerman
25

콜백에서 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가 성공할 때까지 제출 버튼을 비활성화하지 않으려면 위의 작업이 작동합니다.

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

폴

— pphillips001
소스
1
스크래치, 나는 그것을 알아 냈습니다. 코드의 일부가 잘못되었으므로 편집을 제안합니다. 건배!
— Prefix
@Prefix 편집을 제안 하셨나요? 귀하의 버전을 기대합니다.
— thanks_in_advance
1
correctCaptcha 콜백 함수 선언 (grecaptcha.render 내부)에는 따옴표가 없어야하며 onloadCallback 앞에 배치해야합니다.
— Pratul Sanwal 2015
9

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>
— 임 조쉬
소스
6

나는 그들 모두가 훌륭하다고 생각했지만 실제로 자바 스크립트와 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"/>
— BV2005
소스
4

다음 코드를 사용하여 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>
— Tabish Usman
소스
그래서, 이렇게 : return res && res.length 서버 유효성 검사를 잊지 마세요.
— Alex Gurskiy 2017
1

Bootstrap 유효성 검사기 내부에서 Palek의 솔루션을 사용했으며 작동합니다. 나는 그의 의견을 추가했지만 담당자가 없습니다.). 단순화 된 버전 :

        $('#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
소스
1

소스 링크

여기에 이미지 설명 입력

grecaptcha.getResponse () 메소드를 사용하여 클라이언트 측에서 간단히 확인할 수 있습니다. 

          var rcres = grecaptcha.getResponse();
          if(rcres.length){
            grecaptcha.reset();
            showHideMsg("Form Submitted!","success");
          }else{
            showHideMsg("Please verify reCAPTCHA","error");
          }
— 코드 스파이
소스
0

안타깝게도 클라이언트 측 (웹 브라우저)에서만 보안 문자를 확인할 수있는 방법이 없습니다. 보안 문자 자체의 특성상 프로세스를 완료하기 위해 최소한 두 명의 행위자 (측면)가 필요하기 때문입니다. 클라이언트 측-인간에게 퍼즐, 수학 공평, 텍스트 인식을 풀도록 요청하고 응답은 보안 문자 풀기 타임 스탬프, 의사 랜덤 챌린지 코드와 같은 일부 메타 데이터와 함께 알고리즘에 의해 인코딩됩니다. 클라이언트 측이 보안 문자 응답 코드를 사용하여 양식을 제출하면 서버 측은 미리 정의 된 규칙 집합을 사용하여이 보안 문자 응답 코드의 유효성을 검사해야합니다. 보안 문자가 5 분 이내에 해결 된 경우 클라이언트의 IP 주소가 동일한 경우 등등. 이것은 매우 일반적인 설명, 캡 차가 작동하는 방식, 모든 단일 구현 (예 : Google의 ReCaptcha, 자체 제작 캡차를 해결하는 기본적인 수학 표현),

NB. 클라이언트 (웹 브라우저)에는 JavaScript 코드 실행을 비활성화 할 수있는 옵션이 있습니다. 이는 제안 된 솔루션이 완전히 쓸모 없다는 것을 의미합니다.

— vchyzhevskyi
소스
-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>
스 니펫 확장

보안 문자 확인이 필요합니다.

— 카랑 기리 고 스와미
소스
-1 
<%@ 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>

예상대로 작동합니다.

— 파푼 사후
소스
-1

Google reCAPTCHA 버전 2 ASP.Net을 사용하면 콜백 함수를 사용하여 클라이언트 측에서 Captcha 응답의 유효성을 검사 할 수 있습니다. 에서 예 , 구글의 새로운 reCAPTCHA를은 ASP.Net RequiredField 검사기를 사용하여 유효성을 검사 할 수 있습니다.

<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" />
— 줄리아
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.