如何在客户端验证 google recaptcha？

Posted 2023-05-08

【中文标题】如何在客户端验证 google recaptcha？

【英文标题】：How to validate google recaptcha on client side?

【发布时间】：2016-01-01 22:40:54

【问题描述】：

我在 3 次登录失败后显示的登录面板上实现了 google reCaptcha

但我想在单击登录按钮时使用 jQuery 在客户端幻灯片上验证 reCaptcha，这是代码

<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 做到这一点？

【问题讨论】：

永远不要公开分享您的凭据，至少不要公开 API 提供的私钥。

看看这个链接Recaptcha Validation From Client它会给你一个粗略的想法如何实现一个，请访问recaptcha页面并生成一个新的credential。

【参考方案1】：

我分享我的代码解决方案。但是您可能会发现 proxy.php 和其他详细信息以及完整说明（包括后端部分）here。

带有数据回调参数的验证码

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

注意！

后端部分，proxy.php，由于安全问题是必要的。

【讨论】：

这里的密钥在哪里？您调用 API 错误。它不会工作。

@ShaikhShahid，密钥不得在客户端公开。请参阅 proxy.php here.

所以你有一个后端？标题令人困惑。

@ShaikhShahid，后端由于安全问题是必要的。对不起，如果标题让您感到困惑。