PHP+Ajax验证码验证用户登录
程序员文章站
2024-02-25 18:00:57
用ajax 验证用户登录的一个好处是不刷新跳转页面，外加用到验证码就更安全了，摸索的写了下。一共用到三个文件:
yz.php: 生成验证码的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;
?>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇： 基于C#实现的屏幕指定区域截屏代码