需要修改的几个文件:
①register.php 生成随机数和加密值
把register.html改为register.php,并开启session;
把register.js中生成随机数的函数写在register.php中,并改用php方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<?php session_start();?>
....
<?php
//生成随机数函数
function showval(){
$num = "" ;
for ( $i =0; $i <4; $i ++){
$tmp = rand(1,15);
if ( $tmp > 9) {
switch ( $tmp ) {
case (10):
$num .= 'a' ;
break ;
case (11):
$num .= 'b' ;
break ;
case (12):
$num .= 'c' ;
break ;
case (13):
$num .= 'd' ;
break ;
case (14):
$num .= 'e' ;
break ;
case (15):
$num .= 'f' ;
break ;
}
} else {
$num .= $tmp ;
}
}
return $num ;
}
//生成随机数
$mdnum = md5(showval());
//把随机数和经过加密的随机数都存入session
$_SESSION [ 'num' ] = showval();
$_SESSION [ 'mdnum' ] = $mdnum ;
?>
<!--验证码-->
<div class = "ipt iptend" >
<input type= 'text' id= 'yzm' name= 'yzm' placeholder= "验证码" autocomplete= "off" />
<img id= 'yzmpic' src= 'valcode.php?num=<?php echo $mdnum;?>' style= "cursor:pointer" title= "验证码" alt= "验证码" >
<a style= "cursor:pointer" id= 'changea' >
<img id= "refpic" src= "templets/images/ref.jpg" alt= "刷新验证码" >
</a>
<span id= 'yzmchk' ></span>
</div>
|
把生成的4位验证码和经过md5加密的验证码都存入session,而客户端验证码图片的src属性的参数则是那个加密过的值,因此在客户端不会出现四位验证码的文字。
②valcode.php 把随机数写入图形
在register.php中,验证码图片的地址是
<img id='yzmpic' src='valcode.php?num=<?php echo $mdnum;?>' >
因此在valcode.php中,需要做相应修改,修改之处是把原来的:
//直接传送客户端输入的值$num = $_GET['num'];
修改为:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
session_start();
header( "content-type:image/png" );
//session中保存生成的4位随机数和经过ms5加密的随机数
if (isset( $_SESSION [ 'mdnum' ]) && $_SESSION [ 'mdnum' ]!= "" ){
$mdnum = $_SESSION [ 'mdnum' ];
if (isset( $_GET [ 'num' ]) && $_GET [ 'num' ]!= "" ){
//当注册页传递过来的num和session中经过加密的随机数相等时
if ( $_GET [ 'num' ] == $mdnum ){
if (isset( $_SESSION [ 'num' ]) && $_SESSION [ 'num' ]!= "" )
//把session中保存的4位随机数赋给$num
$num = $_SESSION [ 'num' ];
}
}
}
|
即客户端图片传递过来的加密的参数同session中保存的加密过的值相同时,就把session中保存的4位验证码写入图形。
valcode.php的完整代码为:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<?php
session_start();
header( "content-type:image/png" );
//session中保存生成的4位随机数和经过ms5加密的随机数
if (isset( $_SESSION [ 'mdnum' ]) && $_SESSION [ 'mdnum' ]!= "" ){
$mdnum = $_SESSION [ 'mdnum' ];
if (isset( $_GET [ 'num' ]) && $_GET [ 'num' ]!= "" ){
//当注册页传递过来的num和session中经过加密的随机数相等时
if ( $_GET [ 'num' ] == $mdnum ){
if (isset( $_SESSION [ 'num' ]) && $_SESSION [ 'num' ]!= "" )
//把session中保存的4位随机数赋给$num
$num = $_SESSION [ 'num' ];
}
}
}
$imagewidth = 150;
$imageheight = 54;
//创建图像
$numimage = imagecreate( $imagewidth , $imageheight );
//为图像分配颜色
imagecolorallocate( $numimage , 240,240,240);
//字体大小
$font_size = 33;
//字体名称
$fontname = 'arial.ttf' ;
//循环生成图片文字
for ( $i = 0; $i < strlen ( $num ); $i ++){
//获取文字左上角x坐标
$x = mt_rand(20,20) + $imagewidth * $i /5;
//获取文字左上角y坐标
$y = mt_rand(40, $imageheight );
//为文字分配颜色
$color = imagecolorallocate( $numimage , mt_rand(0,150), mt_rand(0,150), mt_rand(0,150));
//写入文字
imagettftext( $numimage , $font_size ,0, $x , $y , $color , $fontname , $num [ $i ]);
}
//生成干扰码
for ( $i = 0; $i <2200; $i ++){
$randcolor = imagecolorallocate( $numimage , rand(200,255), rand(200,255), rand(200,255));
imagesetpixel( $numimage , rand()%180, rand()%90, $randcolor );
}
//输出图片
imagepng( $numimage );
imagedestroy( $numimage );
?>
|
③register.js进行验证
验证部分改为使用Ajax进行验证,把输入的4位验证码传递给chkyzm.php文件,和session中保存的4位验证码进行对比。
刷新图片时,重新生成4位验证码,并和加密验证码一起写入session。重新生成验证码的代码写在了refresh.php中,并在register.js中使用ajax来请求重新生产的4位验证码和加密验证码,并通过jQuery把加密验证码的值作为图片的src属性的参数,经过参数和session比对后valcode.php会重新生成4位验证码的图片
register.js验证码部分的代码为:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
//验证码按钮
$( "#refpic" ).hover( function (){
$( this ).attr( "src" , "templets/images/refhover.jpg" );
}, function (){
$( this ).attr( "src" , "templets/images/ref.jpg" );
}).mousedown( function (){
$( this ).attr( "src" , "templets/images/refclick.jpg" );
}).mouseup( function (){
$( this ).attr( "src" , "templets/images/ref.jpg" );
});
//刷新验证码
function postyzm(){
$.post( "./../refresh.php" , function (data,textStatus){
$( '#yzmpic' ).attr( "src" , "valcode.php?num=" +data);
})
}
$( '#yzmpic' ).click( function (){
postyzm();
});
$( '#changea' ).click( function (){
postyzm();
});
//验证码检验
function yzmchk(){
$.post( "./../chkyzm.php" ,{
//要传递的数据
yzm : $( "#yzm" ).val()
}, function (data,textStatus){
if (data == 0){
success($( "#yzmchk" ), "" );
yzmval = true ;
} else if (data == 1){
var noticeMsg = '验证码不能为空' ;
notice($( "#yzmchk" ),noticeMsg);
} else {
var errorMsg = '请输入正确的验证码' ;
error($( "#yzmchk" ),errorMsg);
}
});
}
//验证码的blur事件
$( "#yzm" ).focus( function (){
var noticeMsg = '不区分大小写' ;
notice($( "#yzmchk" ),noticeMsg);
}).click( function (){
var noticeMsg = '不区分大小写' ;
notice($( "yzmdchk" ),noticeMsg);
}).keydown( function (){
if (event.keyCode == 13){
//检验
yzmchk();
}
}).keyup( function (){
if (event.keyCode == 13){
//提交
formsub();
}
}).blur( function (){
yzmchk();
});
|
chkyzm.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<?php
session_start();
header( "charset=utf-8" );
if (isset( $_POST [ 'yzm' ]) && $_POST [ 'yzm' ]!= "" ){
$yzm = $_POST [ 'yzm' ];
if (isset( $_SESSION [ 'num' ]) && $_SESSION [ 'num' ]!= "" ){
//当输入的验证码和session里保存的num一致时
if ( strtolower ( $yzm ) == $_SESSION [ 'num' ]){
//输入正确
$state = 0;
} else {
//输入错误
$state = 2;
}
}
} else {
//没有输入
$state = 1;
}
echo $state ;
?>
|
refresh.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<?php
session_start();
//生成验证码
function showval(){
$num = "" ;
for ( $i =0; $i <4; $i ++){
$tmp = rand(1,15);
if ( $tmp > 9) {
switch ( $tmp ) {
case (10):
$num .= 'a' ;
break ;
case (11):
$num .= 'b' ;
break ;
case (12):
$num .= 'c' ;
break ;
case (13):
$num .= 'd' ;
break ;
case (14):
$num .= 'e' ;
break ;
case (15):
$num .= 'f' ;
break ;
}
} else {
$num .= $tmp ;
}
}
return $num ;
}
$_SESSION [ 'num' ] = showval();
$_SESSION [ 'mdnum' ] = md5(showval());
echo $_SESSION [ 'mdnum' ];
|
显示的效果如图:
总结:
5个步骤:把4位验证码写入session再生成图片,客户端图片的参数使用加密的验证码,把输入的字符同SESSION中的4位验证码进行比对,刷新图片重新生成4位验证码并存入session,把重新生产的加密验证码作为图片的src参数
用图可表示为:
(未完待续)