在Javascript中

Question

我是网络开发的新手，我正在尝试将CAPTCHA放入我的网站。我被困在这里。我无法找到任何帮助。

以下是我的表格代码：

<tr>
    <td>
        <img src="html-contact-form-captcha/captcha_code_file.php?rand=<?php echo rand(); ?>" id='captchaimg' ><br>
    </td>
    </tr>
    <tr>
      <td align="right"><b> Enter Image Text </b></td>
      <td><input placeholder="Enter the code above here" id="6_letters_code" name="6_letters_code" type="text"><br>
          <small>Can't read the image? click <a href='javascript: refreshCaptcha();'>here</a> to refresh</small>
      </td>
    </tr>

在同一页面上，我试图通过以下代码验证此CAPTCHA：

var cde = document.getElementById('6_letters_code');
    if( cde.value == "" ||
        ($_SESSION['6_letters_code'] != $_POST['6_letters_code']) ) {

                alert( "Code Matched!" );
                //alert( "Code Doesn't Match! \n Code Not Entered!" );
                return false; 
   }

这就是我获取CAPTCHA的地方：（captcha.php）

session_start(); // Staring Session
$captchanumber = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyz'; // Initializing PHP variable with string
$captchanumber = substr(str_shuffle($captchanumber), 0, 6); // Getting first 6 word after shuffle.
$_SESSION["code"] = $captchanumber; // Initializing session variable with above generated sub-string
$image = imagecreatefromjpeg("bj.jpg"); // Generating CAPTCHA
$foreground = imagecolorallocate($image, 175, 199, 200); // Font Color
imagestring($image, 5, 45, 8, $captchanumber, $foreground);
header('Content-type: image/png');
imagepng($image);

任何帮助都将不胜感激。

提前谢谢。

Answer 1

在Javascript中

如果你想评估验证码在Javascript中是否正确，Javascript是在服务器上由PHP生成页面后在浏览器中运行的，那么Javascript必须有办法检查它。

为此，您必须使用会话，您可以在其中存储验证码值。使用以下步骤：

在生成表单的PHP文件的开头，您应该选择验证码。您将其存储在会话变量中。
您在PHP中生成验证码的哈希值并将其放在表单的隐藏字段中。为此字段指定一个正确的ID，以便您可以使用Javascript找到它。
```
$hash = sha1($captcha); // this is PHP code
```
使用存储的会话变量生成验证码的图像。
令人遗憾的是，Javascript没有任何原生哈希算法。其他人已经解决了这个问题：

http://caligatio.github.io/jsSHA/

所以现在你也可以在Javascript中制作用户输入到表单中的验证码的哈希值。您需要做的就是根据PHP在表单中的隐藏字段中放置的哈希进行检查。如果它们匹配Captcha是正确的。

正如您所看到的，这并不容易。

在PHP中

在提交表单后，更容易在PHP中进行检查。我想我可以假设你的captcha.php有效。在那里，您将$captchanumber存储在用户的会话中。那是个好主意。

所以你制作表格，将验证码放入其中，然后让用户提交。检查现在将在PHP中完成，如下所示：

$captchaNumber = $_SESSION['code'];
$userNumber    = $_POST['6_letters_code']; // a name starting with number? eh??
if ($captchaNumber == $userNumber)
{
  <.... the user did it correctly ....>
}
else
{
  // it was the wrong code, back to the form
  header('Location: '.<... url of form ...>);
}

在任何输出之前应使用header()函数。对于初学者，我建议将表单提交给另一个PHP脚本。一旦有效，您可以尝试将表单脚本和提交脚本合并到一个PHP脚本中。

Answer 2

请尝试以下代码。我希望它有效。我试图从头开始编写代码： -

<?php session_start();
// Staring Session
$im = imagecreate(90, 30);
$bg = imagecolorallocate($im, 255, 255, 255);
$textcolor = imagecolorallocate($im, 0, 0, 0);

$captchaKey = substr(md5(time()), 0, 5);
$_SESSION["code"] = $captchaKey;
imagestring($im, 45, 20, 5, $captchaKey, $textcolor);

//header("Content-type: image/png");
$save = "captcha.png";
$x1 = imagepng($im, $save);
?>

<script>
    function checkCaptcha() {
var cde = document.getElementById('6_letters_code');

if( cde.value == '<?php echo $_SESSION['code']; ?>
    ' ) {

    alert( "Code Matched!" );
    //alert( "Code Doesn't Match! \n Code Not Entered!" );
    return false;
    } else {
        alert('Code not matched!')
      }
    }
</script>

<tr>
    <td><img src="captcha.png" id='captchaimg' >
    <br>
    </td>
</tr>
<tr>
    <td align="right"><b> Enter Image Text </b></td>
    <td>
    <input placeholder="Enter the code above here" id="6_letters_code" name="6_letters_code" type="text">
    <br>
    <button onclick="checkCaptcha()">
        Click to check
    </button><small>Can't read the image? click <a href='javascript: refreshCaptcha();'>here</a> to refresh</small></td>
</tr>

如何使用php和jquery验证CAPTCHA

2 个答案:

在Javascript中

在PHP中