Ajax & Google 验证码

Question

我正在尝试将 reCaptcha 添加到我网站上的取消表单中。我已经按照有关如何操作的视频教程进行操作，但是我正在努力使其适应我的表单，该表单使用 ajax 调用 PHP 文件并且实际上并未提交表单。我已经尝试了前面问题中建议的一些事情，但是 none 似乎得到了预期的结果，而是在注册页面上显示了 "I don't like robots"。如果您能想到任何提示/建议，那就太好了。

<div class="g-recaptcha" data-sitekey="6LcXMg0UAAAAABmlDlOGa6onxqqzERZ483XOJbFm"></div>

Javascript

function Register(){
        var Forename = $("#txtForename" ).val();
        var Surname = $("#txtSurname" ).val();
        var Password = $("#txtPassword").val();
        var PasswordR = $("#txtPasswordR").val();
        var response = $("#g-recaptcha").val();
            $.post('functions/php/fncregister.php', {Forename: Forename, Surname: Surname, Password: Password, PasswordR: PasswordR, response: response}, function(data) {
                var returnValue = JSON.parse(data);
                if (returnValue['data'] == 0){
                    $('#mdlInfo').html('<p>Your account has been created under the username: <strong><span id="spnUsername">'+returnValue['username']+'</span></strong>. You <strong>must</strong> remember this as you will require it to log into your account.</p><p>Your account has also been added to a moderation que. <strong>You must wait until a member of staff activates your account!</strong></p>');
                    $("#mdlRegister").modal("show");
                }
                else if (returnValue['data'] == 1){
                    $('#divError').html('<p class="text-center text-danger bg-danger" id="pUPInc">Passwords did not match!</p>');
                }
                else if (returnValue['data'] == 3){
                    $('#divError').html('<p class="text-center text-danger bg-danger" id="pUPInc">An error occured when adding your details to the Database!</p>');
                }
                else if (returnValue['data'] == 4){
                    $('#divError').html('<p class="text-center text-danger bg-danger" id="pUPInc">I don\'t like Robots!</p>');
                }
            });
    }

PHP

<?php
//Retrieves variables from Javascript.
$Forename = $_POST["Forename"];
$Surname = $_POST["Surname"];
$Password = $_POST["Password"];
$PasswordR = $_POST["PasswordR"];

//reCaptcha
$Url = "https://www.google.com/recaptcha/api/siteverify";
$SecretKey = "---KEY---";
$Response = file_get_contents($Url."?secret=".$SecretKey."&response=".$_POST['response']."remoteip=".$_SERVER['REMOTE_ADDR']);
$Robot = json_decode($response);

$data = 0;

if(isset($Robot->success) AND $Robot->success==true){
    //OTHER CODE
}

else{
    //This code always runs (though this is only meant to happen if reCaptcha detects a robot.
    $data = 4;
        echo json_encode(["data"=>"$data"]);
?>

Answer 1

在这里，注意变量的大小写很重要：

$Response = file_get_contents($Url."?secret=".$SecretKey."&response=".$_POST['response']."remoteip=".$_SERVER['REMOTE_ADDR']);
//   because variables are case sensitive...
$Robot = json_decode($Response);  // it is $Response, not $response

如果这不能解决问题，请使用此生成的输出更新您的问题：

$Response = file_get_contents($Url."?secret=".$SecretKey."&response=".$_POST['response']."remoteip=".$_SERVER['REMOTE_ADDR']);
die('Response file: <pre>'.$Response);
$Robot = json_decode($Response);

也请务必对您要发送至 google:

的变量进行 urlencode()

$Response = file_get_contents($Url."?secret=".urlencode($SecretKey)."&response=".urlencode($_POST['response'])."remoteip=".urlencode($_SERVER['REMOTE_ADDR']));

但到目前为止，您必须

$Robot = json_decode($Response);  // and NOT $response

这里是一个屏幕截图，显示了如何从 ajax 调用中获取输出，其中您在 php 处理中有 die() 说 ajax 调用：

最佳解决方案

Review this guide on how to install Google reCAPTCHA with PHP

Answer 2

不太确定我是如何让它工作的，但我做到了。

首先，我在 Javascript 中添加了一个新变量 "Response" 并使用文档中列出的函数来检索当用户证明他们不是机器人。我也将此变量添加到我的 AJAX 调用中，以便将其传递到 PHP 文件，如下所示：

function Register(){
    var Forename = $("#txtForename" ).val();
    var Surname = $("#txtSurname" ).val();
    var Password = $("#txtPassword").val();
    var PasswordR = $("#txtPasswordR").val();
    var Response = grecaptcha.getResponse();
        $.post('functions/php/fncregister.php', {Forename: Forename, Surname: Surname, Password: Password, PasswordR: PasswordR, Response: Response}, function(data) {
            var returnValue = JSON.parse(data);
            if (returnValue['data'] == 0){
                $('#mdlInfo').html('<p>Your account has been created under the username: <strong><span id="spnUsername">'+returnValue['username']+'</span></strong>. You <strong>must</strong> remember this as you will require it to log into your account.</p><p>Your account has also been added to a moderation que. <strong>You must wait until a member of staff activates your account!</strong></p>');
                $("#mdlRegister").modal("show");
            }
            else if (returnValue['data'] == 1){
                $('#divError').html('<p class="text-center text-danger bg-danger" id="pUPInc">Passwords did not match!</p>');
            }
            else if (returnValue['data'] == 3){
                $('#divError').html('<p class="text-center text-danger bg-danger" id="pUPInc">An error occured when adding your details to the Database!</p>');
            }
            else if (returnValue['data'] == 4){
                $('#divError').html('<p class="text-center text-danger bg-danger" id="pUPInc">I don\'t like Robots!</p>');
            }
        });
}

在我的 PHP 文件中，我从 URL post 中删除了用户 IP 地址，因为根据文档它是可选的（虽然不确定这样做的好处）。 Google 然后 returns 有关请求的信息，如果成功，则项目 "success" 在我的代码中为真，因此继续生成帐户：

$Url = "https://www.google.com/recaptcha/api/siteverify";
$SecretKey = "---KEY---";
$Response = file_get_contents($Url."?secret=".$SecretKey."&response=".$_POST['Response']);
$Robot = json_decode($Response);

$data = 0;

if(isset($Robot->success) AND $Robot->success==true){

最后没有用POST，而是用了GET。我确信它有一些安全优势，因为它会隐藏密钥，所以我会尽快研究它。

感谢@WEBjuju 和我的伙伴 "Bridge Troll" 的帮助。没有他们中的任何一个我都做不到。

Ajax & Google 验证码

Ajax & Google reCaptcha

html

javascript

php

ajax

recaptcha