reCAPTCHA v3 g-recaptch utilise la soumission de formulaire

Question

Je souhaite utiliser l'API recaptcha mais je ne veux pas réécrire cette fonction. Mes clés se trouvent sur le bouton Soumettre et sur l'étiquette du formulaire. Je peux voir qu'il ne génère pas le jeton, envoie simplement la clé du site. Toute aide est la bienvenue.

La première option utilise des clés dans les balises de formulaire

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

La deuxième option utilise les clés des étiquettes de boutons

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

Le but est d'envoyer une requête ajax en utilisant cette méthode

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

Exemple travaillé https://jsfiddle.net/tjmcdevitt/8cawy1kb/18/

Answer 1

Vous devez utiliser la méthode grecaptcha 对象的 execute. Pour ce faire, vous devez ajouter des paramètres de rendu au chargement du script reCAPTCHA. Voir la Documentation pour plus de détails.

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