reCAPTCHA v3 g-recaptch verwendet die Formularübermittlung

Question

Ich möchte die Recaptcha-API verwenden, diese Funktion aber nicht neu schreiben. Meine Schlüssel befinden sich auf der Schaltfläche „Senden“ und dem Formularetikett. Ich kann sehen, dass das Token nicht generiert wird, sondern nur der Site-Schlüssel gesendet wird. Jede Hilfe wäre großartig.

Option eins verwendet Schlüssel in Formular-Tags

<form method="POST" name="Form" id="Form" data-sitekey="Form hjkhjkhjkhjk">

Option zwei verwendet Tasten aus Schaltflächenbeschriftungen

<button type="submit" 
    class=g-recaptch "btn btn-primary px-4 float-right" 
    data-sitekey="@reCaptchaKey">
   Submit
</button>

Das Ziel besteht darin, mit dieser Methode eine Ajax-Anfrage zu senden

$("#Form").submit(function(e) {
    e.stopPropagation();
    e.preventDefault();
    let formData = this.dataset.sitekey;
    console.log(formData);
    let submitter_btn = $(e.originalEvent.submitter);
    console.log(submitter_btn.data('sitekey'));
});

Arbeitsbeispiel https://jsfiddle.net/tjmcdevitt/8cawy1kb/18/

Answer 1

您必须使用 grecaptcha 对象的 execute 方法。为此，您需要向 reCAPTCHA 脚本加载添加渲染参数。有关详细信息，请参阅文档。

$(document).ready(function() {
    $("#Form").submit(function(e) {
        e.stopPropagation();
        e.preventDefault();
         let formData = this.dataset.sitekey;
         let submitter_btn = $(e.originalEvent.submitter);
        
        grecaptcha.ready(function() {
            grecaptcha.execute(submitter_btn.data('sitekey'), {
                action: 'submit'
            }).then(function(token) {
                // Add your logic to submit to your backend server here.
                consle.log(token);
            });
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?render=6LeO3zwnAAAAAOlJQ4RePB73qug2OWQ1XjBWyYbV"></script>
<form method="POST" name="Form" id="Form" data-sitekey="Form hjkhjkhjkhjk">
  <label for="fname">First name:</label>
  <br>
  <input type="text" id="fname" name="fname" value="John">
  <br>
  <label for="lname">Last name:</label>
  <br>
  <input type="text" id="lname" name="lname" value="Doe">
  <br>
  <br>
  <input type="submit" value="Submit" data-sitekey="6LeO3zwnAAAAAOlJQ4RePB73qug2OWQ1XjBWyYbV">
</form>