reCAPTCHA v3 g-recaptch menggunakan penyerahan borang

Question

Saya mahu menggunakan recaptcha api tetapi tidak mahu menulis semula fungsi ini. Kekunci saya ada pada butang hantar dan label borang. Saya dapat melihat ia tidak menjana token, hanya menghantar kunci tapak. Sebarang bantuan akan menjadi hebat.

Pilihan satu menggunakan kunci dalam tag borang

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

Pilihan dua menggunakan kekunci daripada label butang

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

Matlamatnya adalah untuk menghantar permintaan ajax menggunakan kaedah ini

$("#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'));
});

Contoh yang berkesan https://jsfiddle.net/tjmcdevitt/8cawy1kb/18/

Answer 1

Anda mesti menggunakan kaedah grecaptcha 对象的 execute. Untuk melakukan ini, anda perlu menambah parameter pemaparan pada beban skrip reCAPTCHA. Lihat Dokumentasi untuk butiran.

$(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>