web-dev-qa-db-ja.com

ReCaptcha v2クライアント側イベント

ReCaptcha v2 はクライアント側イベントを公開しますか？ボックスにチェックが入ったらCaptchaレスポンスがいつ返されるかを特定するために、具体的に探しています。そのため、下の[続行]ボタンを表示できます。

enter image description here

これがないと、ユーザーはチェックボックスをクリックし、キャプチャ応答が戻る前に送信ボタンをすばやくクリックできます。

クラスrecaptcha-checkbox-checkmarkに独自のクリックイベントハンドラーを追加し、ティックの可視性をポーリングすることができます。これを行う簡単な方法があるかどうか疑問に思いましたか？

$(".recaptcha-checkbox-checkmark").click(function() {
    //...Poll for visibility of tick
});
javascriptrecaptcha
32
QFDev

G-recaptchaタグのdata-callback属性を使用して、または明示的なレンダリングを使用している場合は「callback」パラメーターを使用して、検証の成功時にコールバックを提供するようにreCAPTCHAを構成できます。

https://developers.google.com/recaptcha/docs/display#render_param を参照してください

明示的なレンダリングを使用した例：

var myCallback = function(val) { console.log(val); };
grecaptcha.render(
   document.getElementsById('my-recaptcha-placeholder'), 
   {
     callback: myCallback, 
     sitekey: mySiteKey
   });
24
Aaron

別の解決策は、data-callbackは直接g-recaptcha div、このように

<script type="text/javascript">
  var imNotARobot = function() {
    console.info("Button was clicked");
  };
</script>

<div class="g-recaptcha" data-callback="imNotARobot" data-sitekey="key"></div>
31
Oleander