PHP+Ajax验证码验证用户登录_PHP教程

用AJAX 验证用户登录的一个好处是不刷新跳转页面，外加用到验证码就更安全了，摸索的写了下。一共用到三个文件:

yz.php: 生成验证码的PHP 文件，将验证码将在SESSION 里，供登录时对比调用
index.php: 用户登录的HTML 文件
loginCheck.php: 验证用户登录的文件

下面一一解析:
yz.php 文件

									<?php

									 session_start();

									 //生成验证码图

									 Header("Content-type: image/PNG");

									 //长与宽

									 $im = imagecreate(44,18);

									 // 设置背景色:

									 $back = ImageColorAllocate($im, 245,245,245);

									 // 填充背景色:

									 imagefill($im,0,0,$back);

									 srand((double)microtime()*1000000);

									 $vcodes;

									 //生成4位数字

									 for($i=0;$i<4;$i++){

									  $font = ImageColorAllocate($im, rand(100,255),rand(0,100),rand(100,255));

									  $authnum=rand(1,9);

									  $vcodes.=$authnum;

									  imagestring($im, 5, 2+$i*10, 1, $authnum, $font);

									 }

									 //加入干扰象素

									 for($i=0;$i<100;$i++){

									  $randcolor = ImageColorallocate($im,rand(0,255),rand(0,255),rand(0,255));

									  imagesetpixel($im, rand()%70 , rand()%30 , $randcolor);

									 }

									 ImagePNG($im);

									 ImageDestroy($im);

									 // 将四位的验证码保存在 SESSION 里，登录时调用对比

									 $_SESSION["VCODE"]=$vcodes;

									?>

index.php: 注意，在这文件里不要取 $_SESSION["VCODE"], 否则会取晚一步的，刷新后才能显示上一个验证码

在 loginCheck.php 里验证就好了

100

101

102

103

104

105

106

107

108

									<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

									<html xmlns="http://www.w3.org/1999/xhtml"> 

									<head>

									<meta http-equiv="Content-Type" content="text/html;charset=gb2312">

									<title>管理后台| 请登录</title>

									<link rel="stylesheet" type="text/css" href="\css\a.css">

									<style type="text/css">

									<!--

									  #main{

									   font-family:宋体;

									   font-size:10pt;

									   text-align:center;

									   margin-top:510px;

									  }

									  body{

									   background-attachment:fixed;

									   background-position:center;

									   background-image:url(./images/w2.jpg);

									   background-repeat: no-repeat;

									  }

									  #authCode{background-Color:#F8F9FF;}

									  table{text-align:center;}

									//-->

									</style>

									<script type="text/javascript" src="./js/trim.js"></script>

									<script type="text/javascript">

									<!--

									 function clearX(){

									  document.getElementById('authCode').value="";

									 }

									 // 点击图片重新获得新的验证码：

									 function getVCode() { 

									  var vcode=document.getElementById('vcode'); 

									  vcode.src ='yz.php?nocache='+new Date().getTime(); 

									 }

									 //定义XMLHttpRequest对象

									 var xmlHttp;     

									 // 创建 XMLHttpRequest:

									 function createXmlHttpRequest(){

									 var xmlHttp=null;

									 try{

									  // Firefox, Opera 8.0+, Safari

									  xmlHttp=new XMLHttpRequest();

									 }catch(e){

									  // Internet Explorer

									  try{

									  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

									  }catch(e){

									  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

									  }

									 }

									 return xmlHttp;

									 }

									 // AJAX 检查登录: 有密码，要用POST 提交

									 function login(){

									  var authCode=trim(document.getElementById('authCode').value);

									  var username=trim(document.getElementById('username').value);

									  var password=trim(document.getElementById('password').value);

									  if(username=="" || password=="" || authCode==""){

									   alert("请输入用户名和密码和验证码！");

									   return false;

									  }else{

									   if(!xmlHttp) xmlHttp=createXmlHttpRequest();

									    var send_string="username="+username+"&password="+password+"&authCode="+authCode+"&fresh="+Math.random();

									    xmlHttp.open("POST","loginCheck.php",true); 

									    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 

									    xmlHttp.send(send_string); 

									    xmlHttp.onreadystatechange=function(){

									     if(xmlHttp.readystate==4 && xmlHttp.status==200){

									      var answer=xmlHttp.responseText;

									      if(answer=="ok")                     //跳转到管理中心页面

									       window.location.href="adminCenter.php";

									      else{

									       alert("用户名密码或验证码不正确! 请重新输入!");

									       document.getElementById('username').focus();

									      }

									    }

									   }

									  }

									 }

									//-->

									</script>

									</head>

									<body onload="document.getElementById('username').focus();">

									 <div id="main">

									   <table>

									     <tr>

									     <td>用户名:<input type="text" id="username" /></td>

									     <td>密   码:<input type="password" id="password" /></td>

									     <td>验证码:<input type="text" id="authCode" size="6" maxlength="4" value="验证码" onfocus="clearX()"/></td>

									     <td><img id="vcode" src="yz.php" alt="看不清？点击换一张" onclick="getVCode()" /></td>

									     <td><input id="loginButton" type="submit" value="登 录" onclick="login()"/></td>

									     </tr>

									    </table>

									 </div>

									</body>

									</html>

loginCheck.php 验证用户登录的文件

									<?php 

									 session_start();

									 include("../conn/connDB.php");

									 // 取得POST过来的参数:

									 $username=$_POST["username"];

									 $password=md5($_POST["password"]);

									 $authCode=$_POST["authCode"];       

									 $feedback="no";

									//对比是否==SESSION中的验证码，不能放在客户端做，否则取不正确的值

									 if($authCode==$_SESSION["VCODE"]){

									   $SQL="select * from users where username='$username' and password='$password'";

									   $result=mysql_query($SQL);

									   $rows=mysql_num_rows($result);

									  if($rows==1)                       // 验证成功

									   $feedback="ok";

									   $_SESSION["admin"]=true;           //为了后台安全，存入SESSION，表明 ADMIN 已登录，供后面调用

									  }

									 echo $feedback;

									?>