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


Posted in PHP onJuly 20, 2016

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
生成sessionid和随机密码的例子
Oct 09 PHP
php pack与unpack 摸板字符字符含义
Oct 29 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
Jun 24 PHP
php使用socket post数据到其它web服务器的方法
Jun 02 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
Jul 13 PHP
PHP类型约束用法示例
Sep 28 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
Mar 12 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
Jun 16 PHP
PHP常用字符串函数小结(推荐)
Aug 05 PHP
php面试中关于面向对象的相关问题
Feb 13 PHP
php array_chunk()函数用法与注意事项
Jul 12 PHP
laravel excel 上传文件保存到本地服务器功能
Nov 14 PHP
PHP+Ajax实现验证码的实时验证
Jul 20 #PHP
php+ajax注册实时验证功能
Jul 20 #PHP
PHP实现的随机IP函数【国内IP段】
Jul 20 #PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
Jul 20 #PHP
php+flash+jQuery多图片上传源码分享
Jul 27 #PHP
php安装ssh2扩展的方法【Linux平台】
Jul 20 #PHP
值得分享的php+ajax实时聊天室
Jul 20 #PHP
You might like
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
安装dbus-python的简要教程
2015/05/05 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
会计电算化个人自我评价
2013/11/17 职场文书
校园创业策划书
2014/01/14 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
语文教育专业求职信
2014/06/28 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
售房协议书范本
2015/08/11 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书