Как проверить Google recaptcha на стороне клиента?

Я реализовал Google reCaptcha на панели входа, показывающей после 3 неудачных входа

Но я хочу проверить reCaptcha на слайде клиента с помощью jQuery при нажатии кнопки login вот код

<div style="display:none;width:310px;top:205px;left:558px;position:absolute" id="grecaptcha" runat="server">
  <cc1:GoogleReCaptcha  ID="ctrlGoogleReCaptcha1"  runat="server" PublicKey="6LdHrQ0TAAAAAD77ubv9Jr6q4RYkyddhXzX-XPB3" PrivateKey="xxxxxxx" />

  </div>
  <span id="captcha" style="margin-left:588px;color:red" />
<asp:Button ID="LoginButton" runat="server" OnClientClick="get_action();" CommandName="Login" Text="Inloggen" ValidationGroup="Login1" />

Как это сделать с помощью jQuery?

1 4
html jquery recaptcha

1 ответ:

Я делюсь своим решением кода. Но прокси .php и другие детали с полным объяснением (ВКЛ. backend часть) вы можете найти здесь.

Recaptcha с data-callback параметром 

<script src="https://www.google.com/recaptcha/api.js" >;
<form method="post">
<div class="g-recaptcha" data-sitekey="[site_key]" data-callback="onReturnCallback" data-theme="light"></div>
<input value="submit" type="submit" />
</form>

Проверка JS 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var onReturnCallback = function(response) { 
    //alert('g-recaptcha-response: ' + grecaptcha.getResponse()); 
    var url='proxy.php?url=' + 'https://www.google.com/recaptcha/api/siteverify';  
    $.ajax({ 'url' : url, 
               dataType: 'json',
               data: { response: response},
               success: function( data  ) {                     
                var res = data.success.toString();
                        alert( "User verified: " + res);                    
                if (res ==  'true') { 
                       document.getElementById('g-recaptcha').innerHTML = 'THE CAPTCHA WAS SUCCESSFULLY SOLVED'; 
                                } 
                           } // end of success: 
         }); // end of $.ajax 
}; // end of onReturnCallback 
</script>

Внимание!

Серверная часть, прокси.php , необходим из-за проблемы безопасности.

3