php ajax 验证图片

Mrfei

　　CAPTCHA is a simple test to determine if a user is a computer or ahuman. It is used to prevent spam abuse on the websites. So if youuse CAPTCHA on your web site forms, this can help in stopping some botsand making life harder for other bots in accessing or using your forms.
　　In brief the CAPTCHA protection works by generating a random string,writing it to an image, then storing the string inside of a session orby some other method. This is then checked when the form is submitted.
　　The goal of this tutorial is to demonstrate how to make your own simple CAPTCHA protection using PHP and AJAX technologies.
　　This tutorial is very simple, but if you are unfamiliar with PHP andAJAX this is a great place to start. The tutorial consists of a HTMLpage for presenting a simple form that will send the data, a JavaScriptfile for handling the Ajax functionality, and a simple PHP page thatmakes the actual comparison of the what is in the text box compared towhat phrase was stored in the image.

• The AJAX HTML Page (the Front-end)
  
• The JavaScript
  
• The PHP Server Page (the Backend)
  
• The Ways to Make It More Secure
  

The AJAX HTML Page (the Front-end)
　　The front-end of this tutorial is straight forward. We are going tocreate a simple HTML form with a textbox for entering the securitycode, dynamically generated image holding this code, a button forsubmitting, and a DIV that we will display the CAPTCHA test result. Thefollowing example shows how you can do that. Create a new file namedcaptcha_test.htm, and add this code to it.
<form id="frmCaptcha" name="frmCaptcha">
<table>
  <tr>
    <td align="left">
      <label for="captcha">Captcha</label>
    </td>
    <td>
      <input id="txtCaptcha" type="text" name="txtCaptcha" value="" maxlength="10" size="32" />
    </td>
    <td>
      <img id="imgCaptcha" src="create_image.php" />
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <input id="btnCaptcha" type="button" value="Captcha Test" name="btnCaptcha"
           />
    </td>
  </tr>
</table> 

<div id="result">&nbsp;</div>
</form>
　　After the textbox and the button we have added the result DIV. Wehave given it an ID so we can address it through the DOM in ourJavaScript. It can easily be a SPAN or any other HTML element that cancontain text. The button onclick event will start the AJAX request tothe server to make the comparison.
　　Below is a php script that generates the CAPTCHA image and set asession that stores the security code. Create a new file namedcreate_image.php, and add this code to it.
<?php
//Start the session so we can store what the security code actually is
session_start();

//Send a generated image to the browser
create_image();
exit();

function create_image()
{
    //Let's generate a totally random string using md5
    $md5_hash = md5(rand(0,999)); 
    //We don't need a 32 character long string so we trim it down to 5 
    $security_code = substr($md5_hash, 15, 5); 

    //Set the session to store the security code
    $_SESSION["security_code"] = $security_code;

    //Set the image width and height
    $width = 100;
    $height = 20; 

    //Create the image resource 
    $image = ImageCreate($width, $height);  

    //We are making three colors, white, black and gray
    $white = ImageColorAllocate($image, 255, 255, 255);
    $black = ImageColorAllocate($image, 0, 0, 0);
    $grey = ImageColorAllocate($image, 204, 204, 204);

    //Make the background black 
    ImageFill($image, 0, 0, $black); 

    //Add randomly generated string in white to the image
    ImageString($image, 3, 30, 3, $security_code, $white); 

    //Throw in some lines to make it a little bit harder for any bots to break 
    ImageRectangle($image,0,0,$width-1,$height-1,$grey); 
    imageline($image, 0, $height/2, $width, $height/2, $grey); 
    imageline($image, $width/2, 0, $width/2, $height, $grey); 
 
    //Tell the browser what kind of file is come in 
    header("Content-Type: image/jpeg"); 

    //Output the newly created image in jpeg format 
    ImageJpeg($image);
   
    //Free up resources
    ImageDestroy($image);
}
?>
　　If you view create_image.php in a browser, you should see a new JPEGimage every time you refresh the page. You should see the black boxwith some letters and numbers on it. For more details how to createimages on the fly read our tutorial Dynamic Image Generation.
　　The last we have to do is to include the JavaScript file that we will create on the next step.
<script language="JavaScript" type="text/javascript" src="ajax_captcha.js"></script>

Back to top

