reCAPTCHA v3 g-recaptch 使用表單提交

Question

我想使用recaptcha api，但不想重寫這個函數。我的金鑰位於提交按鈕和表單標籤上。我可以看到它不產生令牌，只是發送網站密鑰。任何幫助都會很棒。

選項一使用表單標籤中的鍵

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

選項二使用按鈕標籤中的鍵

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

目標是使用此方法發送ajax請求

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

工作範例 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>