web-dev-qa-db-ja.com

Google reCaptchaレスポンス「キャッチされていない（約束中）null」

私はreCaptcha v2を使用していますが、開発コンソールの応答ではUncaught (in promise) nullのいずれの場合でも（および.reset()関数の移動）

コンソール：

enter image description here

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

およびmyvalidate-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()関数ですが、解決策がわかりません。

javascriptphphtmlajaxrecaptcha
25
FABBRj

Recaptcha v2 callback js error

私もこのエラーを経験しましたが、recaptchaコールバックに関連していることがわかりました（あなたの場合はdata-callback="callback"）。データコールバック属性を削除しても、エラーは発生しません。

コンソールエラーUncaught (in promise) nullは、コールバックがプロミスを待っていることを示します。 Promiseを使用した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での最初の回答です。しばらくお待ちください。何かを忘れたり見逃した場合はお知らせください。

12
EsaulFarfan

私を悩ませたこのエラーの別のトリガーは、フォームに「submit」という名前の属性を持つボタンがあったことです。 reCaptchaドキュメントの自動バインディングのサンプルコード を使用する場合、「form.submit」はフォーム自体のsubmit（）関数ではなくボタンを参照するため、これは失敗します。ドッ！

<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>
10
John Rix

@ChristianŽagarskasはコメントでそれを指摘しました：

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

開発キーから本番キーに切り替えたときにこのエラーが発生しました。本番キーには、localhostのエントリがありませんでした。

プロキシリダイレクトの背後に座るようにAPI応答を構成しました。そのため、この一般的なエラーの原因となったGoogle管理コンソールで設定されていないローカルホスト環境で検証が機能していました。

検証がプロキシリダイレクトの背後に設定されている場合のエラーを解決する手順：

  1. Recaptchaキーが登録されているGoogleアカウントにサインインします
  2. Googleに「google recpatcha管理コンソール」と入力します
  3. （プロダクション）キーの設定に移動します
  4. 「ドメイン」で、次の2つのエントリを追加します。
localhost
127.0.0.1
  1. 保存して、recaptchaをテストします。
10
EliteRaceElephant

私の場合、コールバックは存在しない変数を参照しただけで、同じエラーが発生しました。非常に単純なものの非常に奇妙なエラー！

偶然に変数名の後に.を残したときにも同じエラーが発生しました。これはfix the code in your callback!を意味する非常に一般的なエラーのようです。

3
Trev14

私の場合、jquery.3.4.1.slim.jsを使用していましたが、jquery.3.4.1.min.jsに変更するとエラーが消えました。私はASP.NET WebFormsにいます。

0
Santiago Trejo

John Rixの問題/解決策に似ています。 submit要素のidが「submit」の場合にもエラーが発生しました。

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