我如何使用 JavaScript/jQuery 驗證 Google reCAPTCHA v2？

我在 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 點擊時驗證驗證碼。

請幫忙。

答案＃1

這個客戶端驗證 reCaptcha - 以下對我有用：

如果在客戶端未驗證 reCaptcha，grecaptcha.getResponse(); 會返回 null，否則會返回非 null 的值。

Javascript 程式碼：

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified

答案＃2

使用這個來用簡單的 JavaScript 驗證 Google 驗證碼。

這段代碼在 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; 
    }
}

答案＃3

如果你在回調中呈現 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 成功之前禁用提交按鈕之類的操作——在這種情況下，上述方法應該可行。

希望這對你有幫助。

保羅

答案＃4

簡化保羅的回答：

來源：

<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);
    };