[javascript] 사용자가 Google recaptcha에서 확인란을 선택한 js를 확인하는 방법은 무엇입니까?

Program / 글쓴이

나는 머리의 끝에 다음을 추가했습니다

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

양식이 끝나기 전에 이것을 추가했습니다.

<div class="g-recaptcha" data-sitekey="== xxxxxx =="></div>

https://developers.google.com/recaptcha/ 와 유사한 recaptcha를 볼 수 있습니다.

단, 체크 박스를 체크하지 않고 데이터를 누르면 데이터가 제출됩니다. 사용자가 확인란을 눌렀는지 확인하기 위해 추가해야하는 다른 코드가 있습니까? 잘 만하면 js?

답변

Google에는 확인란이 선택되었을 때 콜백 옵션이 있습니다.

다음을 양식 요소에 추가하십시오.

data-callback="XXX"

예:

<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="== xxxxxx =="></div>

그리고 제출 버튼에 대한 비활성화 속성.

예:

<button id="submitBtn" disabled>Submit</button>

그런 다음 콜백 함수를 만들고 필요한 코드를 작성합니다.

예:

function recaptchaCallback() {
    $('#submitBtn').removeAttr('disabled');
};

답변

grecaptcha 객체를 호출하여 확인할 수도 있습니다. grecaptcha.getResponse();선택하지 않으면 비어 있고 선택하면 인증 코드가 있습니다.

grecaptcha.getResponse().length === 0 선택하지 않은 경우

function isCaptchaChecked() {
  return grecaptcha && grecaptcha.getResponse().length !== 0;
}

if (isCaptchaChecked()) {
  // ...
}

답변

있는지 확인하려면 구글의 reCAPTCHA를가 확인되지 않았거나 다음 코드에 의해 그것을 할 수 있습니다 : 

<script>

if(grecaptcha && grecaptcha.getResponse().length > 0)
{
     //the recaptcha is checked
     // Do what you want here
     alert('Well, recaptcha is checked !');
}
else
{
    //The recaptcha is not cheched
    //You can display an error message here
    alert('Oops, you have to check the recaptcha !');
}

</script>

답변

google recaptcha v2 가 선택 되었는지 확인하려면 다음 코드로 수행 할 수 있습니다. 

var checkCaptch = false;
     var verifyCallback = function(response) {
        if (response == "") {
             checkCaptch = false;
         }
         else {
             checkCaptch = true;
         }
     };
     $(document).ready(function() {
         $("#btnSubmit").click(function() {
             if (checkCaptch && grecaptcha.getResponse()!="") {
                  //Write your success code here
             }
         });
     })

답변

브라우저가 작업을 수행하도록하십시오! (slinky2000 답변 기준)

참고 : 이것은 ‘실수로’확인되지 않은 recaptcha를 보내는 것을 방지하기위한 것입니다. 봇이 신경 쓰지 않기 때문에 여전히 서버 측에서 recaptcha를 확인해야합니다 …

required=true바로 아래에 속성 이있는 보이지 않는 입력 태그를 추가 합니다 div.g-recaptcha.

<input id='recaptcha_check_empty' required tabindex='-1',
style='width:50px; height:0; opacity:0; pointer-events:none;
position:absolute;
bottom:0;'>

위가 recaptcha의 바닥 을 가리 키도록 두 너비 a div를 모두 묶습니다 .position=relative;bottom:0;

이제 브라우저는 요약을 가리키는이 필드를 채우도록 멋지게 요청합니다.

이제 콜백이 필요합니다. 

<div class="g-recaptcha" data-callback="recaptchaCallback" ...

과

function recaptchaCallback() {
    $('#recaptcha_check_empty').val(1);
}

답변