The JavaScript
　　The JavaScript will be placed in an external file called ajax_captcha.js. Let's look into the JavaScript code.
　　The first function simply returns a browser specific XmlHttpRequestobject. Unfortunately AJAX is supported slightly differently in IE thanit is Safari, Opera and Mozilla-based browsers like Firefox. MicrosoftInternet Explorer uses an Active X object while Mozilla and Safari usea native object.
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
 if (window.XMLHttpRequest) {
    return new XMLHttpRequest(); //Mozilla, Safari ...
 } else if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP"); //IE
 } else {
    //Display our error message
    alert("Your browser doesn't support the XmlHttpRequest object.");
 }
}
　　The next step we will create our XmlHttpRequest object that we can use to make the requests.
//Our XmlHttpRequest object
var receiveReq = getXmlHttpRequestObject();
　　After that we create a function that will make the AJAXrequest. This function gets two parameters: the url to send to theserver and a parameter to the url with the content of the input field.
//Initiate the AJAX request
function makeRequest(url, param) {
//If our readystate is either not started or finished, initiate a new request
 if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
   //Set up the connection to captcha_test.html. True sets the request to asyncronous(default) 
   receiveReq.open("POST", url, true);
   //Set the function that will be called when the XmlHttpRequest objects state changes
   receiveReq.onreadystatechange = updatePage; 

   //Add HTTP headers to the request
   receiveReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   receiveReq.setRequestHeader("Content-length", param.length);
   receiveReq.setRequestHeader("Connection", "close");

   //Make the request
   receiveReq.send(param);
 }   
}
　　At first we check if our XmlHttpRequest object is ready to make arequest. If our readystate is either not started or finished then weinitiate a new request. Next we open the connection to our server PHPpage with the appended querystring and mark it as a "POST" request.After that we add HTTP headers to the request so that the serverprocesses the request correctly. The next line defines the updatePage()function that will be called when we recieve the AJAX response.Finally, we actually send the request to the server.
　　The updatePage() function executes every time the state of the XmlHttpRequest object changes.
//Called every time our XmlHttpRequest objects state changes
function updatePage() {
 //Check if our response is ready
 if (receiveReq.readyState == 4) {
   //Set the content of the DIV element with the response text
   document.getElementById('result').innerHTML = receiveReq.responseText;
   //Get a reference to CAPTCHA image
   img = document.getElementById('imgCaptcha'); 
   //Change the image
   img.src = 'create_image.php?' + Math.random();
 }
}
　　At first we need to make sure our response is ready. If it is, thenthe content of the DIV element is filled with the response text and theCAPTCHA image is changed. One other thing you must remember you musthave different names for each image. For that purpose we use therandom() function.
　　The last function will be called every time the form is submitted.It gets the value from the text box, sets the url and passes them as aparameters to makeRequest() function.
//Called every time when form is perfomed
function getParam(theForm) {
 //Set the URL
 var url = 'captcha.php';
 //Set up the parameters of our AJAX call
 var postStr = theForm.txtCaptcha.name + "=" + encodeURIComponent( theForm.txtCaptcha.value );
 //Call the function that initiate the AJAX request
 makeRequest(url, postStr);
}
　　That's all. If we open our page, type the security code into thetext box and click the button, our DIV element will read the CAPTCHAtest result without having to refresh the page.

Back to top

The PHP Server Page (the Backend)
　　The server-side PHP file will make the actual comparison and returnthe result. This is very simple PHP page that only prints the result ofthe CAPTCHA test. You can add needed functionality yourselves. Forexample, if your HTML form will contain some other fields, you can sendtheir data using the POST method and then output the data on the screenor add it into the database for further use.
<?php
//Continue the session
session_start();

//Make sure that the input come from a posted form. Otherwise quit immediately
if ($_SERVER["REQUEST_METHOD"] <> "POST") 
 die("You can only reach this page by posting from the html form");

//Check if the security code and the session value are not blank
//and if the input text matches the stored text
if ( ($_REQUEST["txtCaptcha"] == $_SESSION["security_code"]) && 
    (!empty($_REQUEST["txtCaptcha"]) && !empty($_SESSION["security_code"])) ) {
  echo "<h1>Test successful!</h1>";
} else {
  echo "<h1>Test failed! Try again!</h1>";
}
?>
　　The session_start() simply continues the session. Then it's just asimple text matching which is done by the if statement. If the inputtext matches the stored text then the success message displayed,otherwise error message. If someone is trying to outwit you, then youshould probably use a more secure way besides storing the security codein a session or a cookie that always has the same name. As an exampleyou can store this data in MySQL database.
　　Create a new file named captcha.php, and add the code from the preceding example to it. And that's all for the server-side.
The Ways to Make It More Secure
　　You can see how it is easy to use PHP with Ajax technologies. Thisis very simple CAPTCHA test you can use but I'm sure you will think howto make it more powerful, robust and secure. In conclusion I just wantto suggest some several things you can do to make it more secure:

• Rotate the text randomly
  
• Add random spaces in between characters
  
• Use a TTF fonts and change the font randomly every time
  
• Use a random text and image size every time
  
• Use more advanced text distortion and colors
  
• Move the lines randomly
  
• Store the password in a random cookie