Question

我正在使用reCaptcha v2，但无论如何都要在开发控制台响应Uncaught (in promise) null中（并移动.reset()函数）

控制台：

我的验证码：

<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');

在Internet上搜索，可能是.reset()函数的问题，但我不知道解决方案。

Answer 1

Recaptcha v2 callback js error

我也有此错误，我发现与recaptcha回调有关（在您的情况下为data-callback="callback"）。如果您删除数据回调属性，则不会出现该错误。

控制台错误Uncaught (in promise) null表示回调正在等待Promise。这是使用promises进行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
}

这是我的第一个回答，所以请耐心等待，让我知道我是否忘记或错过了什么：）

Answer 2

困扰我的这个错误的另一个触发因素是表单中的按钮的名称属性为“ submit”。如果使用automatic binding example code from the reCaptcha documentation，它将使它跳闸，因为'form.submit'将引用按钮而不是表单本身的commit（）函数。 h！

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

Answer 3

我觉得我应该根据自己的经验在这里添加答案。我把最重要的答案归功于我的回答。

我得到了：Uncaught (in promise) null。当我在控制台中扩展错误时，该错误为空。

我从这里更改了代码：

function onSubmit(token) {
    if (grecaptcha.getResponse() !== "") {
        $('#request-form').submit();
    }
    grecaptcha.reset();
}

对此：

function onSubmit(token) {
    return new Promise(function (resolve, reject) {

        if (grecaptcha.getResponse() !== "") {
            $('#request-form').submit();
        }
        grecaptcha.reset();

    });
}

所做的更改是使您可以在控制台中收到特定的错误消息。然后，您可以继续解决您的特定问题。

Answer 4

在我的情况下，我的回调仅引用了一些不存在的变量，并且遇到了相同的错误。对于这么简单的事情，很奇怪的错误！

当我偶然在变量名后留下.时，我也看到了相同的错误。看来这是一个超级通用错误，表示fix the code in your callback!。

Answer 5

我遇到了这个问题。这是因为在我的回调函数中存在jquery代码，由于某种原因，我忘记了包含jquery脚本。因此，如果遇到此问题，建议您仔细检查回叫代码的每一行。可以逐行降低复杂度，您将获得解决方案。错误处理应该以更好的方式完成。

Answer 6

我使用的是ASP.NET Core 3.1 Identity，因此遇到了这个问题，并通过将jquery.validate.min.js和jquery.validate.unobtrusive.min.js更新为_ValidationScriptsPartial.cshtml中的最新版本来解决。

Answer 7

我遇到了同样的问题，问题是我没有将 localhost 添加到支持的域列表中。

Answer 8

类似于John Rix的问题/解决方案。当Submit元素的ID为'submit'时，我也收到错误消息。

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

Answer 9

@ChristianŽagarskas在评论中指出：

Turns out it also occurs when a site is not "registered" in the Google recaptcha/admin Domains area.

当我从开发密钥切换到生产密钥时，我犯了这个错误。生产密钥没有本地主机的任何条目。

我将api响应配置为位于代理重定向之后。因此，验证是在未在Google管理控制台中配置的本地主机环境中进行的，这导致了此常见错误。

如果您的验证位于代理重定向的后面，请解决错误的步骤：

登录已注册您的验证码的Google帐户
输入google“ google recpatcha管理控制台”
转到（生产）键的设置
在“域”中，添加以下两个条目：

localhost
127.0.0.1

保存并测试您的Recaptcha。

Answer 10

就我而言，我使用的是jquery.3.4.1.slim.js，然后更改为jquery.3.4.1.min.js，错误消失了。我在ASP.NET WebForms上。

Answer 11

我遇到了这个错误，因为我有：

const onChange = e => {
  e.preventDefault();
  console.log('success')
}

<ReCAPTCHA sitekey="yeet" onChange={onChange} />

删除 e.preventDefault() 删除了错误。

Google reCaptcha响应“未捕获（承诺）为空”

11 个答案: