php - 将基于PHP的reCaptcha插入基于jQuery的Shoutbox时遇到很多麻烦

Question

这是我第一次问堆栈溢出问题(但是，这不是我第一次利用对其他人问题的良好回答)。我是一位经验丰富的网站程序员，因此请放心，我总是尽力在凌晨之前解决缺乏正确指导的工作方式。这就是堆栈溢出真正派上用场的时候。但是，这次，我已经三四天没有碰到PHP墙了。因此，我要求对此事提供一些帮助。

现在，本质上，编程纯粹是数学。这就是为什么人们最终可以理解其语言以及发生了什么的原因。我达到了成为一个非常有经验的AS程序员的地步，然后我决定从Flash切换到使用JS和jQuery(可以说是竞争)尝试HTML并坠入爱河。不过，我还是那个 Realm 的业余爱好者。但是我与PHP的关系完全不同:我不理解它，也没有耐心。对我来说是梵文。也许我还没有足够地使用它来掌握它，但是对于我来说，就像JS和HTML以及AS和ETC一样，这似乎对我没有逻辑意义。做。

无论如何，我的困境:

我基于此处给出的出色代码http://yensdesign.com/2009/01/create-a-shoutbox-using-php-and-ajax-jquery/构建了一个自定义 Shoutbox 。但是，该代码不包含验证码，这使其完全容易受到SPAM攻击。因此，我首先设计了一个简单的验证码，该验证码由包含数字的各种图像组成，所有图像加起来等于一个特定的数字。现在，我试图变得花哨，并且一直在尝试添加 Google reCaptcha 。

ReCaptcha是基于PHP的。 Sbox确实使用PHP，但是一旦JS文件执行了表单检查工作；它使用PHP最终保存输入到mySql数据库中的数据，并检索以前保存的要显示的数据。我尝试将reCaptcha PHP代码放入该过程的这一部分，但实际上并没有用，因为它所做的只是阻止输入数据并阻止检索数据。我需要的是一开始就可以停止该过程的东西，例如说:“嘿!您输入了错误的验证码，您的Spam-bot，您!”

我也尝试过将PHP放入JS文件中。 。 。最后，经过一番努力，出现了一个句子:“JS是基于客户端的； PHP是基于服务器的”。好消息，我可能几天前就来过。对我来说是业余的，现在我明白了为什么PHP如此繁琐。

无论如何，我尝试将PHP上下上下放置，得到零，零，零。

我希望我对此问题有足够的背景。关于我的第一个堆栈溢出问题的反馈将很有帮助。尤其有帮助:破解这个谜题的任何帮助都可以折腾。

reCaptcha PHP代码如下:

<?php

$privatekey = "your_private_key";
$resp = recaptcha_check_answer ($privatekey,
       $_SERVER["REMOTE_ADDR"],
       $_POST["recaptcha_challenge_field"],
       $_POST["recaptcha_response_field"]);
if (!$resp->is_valid) {
       // What happens when the CAPTCHA was entered incorrectly
       die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
       "(reCAPTCHA said: " . $resp->error . ")");
} else {
       // Your code here to handle a successful verification
}

?>

这就是reCaptcha上的内容，除了样式。似乎很简单!

我认为Shoutbox代码太多，太长，无法在此处包含和使帖子饱和。但是它们在上面给出的链接中。它们基本上是HTML Shoutbox，其JS文件以及PHP信息保存和检索。

另外，为了进一步引用，到目前为止，我将链接添加到包含我在Shoutbox上的工作的RAR文件。正如您将看到的，在页面底部有一个预加载器。当出现以前的消息列表时，它应该关闭。由于我在JS文件中摸索地放置了过分的PHP，因此它不起作用-毫无疑问，这是返回并且错误停止了JS序列。如果您注释PHP或将其删除，则序列应完成，并且随着预加载器的消失，至少应显示一条“找不到数据库... bla bla”消息，这意味着Shoutbox可以正常工作(但没有验证码) 。

RAR文件voilà: (不再可用)

在此先感谢您的耐心配合，以及您能给我提供的任何帮助!

编辑1:

好的，这是按照J. Bruni关于下面的练习的说明进行的更新。

因此，按照J. Bruni的建议，假设我已正确理解它们，则只取出了 iframe。我保留了reCaptcha的其余部分，因为它对本练习来说是多余的(此外，我需要Captcha图像才能测试事物是否真正起作用)。如您所见， form最初未设置为发布到特定的输出文件(原因是它具有用于该文件的JS文件)，但是，正如J. Bruni推荐的练习所进行的那样，我将其设置为 action="shoutbox.php" 。这意味着它现在完全绕开了JS文件。

测试:我得到了WRONG WORDS和RIGHT WORDS消息J. Bruni相应地编码到了原始的reCaptcha PHP代码中，所以现在一切正常，至少与reCaptcha有关。

但是，正如我所说，JS文件已被完全绕开。我做的最初的深夜测试之一，我尝试了一些类似于J. Bruni提出的测试。我试图通过此reCaptcha代码在PHP文件的顶部返回一个true / false语句，以便可以对其进行条件处理，以及该函数返回的true / false来检查所有字段是否已填充(客户端，在JS中)文件)，以便在所有条件为true时继续进行操作，或者在所有条件为false时返回错误消息。您可能会猜到，但我后来在这里遇到的问题是，我后来才明白，一个检查是在客户端进行的，而另一检查是在服务器端进行的；你怎么能把他们俩都配对？ (如果可以的话。)我的问题是: 是否可以同时“并行”运行PHP和JS，然后将各自的结果汇总在一起？ 听起来已经不可能了；作为一个客户端，它听起来立竿见影，而另一个在服务器端，则听起来很遥远。

此外，也许敏锐的程序员会在此时说:为什么要分别处理这两项检查？似乎很杂乱和不必要；它们可能都在PHP中。唉!问题是，尽管我知道如何将表单的输入文本变量直接发布到PHP文件，但我不知道如何将其余部分转换为PHP!甚至不知道它是否可以翻译。真的，如果我选择了，我宁愿找到一种将其全部变成JS的方法。但是，J。Bruni明智地指出了这一点:

You need some server-side code, because you can't show your private key to the public... A tech user would very easily bypass the whole verification, if everything is done client-side, and nothing server-side.

因此，在上面我解释的第一个深夜练习导致惨败之后，我尝试将其余的shoutbox.php代码调整为返回true的reCaptcha函数。如果返回false，则PHP代码将在那里停止。但是，这意味着在提交新表单之前，Shoutbox中不会显示以前的消息；并且即使这样，也要以有效提交表单为条件(这意味着正确输入reCaptcha)。如果表单返回假，则不会发生任何事情，只需重新加载页面即可。我们可以同意，出于多种原因，这是不切实际的。另一方面，将PHP代码的两个部分分开，使一个运行独立于reCaptcha条件，另一个独立于reCaptcha条件，实际上并没有太大的区别。

那时，我尝试将reCaptcha PHP检查插入JS文件，这在我看来是唯一的出路。我们都知道结局是什么!它把我带到这里，请您放心。而且，正如J. Bruni明智地指出的那样，我没有做过这样的事情，让我的私有(private)ID客户端可以不 protected 地将其提供给世界。

