איך אני יכול לאמת את Google reCAPTCHA v2 באמצעות JavaScript/jQuery?

יש לי טופס צור קשר פשוט ב-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

השתמש בזה כדי לאמת קפטצ'ה של גוגל עם ג'אווהסקריפט פשוט.

הקוד הזה בגוף ה-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);
};

כל זה היה מההערות של ממשק התכנות של גוגל:

הערות API של Google Recaptcha v2

אני קצת לא בטוח למה אתה רוצה לעשות את זה. בדרך כלל היית שולח את השדה 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);
    };