Реакция Google reCaptcha "Неподготовлено (в обещании) null"

Я использую reCaptcha v2, но в ответе консоли консоли Uncaught (in promise) null в любом случае (и перемещение функции .reset())

приставка:

мой код для 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>

моя функция обратного вызова:

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();
}

и мой 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');

Поиск в Интернете, вероятно, проблема в функции .reset(), но я не понимаю решение.

Ответ 1

У меня тоже была эта ошибка, и я нашел связан с обратным вызовом recaptcha (в вашем случае data-callback="callback"). Если вы удалите атрибут обратного вызова данных, ошибка не появится.

Ошибка консоли Ошибка Uncaught (in promise) null указывает, что обратный вызов ожидает обещания. Здесь базовая функция обратного вызова для recaptcha с использованием обещаний:

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
};

В вашем случае вам нужно настроить код следующим образом:

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
}

Это мой первый ответ в SO, поэтому, пожалуйста, будьте терпеливы и дайте мне знать, если я что-то забыл или пропустил :)

Ответ 2

@Кристиан Жагарскас указал на это в комментарии:

Оказывается, это также происходит, когда сайт не "зарегистрирован" в области доменов Google recaptcha/admin.

Я сделал эту ошибку, когда я переключился с ключа разработки на ключ производства. В производственном ключе не было записей для localhost.

Я настроил ответ API, чтобы сидеть за перенаправлением прокси. Поэтому проверка работала в среде localhost, которая не была настроена в консоли администратора Google, что вызвало эту общую ошибку.

Действия по устранению этой ошибки, если ваша проверка находится за перенаправлением прокси-сервера:

Войдите в свою учетную запись Google, где зарегистрированы ваши ключи рекапчи
Введите в Google "консоль администратора Google Recpatcha"
Перейдите в настройки для своего (производственного) ключа
В разделе "Домены" добавьте эти две записи:

localhost
127.0.0.1

Сохраните его и протестируйте ваш recaptcha.

Ответ 3

Другой причиной этой ошибки, которая мучила меня, была кнопка в форме с атрибутом имени 'submit'. Если использовать пример кода автоматической привязки из документации reCaptcha, это приведет к его отключению, поскольку "form.submit" будет ссылаться на кнопку, а не на функцию submit() самой формы. 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>

Ответ 4

В моем случае мой обратный вызов только что ссылался на некоторую переменную, которая не существовала, и я увидел ту же ошибку. Очень странная ошибка для чего-то такого простого!

Я также видел ту же ошибку, когда я оставил . после имени переменной при аварии. Похоже, это супер общая ошибка, которая означает fix the code in your callback! ,

Ответ 5

В моем случае я использовал jquery.3.4.1.slim.js затем я переключился на jquery.3.4.1.min.js и ошибка исчезла. Я нахожусь на ASP.NET WebForms.

Ответ 6

У меня Uncaught (in promise) null ошибка из-за вызова неопределенной функции внутри функции обратного вызова, указанной для reCaptcha.

Если у вас есть такая ошибка, сначала внимательно проверьте функцию обратного вызова.

Ответ 7

Аналогично вопросу/решению Джона Рикса. Я также получил ошибку, когда id элемента submit был 'submit'.

<!-- Avoid id="submit" below -->
<input type="submit" id="submit" value="submit">'''