web-dev-qa-db-fra.com

Réponse de Google reCaptcha "Uncaught (in promise) null"

J'utilise reCaptcha v2 mais dans la réponse de la console de développement Uncaught (in promise) null dans tous les cas (et en déplaçant la fonction .reset()) 

console:

 enter image description here

mon code pour recaptcha:

<div class="text-xs-center" style="text-align: center; height:150px;">
    <p style="color: black;"> Complete the verification: </p>
    <div style="display: inline-block;" class="g-recaptcha" data-sitekey="xxxxxxxxxxx" data-callback="callback"></div>
</div>

ma fonction de rappel:

function callback() {
    if (grecaptcha === undefined) {
        alert('Recaptcha non definito'); 
        return; 
    }

    var response = grecaptcha.getResponse();
    console.log(response);

    if (!response) {
        alert('Coud not get recaptcha response'); 
        return; 
    }

    $.ajax({
    'url' : 'validate-recaptcha.php',
    'type' : 'POST',
    'data' : {
        'response' : response   
    },
    'success' : function(data) {              
        alert('Data: '+data);
    },
    'error' : function(request,error)
    {
        alert("Request: "+JSON.stringify(request));
    }
    });
    grecaptcha.reset();
}

et mon validate-recaptcha.php:

<?php
//debug
$fp = fopen('debug.txt', 'a');
fwrite($fp, print_r($_POST, TRUE));
fclose($fp);
//enddebug

if (empty($_POST['recaptcha'])) {
    exit('Please set recaptcha variable');
}
// validate recaptcha
$response = $_POST['recaptcha'];
$post = http_build_query(
    array (
        'response' => $response,
        'secret' => 'yoursecretkey',
        'remoteip' => $_SERVER['REMOTE_ADDR']
    )
);
$opts = array('http' => 
    array (
        'method' => 'POST',
        'header' => 'application/x-www-form-urlencoded',
        'content' => $post
    )
);
$context = stream_context_create($opts);
$serverResponse = @file_get_contents('https://www.google.com/recaptcha/api/siteverify', false, $context);
if (!$serverResponse) {
    exit('Failed to validate Recaptcha');
}
$result = json_decode($serverResponse);
if (!$result -> success) {
    exit('Invalid Recaptcha');
}
exit('Recaptcha Validated');

En recherchant sur Internet, le problème est probablement lié à la fonction .reset(), mais je ne comprends pas la solution.

javascriptphphtmlajaxrecaptcha
11
FABBRj

Recaptcha v2 callback js error

J'ai eu cette erreur aussi et j'ai trouvé est lié au rappel recaptcha (dans votre cas, data-callback="callback"). Si vous supprimez votre attribut data-callback, l'erreur ne se produira pas.

L'erreur de console Uncaught (in promise) null indique que le rappel est en attente d'une promesse. Voici une fonction de rappel de base pour recaptcha utilisant des promesses:

function callback() {
    return new Promise(function(resolve, reject) { 

    //Your code logic goes here

    //Instead of using 'return false', use reject()
    //Instead of using 'return' / 'return true', use resolve()
    resolve();

  }); //end promise
};

Dans votre cas, vous devez adapter votre code à quelque chose comme ceci:

function callback() {
  return new Promise(function(resolve, reject) {  

    if (grecaptcha === undefined) {
        alert('Recaptcha non definito'); 
        //return;
        reject();
    }

    var response = grecaptcha.getResponse();
    console.log(response);

    if (!response) {
        alert('Coud not get recaptcha response'); 
        //return;
        reject();
    }

    $.ajax({
    'url' : 'validate-recaptcha.php',
    'type' : 'POST',
    'data' : {
        'response' : response   
    },
    'success' : function(data) {              
        alert('Data: '+data);
        resolve();
    },
    'error' : function(request,error)
    {
        alert("Request: "+JSON.stringify(request));
        reject();   
    }
    });
    grecaptcha.reset();

  }); //end promise
}

C’est ma première réponse dans SO, alors soyez patient et dites-moi si j’ai oublié ou oublié quelque chose :)

10
EsaulFarfan

Un autre déclencheur de cette erreur qui me tourmentait était d'avoir un bouton dans le formulaire avec l'attribut name 'submit'. Si vous utilisez le code de liaison automatique de la documentation de reCaptcha , cela le fera trébucher, car 'form.submit' fera référence au bouton plutôt qu'à la fonction submit () du formulaire lui-même. Doh!

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id='demo-form' action="?" method="POST">
      <!-- Oops.... avoid the name="submit" below -->
      <button name="submit" class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit'>Submit</button>
      <br/>
    </form>
  </body>
</html>
3
John Rix

Dans mon cas, mon rappel ne faisait que référencer une variable qui n'existait pas et j'ai constaté la même erreur. Erreur très bizarre pour quelque chose d'aussi simple!

J'ai aussi vu la même erreur quand j'ai laissé un . après un nom de variable par accident. On dirait que c'est une erreur super générique qui signifie fix the code in your callback!.

0
Trev14