PHP+Ajax验证码验证用户登录
用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里验证就好了
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"> <title>管理后台|请登录</title> <linkrel="stylesheet"type="text/css"href="\css\a.css"> <styletype="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> <scripttype="text/javascript"src="./js/trim.js"></script> <scripttype="text/javascript"> <!-- functionclearX(){ document.getElementById('authCode').value=""; } //点击图片重新获得新的验证码: functiongetVCode(){ varvcode=document.getElementById('vcode'); vcode.src='yz.php?nocache='+newDate().getTime(); } //定义XMLHttpRequest对象 varxmlHttp; //创建XMLHttpRequest: functioncreateXmlHttpRequest(){ varxmlHttp=null; try{ //Firefox,Opera8.0+,Safari xmlHttp=newXMLHttpRequest(); }catch(e){ //InternetExplorer try{ xmlHttp=newActiveXObject("Msxml2.XMLHTTP"); }catch(e){ xmlHttp=newActiveXObject("Microsoft.XMLHTTP"); } } returnxmlHttp; } //AJAX检查登录:有密码,要用POST提交 functionlogin(){ varauthCode=trim(document.getElementById('authCode').value); varusername=trim(document.getElementById('username').value); varpassword=trim(document.getElementById('password').value); if(username==""||password==""||authCode==""){ alert("请输入用户名和密码和验证码!"); returnfalse; }else{ if(!xmlHttp)xmlHttp=createXmlHttpRequest(); varsend_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){ varanswer=xmlHttp.responseText; if(answer=="ok")//跳转到管理中心页面 window.location.href="adminCenter.php"; else{ alert("用户名密码或验证码不正确!请重新输入!"); document.getElementById('username').focus(); } } } } } //--> </script> </head> <bodyonload="document.getElementById('username').focus();"> <divid="main"> <table> <tr> <td>用户名:<inputtype="text"id="username"/></td> <td>密码:<inputtype="password"id="password"/></td> <td>验证码:<inputtype="text"id="authCode"size="6"maxlength="4"value="验证码"onfocus="clearX()"/></td> <td><imgid="vcode"src="yz.php"alt="看不清?点击换一张"onclick="getVCode()"/></td> <td><inputid="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*fromuserswhereusername='$username'andpassword='$password'"; $result=mysql_query($SQL); $rows=mysql_num_rows($result); if($rows==1)//验证成功 $feedback="ok"; $_SESSION["admin"]=true;//为了后台安全,存入SESSION,表明ADMIN已登录,供后面调用 } echo$feedback; ?>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。