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
captchaがクライアント側でクリックされたことを検証>何かを実行> recaptchaデータサーバー側を検証>何かを実行
— JPB 2018
2
ここでのサンプル例のチュートリアルをチェックfreakyjolly.com/...
— コードスパイ

回答:

103

このクライアント側の検証reCaptcha-以下は私にとってうまくいきました：

クライアント側でreCaptchaが検証されていない場合はをgrecaptcha.getResponse();返しnull、そうでない場合は以外の値を返しますnull。

JavaScriptコード： 

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified
— パラクタネジャ
ソース
112
これは誤りです。CaptchaはJSによって検証されていません。Captchaが正常に応答されたかどうかを判断するには、応答とサイトキーおよびシークレットキーをバックエンドコードからGoogleのサーバーに送信する必要があります。この答えは危険なほど間違っています。
— Sean Kendle 2017年
9
引用：reCAPTCHAがエンドユーザーによって解決されると、新しいフィールド（g-recaptcha-response）がHTMLに入力されます。developers.google.com/recaptcha/docs/verify
— CoalaWeb 2017
6
しかし、@ CoalaWebだけではありません。引用：応答トークンを取得したら、次のAPIを使用してreCAPTCHAでトークンを検証し、トークンが有効であることを確認する必要があります。 https://developers.google.com/recaptcha/docs/verify
— Dylan Smith
14
答えが正しくないと言っている人たちに、質問を読んだことさえありますか？質問と明確にクライアント側の指定の両方に答える-明白な意図はキャプチャが実際にクライアント側に充填されたことを確認することである前に、さらなる検証のためにサーバーにポストの要求を送信する...
— ロココ
4
ユーザーがクライアント側で実際に入力したかどうかのみを知ることができます。「g-recaptcha-response」の値は入力されますが、応答が有効かどうかを確認するために、Googleに送信する必要があります。たとえば、画像の一致では、何もクリックしないか、何もクリックせず、送信をクリックします。不正解ですが、「g-recaptcha-response」の値が入力されています。AJAXを使用して確認することもできますが、サーバー側のコードに秘密鍵を保存してください。簡単に言えば、サーバーは、AJAXを使用する場合でも、フルフォームの投稿を使用する場合でも、有効かどうかを確認する必要があります。
— Sean Kendle
60

これを使用して、簡単なJavaScriptでgoogle captchaを検証します。

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>このコードは、bodyセクションのspanタグのすぐ上
— Pravin Sharma '19
2
これがより良い解決策だと思います。このようにして、フォーム送信ハンドラーで応答の検証を処理できます。これは、キャプチャコールバックで処理しようとするよりも論理的です。オンザフライで検証するか、送信時に検証するかによって異なります。
— 電球1
4
===and を使用する必要があり!==ます。しない理由はありません。
— 15
28
この解決策は間違っています。応答を受け取ったら、検証のためにパラメーター（応答+ secretkey + ClientIp）をグーグルに送信する必要があると思います。検証後。Googleは成功または失敗を返します。あなたの例では、2番目のステップを使用しません。説明してください：あなたの秘密鍵はどこにありますか？いつ使うの？
— Mahmut EFE
3
Mahmutは正しいです。この答えは危険なほど間違っており、不完全です。
— Sean Kendle 2017年
27

単純化されたポールの答え：

ソース：

<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 2017年
これはどういうわけか私の要素に問題を引き起こしています。我々は要素内のデータ・コールバックを使用する場合のWebPACKはそれを自己をコンパイルすることはできません
— ファリスRayhan
2
これは、render関数を上書きする必要がないため、受け入れられる答えになるはずです。純粋にJSでの検証については、秘密鍵をJSに配置し、誰もがそれを手に入れられるようにする必要があるため、それが可能であるかどうかは疑問です。
— アスカーマン2018年
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
それを引っ掻いて、私はそれを理解しました-あなたのコードの一部が間違っているので、私は編集を提案します。乾杯！
— 2015
@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>
— imjosh
ソース
6

それらはすべて素晴らしいと思いましたが、実際にJavaScriptと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>
— タビッシュウスマン
ソース
したがって、次のようになります。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

残念ながら、キャプチャー自体の性質上、プロセスを完了するには少なくとも2つのアクター（サイド）が必要であるため、クライアント側のみ（Webブラウザー）でキャプチャーを検証する方法はありません。クライアント側-パズル、数学の等式、テキスト認識を解決するように人間に要求します。応答は、キャプチャタイムスタンプ、疑似ランダムチャレンジコードなどのメタデータとともにアルゴリズムによってエンコードされます。クライアント側がキャプチャレスポンスコードを使用してフォームを送信すると、サーバー側はこのキャプチャレスポンスコードを事前定義されたルールのセットで検証する必要があります。captchaが5分以内に解決された場合、クライアントのIPアドレスが同じ場合など。これは、非常に一般的な説明、キャプチャの動作、すべての単一の実装（GoogleのReCaptcha、自作のキャプチャを解くいくつかの基本的な数学の方程式など）、

NB。クライアント（Webブラウザー）には、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では、コールバック関数を使用して、クライアント側でキャプチャ応答を検証できます。で、この例では、Googleの新しい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.