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 相关文章推荐
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
Dec 06 PHP
PHP+FLASH实现上传文件进度条相关文件 下载
Jul 21 PHP
浅谈php中include文件变量作用域
Jun 18 PHP
给WordPress中的留言加上楼层号的PHP代码实例
Dec 14 PHP
Laravel中注册Facades的步骤详解
Mar 16 PHP
PHP编程求最大公约数与最小公倍数的方法示例
May 29 PHP
php制作圆形用户头像的实例_自定义封装类源代码
Sep 18 PHP
PHP实现生成模糊图片的方法示例
Dec 21 PHP
PHP删除数组中指定下标的元素方法
Feb 03 PHP
php 读写json文件及修改json的方法
Mar 07 PHP
PHP实现的分解质因数操作示例
Aug 01 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
Oct 21 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
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
Vue底层实现原理总结
2018/02/17 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
Python pandas常用函数详解
2018/02/07 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python多线程与多进程及其区别详解
2019/08/08 Python
python集合删除多种方法详解
2020/02/10 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
学生请假条格式
2014/04/11 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2015年科协工作总结
2015/05/19 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
Django框架之路由用法
2022/06/10 Python