PHP+Ajax验证码验证用户登录

前端技术 2023/09/02 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 里验证就好了

<!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;
 
?>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/4373

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案