web-dev-qa-db-fra.com

"Erreur: ID client ReCAPTCHA non valide" lors de l'exécution d'un captcha invisible

J'essaie d'implémenter le reCAPTCHA invisible de Google sous forme HTML dans un site Web Wordpress.

Dans le head

Tout d'abord, j'ai le script qui configure les rappels et lie l'événement de soumission du formulaire à la vérification:

jQuery(document).ready(function() {
  var valid = false;

  window.recaptchaOkay = function(token) {
    valid = true;
    jQuery('#cadastro').submit();
  };

  document.getElementById('cadastro').addEventListener('submit', function validate(event) {
    if (valid) {
      return true;
    }

    var cap = document
        .getElementById('cadastro')
        .querySelector('.g-recaptcha');
    grecaptcha.execute(cap);

    event.preventDefault();
    return false;
  });
});

Ensuite, je charge le script reCAPTCHA, précisément comme indiqué dans la documentation:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Dans le body

Et voici le formulaire que j'utilise:

<form action="https://example.com/" method="post" id="cadastro">
    <div
        class="g-recaptcha"
        data-sitekey="6Lc0jC4UAAAAANlXbqGWNlwyW_e1kEB89zLTfMer"
        data-callback="recaptchaOkay"
        data-size="invisible"
        id="cadastro-captcha">
    </div>
    <button type="submit" id="cadastro-submit">Enviar</button>
</form>

Ce qui se produit

Je remplis le formulaire, le soumets et l'erreur suivante est levée (dans la ligne avec grecaptcha.execute):

Error: Invalid ReCAPTCHA client id: [object HTMLDivElement]

Vous avez également essayé de passer l'ID cadastro-captcha Directement à cette fonction sous la forme d'une chaîne (par exemple grecaptcha.execute("cadastro-captcha")), mais la même erreur se produit (sauf que l'ID est différent, évidemment). De même, si je ne passe aucun argument, la même erreur se produit, sauf qu'elle fait référence à undefined.

javascriptwordpressrecaptchainvisible-recaptcha
9
Kroltan

Essayez celui-ci: -

La méthode grecaptcha.reset () accepte un paramètre widget_id facultatif et utilise par défaut le premier widget créé s'il n'est pas spécifié. Un widget_id est renvoyé par la méthode grecaptcha.render () pour chaque widget créé. Vous devez donc stocker cet identifiant et l'utiliser pour réinitialiser ce widget spécifique:

var widgetId = grecaptcha.render(container);
grecaptcha.reset(widgetId);

Si Plus d'informations, lisez les documents google recaptcha: - https://developers.google.com/recaptcha/docs/display#js_api

10
Harveer Singh Aulakh