因此，在J. Bruni建议的练习之后，我现在认为reCaptcha本身可以正常工作。如果将表单直接发布到PHP文件，并且如果JS文件中负责收集表单值并检查它们是否正确的部分已转录到PHP文件中，那么我猜Sbox可能在基本水平。但是，现在，并且没有reCaptcha，Sbox可以100％正常运行，一切尽兴而归。必须有一种方法可以插入该织补的reCaptcha，并且Sbox仍处于工作状态。现在，我必须弄清楚如何制作一种“绕道”，让JS文件同时发挥其魔力，而PHP则发挥其作用。但是，老实说，我不确定哪个更实用:首先检查表单是否已填写，如果未填写则返回错误，然后再检查是否正确输入了reCaptcha或相反。正如我在上面告诉您的第一个深夜审判示例中尝试做的那样，可以总是将它们拍打在一起。但是，当然，对它们进行单独检查会更容易，因此您可以告诉用户确切的位置。我所知道的是，在发现表单或reCaptcha中出现错误或不正确的输入时，从一开始就停止发送表单听起来更实际，而不是让数据一直发送到数据库在检查其有效性之前。考虑到这一切都在几分之一秒之内完成，也许这是一个有争议的问题，但这听起来很困惑。你怎么看？

无论如何，我将在接下来的几天内尝试破解此问题，并告诉您我的工作方式。但是，如果在此期间有人的灯泡闪烁，请作为我的客人加扰，并向我展示隧道尽头的另一种可能性。

注意:顺便说一句，我已经意识到(至少在直接发布到PHP时)reCaptcha需要和额外的脚本，这些脚本要求每次以除刷新之外的其他任何方式将页面带回时都刷新它。结果打印后，按BACK。否则，验证码图像将保持不变，但显然，reCaptcha认为它显示了另一个挑战。如果您尝试用相同的图像回答相同的reCaptcha，则可能已经知道是正确的，它将返回错误的结果。对我来说，这意味着挑战总是自动重新加载，但是由于某种原因，在这种特定情况下，图像保持不变。只是抬起头。

编辑2

好的，正如J. Bruni所注意到的，我们俩都忽略了“!”在PHP文件的 if语句中。现在，此问题已得到纠正。

怎么...是的，但是，另一个问题出现了。

嗯 if语句已得到纠正，现在确实返回“错误的验证码”警报。但是出于某种原因，无论如何，reCapthca都是 ，始终返回“错误”。昨天，即使没有输入验证码或输入了错误的验证码，该表格也始终处于打印状态，因为正如Bruni指出的那样， if语句将为输入的验证码输入错误返回正数，在这种情况下，表格将继续进行并如果验证码错误则打印(如果正确则不打印)。总是错的，这就是为什么它始终打印的原因。更正 if语句以在验证码正确时返回正值，这表明该验证码为 总是返回错误的答案，因为现在您始终会收到“错误的验证码”警报。因此，此特定问题必须存在于其他地方。

现在，正如我在各种场合所说的那样，我对PHP的迷失一如既往。因此，我无法确定PHP中的 if/else语句是否正确。但是，如果我的其他经验对我有用，那么看来JS文件中的 if语句可能缺少某些内容，使它警告 和停止了 complete: function(data)函数的其余部分，因为在我看来，其余 complete: function(data)功能始终处于播放状态。无论如何，由于 alert()语句的结果，我不将 if放在方括号中似乎很奇怪。也许，即使 if语句错误，仍然在播放 alert()和该函数的其余部分，因为它需要使用括号...但是因为这部分是AJAX，所以我可能会说胡言乱语并且吠叫了错误的树。如果我错了，请纠正我。

我将尝试解决该问题并将其隐藏在哪里。当我获得100％正常运行的Sbox时，我会将最终产品发布到此处，以便所有可能遇到相同或相似问题的人都可以使用。

编辑3

我的直觉是正确的，因为 if函数中的 complete: function(data)语句需要放在方括号内；否则，无论PHP reCaptcha检查是否返回“错误”，始终都会显示“错误的验证码”警报。
complete: function(data){

if (data.responseText == 'wrong') {

alert('Wrong captcha');

}

messageList.html(data.responseText);

updateShoutbox();

...
附言无法使代码正确显示在此页面上...我正在尝试遵循右侧的格式化指南，但无济于事。

P.P.S. ReCaptcha仍然总是返回“错误”。如有更新，将更新进度。

Answer 1

一旦我尝试使用AJAX加载reCaptcha。没用我没有尝试过太多，因为我可以简单地使用AJAX而不是来使用，这就是我所做的。不能通过AJAX使用的相同代码以简单的形式工作。

另外，正如您所说，reCaptcha 不是基于PHP的。您可以使用任何服务器端语言(包括PHP)。

我已经调查了您的 index.php 文件。在自定义外观之前，让我们尝试进行基础工作。我已经看到iframe和script标签的混合。您所需要的就是这样简单(假设您的公钥是以“6Ld_b8”开头的字符串:

<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6Ld_b84SAAAAAAv1Ds1vYHxQjyoowiCPkARtvB2W"></script>

移除iframe。您现在可以删除其他与Recaptcha相关的内容。

因此，您有一个form，它将被发布到 shoutbox.php 。然后，仅需片刻，在此文件的开头添加您粘贴在问题中的代码。您需要包括 recaptchalib.php ，并且需要用“your_private_key”代替reCaptcha私钥。因此，代码将如下所示:

// put this on top of shoutbox.php
include "recaptchalib.php";
$privatekey = "your_private_key"; // change this here to your reCaptcha private key!
$resp = recaptcha_check_answer ($privatekey, 
       $_SERVER["REMOTE_ADDR"],
       $_POST["recaptcha_challenge_field"],
       $_POST["recaptcha_response_field"]);
if (!$resp->is_valid) {
       echo '<b>WRONG WORDS!</b>';
} else {
       echo '<b>CORRECT WORDS! GREAT!</b>';
}
exit();

现在，您可能想尝试一下，看看会发生什么，然后告诉我们。

编辑1

您只需要在 shoutbox.php 内的适当位置添加reCaptcha验证。似乎可以在“case insert”部分中或“insertMessage”函数中:

    case "insert":
        include "recaptchalib.php";
        $privatekey = "your_private_key"; // change this here to your reCaptcha private key!
        $resp = recaptcha_check_answer ($privatekey, 
            $_SERVER["REMOTE_ADDR"],
            $_POST["recaptcha_challenge_field"],
            $_POST["recaptcha_response_field"]);
        if ($resp->is_valid)
            echo insertMessage($_POST['nick'], $_POST['message']);
        break; 

您是否在JavaScript代码中看到了complete: function(data){行？它是$.ajax函数调用选项之一。它指定在 PHP代码运行后将运行的函数，并将其响应发送回浏览器。来自服务器的响应将在data参数中的某个位置供您使用。如果您想为用户显示一条消息，以在验证码“单词不正确”的情况下警告他，则需要:

从服务器端返回一些内容(PHP代码):

    if ($resp->is_valid)
        echo insertMessage($_POST['nick'], $_POST['message']);
    else
        echo 'wrong';

在客户端使用此返回信息(JS代码):

$.ajax({  
    type: "POST", url: "shoutbox.php", data: "action=insert&nick=" + nick + "&message=" + message,  
    complete: function(data){
        if (data.responseText == 'wrong')
            alert('Incorrect captcha words! Try again.');
        messageList.html(data.responseText);  
        updateShoutbox();  
        //reactivate the send button  
        $("#send").attr({ disabled:false, value:"Shout it!" });  
    }  
 });  

是的，您将需要重新加载reCaptcha(对于BACK按钮，如果是提交，则不会成功)。对于后退按钮，可以使用PHP或HTML“meta”标签设置“Expires” HTTP header ，以强制重新加载页面。对于其他情况(提交ajax表单之后)，您可以通过使用JavaScript / jQuery替换HTML来请求新的挑战。将挑战包装在div中:

<div id="challenge">
    <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
    <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6Ld_b84SAAAAAAv1Ds1vYHxQjyoowiCPkARtvB2W"></script>
</div>

并在必要时“重新加载”它:

function reloadCaptcha(){
    $('#challenge').html('<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" /><script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6Ld_b84SAAAAAAv1Ds1vYHxQjyoowiCPkARtvB2W"></script>');
}