PHP+Ajax验证码验证用户登录
2018-09-22 15:29
用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 里验证就好了
<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN 管理后台 请登录</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-跳转到管理中心页面 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; ?>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。