本文转自:https://www.cnblogs.com/xiaoyezi/p/3541195.html

自己从前一段时间做了个php小项目,关于生成图片验证码生成和后台的验证,把自己用到的东西总结一下,希望大家在用到相关问题的时候可以有一定的参考性。

首先,php验证码生成

代码如下:

1.生成图像代码(picture.php)

<?php
header("Cache-Control: no-cache, must-revalidate");
// 声明图像大小
$img_height=70;
$img_width=25;
$authnum='';
// 验证码内容
$ychar="0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
$list=explode(",",$ychar);
for($i=0;$i<4;$i++){
    $randnum=rand(0,35);
    $authnum.=$list[$randnum];
}

// 生成一个基本大小图像
$aimg = imagecreate($img_height,$img_width);
// 图像填充颜色
imagecolorallocate($aimg, 255,255,255);
$black = imagecolorallocate($aimg, 0,0,0);

for ($i=1; $i<=100; $i++) {    imagestring($aimg,1,mt_rand(1,$img_height),mt_rand(1,$img_width),"@",imagecolorallocate($aimg,mt_rand(200,255),mt_rand(200,255),mt_rand(200,255)));
}

//为了区别于背景,这里的颜色不超过200,上面的不小于200
for ($i=0;$i<strlen($authnum);$i++){
    imagestring($aimg, mt_rand(3,5),$i*$img_height/4+mt_rand(2,7),mt_rand(1,$img_width/2-2), $authnum[$i],imagecolorallocate($aimg,mt_rand(0,100),mt_rand(0,150),mt_rand(0,200)));
}
imagerectangle($aimg,0,0,$img_height-1,$img_width-1,$black);//画一个矩形
Header("Content-type: image/PNG");
ImagePNG($aimg);                    //生成png格式
ImageDestroy($aimg);
?>

2.利用一个form表单(名称为index.php)调用上面的picture.php

为了便于演示,以下所说的所有文件放在相同的目录。

--folder1--picture.php

--index.php

1
2
3
4
5
6
<form>
    <div>
        <img id="codeP" src="picture.php"/>
        <input id="codeT" type="text" name="codeT" />
    </div>
</form>

当你完成上面的代码时候你就应该能看到在页面中加载了图片的验证码。

如果你的图片没有加载成功的话,检查文件路径或者php.ini中[extension=php_gd2.dll]这个代码是否放开了。

其次,当你完成了图片的显示,你又将要遇到另外一个问题,验证码的刷新。

相信只要是稍微理解一点js用法的人都应该想的到,给某个空间加上一个onclick事件,工作就迎刃而解了。为了方便,我将修改上面index.php的代码。

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function refresh() {
    document.getElementById("codeP").src = "picture.php?tm="+Math.random();
}
</script>
<form>
    <div>
        <img id="codeP" src="picture.php" onclick="refresh()"/>
        <input id="codeT" type="text" name="codeT" />
    </div>
</form>

当你将上述代码修改结束时,你就会发现,当你点击图片的时候,验证码就自己变了。至于说蓝色字体的tm=***:代表每次生成随机码,也就是不取缓存。

再次,当你将上面两个步骤完成之后,当你提交表单的时候,你就应该去验证你输入的验证码和图片验证码是否一致,有以下几种方法:

1.客户端验证(cookie验证,不推荐)不安全

2.服务器端验证(session,推荐)安全

关于为什么安全,为什么不安全,网上有很多帖子,可以一一膜拜,这里不细说。

下面的例子就说一下服务器端验证的代码。

在提到验证代码之前,我要先把前面提到的picture.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
<?php
// session有效
session_start();
// 声明一个sessoin
session_register("sessionCode");
header("Cache-Control: no-cache, must-revalidate");
// 声明图像大小
$img_height=70;
$img_width=25;
$authnum='';
// 验证码内容
$ychar="0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
$list=explode(",",$ychar);
for($i=0;$i<4;$i++){
    $randnum=rand(0,35);
    $authnum.=$list[$randnum];
}
// 将每次生成的验证码保存在session中
$_SESSION["sessionCode"] = $authnum;
// 生成一个基本大小图像
$aimg = imagecreate($img_height,$img_width);
// 图像填充颜色
imagecolorallocate($aimg, 255,255,255);
$black = imagecolorallocate($aimg, 0,0,0);
 
for ($i=1; $i<=100; $i++) {    imagestring($aimg,1,mt_rand(1,$img_height),mt_rand(1,$img_width),"@",imagecolorallocate($aimg,mt_rand(200,255),mt_rand(200,255),mt_rand(200,255)));
}
 
//为了区别于背景,这里的颜色不超过200,上面的不小于200
for ($i=0;$i<strlen($authnum);$i++){
    imagestring($aimg, mt_rand(3,5),$i*$img_height/4+mt_rand(2,7),mt_rand(1,$img_width/2-2), $authnum[$i],imagecolorallocate($aimg,mt_rand(0,100),mt_rand(0,150),mt_rand(0,200)));
}
imagerectangle($aimg,0,0,$img_height-1,$img_width-1,$black);//画一个矩形
Header("Content-type: image/PNG");
ImagePNG($aimg);                    //生成png格式
ImageDestroy($aimg);
?>

图片验证的方式有两种:

1.后台验证,在你提交的页面中取得你填写的验证码和session中的验证码是否一致,在做相关操作。

后台验证比较简单,直接贴一下代码。(假如的form表单中要提交的checked.php)

1
2
3
4
5
6
7
8
9
<?php
session_start();
$codeT = $_POST['codeT '];
$codeP = $_SESSION["sessionCode"];
if ($codeT==$codeP) {
   做你想要做的操作;
else {
   验证码有误;<br>   相关操作;
}

2.前台验证:

如果你想在前台直接取得$_SESSION["sessionCode"]的值得话,你就大错特错了。

因为你取的值肯定实在html中隐藏起来的,但是图片实在所有html元素加载之后才加载图片的(也就是俗话说的异步加载)

所以做check的时候可以采用异步验证+提交。也就是异步验证过了之后,我在提交表单。我简单的吧代码贴在下面。

index.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
<script type="text/javascript">
function sub() {
  ajaxSubmit(test,"submitTag.php");
}
function ajaxSubmit(formName,submitURL) {
    var code = document.getElementById('codeT').value;
    var postStr = "test="+code;
    var xmlHttp = false;
    if(window.ActiveXObject){
        xmlHttp = new ActiveXObject("Microsoft.XmlHttp");
    else if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }
    xmlHttp.onreadystatechange = function(){
            if(xmlHttp.readyState==4){
                if(xmlHttp.status==200){
                alert(xmlHttp.responseText);
                if (xmlHttp.responseText=="success") {
                    formName.action = submitURL;
                    formName.submit();
                else {
                    document.getElementById("error").innerHTML ="请输入正确的验证码。";
                }
                }
            }
    }
   var url="bbb.php";
   xmlHttp.open("post",url,true);
   xmlHttp.setRequestHeader("Content-Type""application/x-www-form-urlencoded");
   xmlHttp.send(postStr);
}
function refresh() {
    document.getElementById("codeP").src = "picture.php?tm="+Math.random();
}
</script>
<form id="test" name="test" action="">    <div id="error"></div>
    <div>
        <img id="codeP" src="picture.php" onclick="refresh()"/>
        <input id="codeT" type="text" name="codeT" />
    </div>
    <div><input type="button" onclick="sub()" name="apply" id="apply" value="提交" /></div>
</form>

以上提及了bbb.php里面的内容自己对照上面的js代码稍微想一下,其实很简单。就不贴了。有什么问题的话可以m我,有什么说的不对的地方,请不要客气。

[转]php 图片验证码生成 前后台验证的更多相关文章

  1. php 图片验证码生成 前后台验证

    自己从前一段时间做了个php小项目,关于生成图片验证码生成和后台的验证,把自己用到的东西总结一下,希望大家在用到相关问题的时候可以有一定的参考性. 首先,php验证码生成. 代码如下: 1.生成图像代 ...

  2. Flask实战第40天:图片验证码生成技术

    图片验证码生成 安装pillow pip install pillow 在utils下新建python package命名为captcha 把需要需要用到的字体放在captcha下 编辑captcha ...

  3. Atitit 图片 验证码生成attilax总结

    Atitit 图片 验证码生成attilax总结 1.1. 图片验证码总结1 1.2. 镂空文字  打散 干扰线 文字扭曲 粘连2 1.1. 图片验证码总结 因此,CAPTCHA在图片验证码这一应用点 ...

  4. 开发工具类API调用的代码示例合集:六位图片验证码生成、四位图片验证码生成、简单验证码识别等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 六位图片验证码生成:包括纯数字.小写字母.大写字母.大小写混合.数 ...

  5. asp.net core 图片验证码,后台验证

    验证方法: public static string VerificationCodeCacheFormat="vcode_cache_{0}"; public IActionRe ...

  6. JavaWeb开发之普通图片验证码生成技术与算术表达式验证码生成技术

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6134649.html    另:算术验证码生成的JSP.Servlet实现均已移植github:https:/ ...

  7. Web后端 JAVA实现验证码生成与验证功能

    首先,写一个验证码生成帮助类,用来绘制随机字母: <span style="font-size:14px;">import java.awt.Color;  impor ...

  8. .net图片验证码生成、点击刷新及验证输入是否正确

    ①创建ValidateCode.aspx,在ValidateCode.aspx.cs中加入如下代码.生成验证码图片,在页面上输出,输出jpeg格式. protected void Page_Load( ...

  9. struts---JSP界面验证码生成与验证

    之前想做一个随机验证码的功能,自己也搜索了一下别人写的代码,然后自己重新用struts2实现了一下,现在将我自己实现代码贴出来!大家有什么意见都可以指出来! 首先是生成随机验证码图片的action: ...

随机推荐

  1. Mysql时间函数

    http://blog.sina.com.cn/s/blog_6d39dc6f0100m7eo.html mysql中函数和关键字不区分大小写.下文函数的datetime参数处既可以用时间字符串也可以 ...

  2. astats日志分析系统

    Awstats是一个免费非常简洁而且强大有个性的网站日志分析工具. 功能: 一:访问量,访问次数,页面浏览量,点击数,数据流量等 二:精确到每月.每日.每小时的数据 三:访问者国家 四:访问者IP 五 ...

  3. AIZU 0005

    GCD and LCM Time Limit : 1 sec, Memory Limit : 65536 KB Japanese version is here GCD and LCM Write a ...

  4. Windows 内核(WRK)编译

    引子 WRK 是微软于 2006 年针对教育和学术界开放的 Windows 内核的部分源码, WRK(Windows Research Kernel)也就是 Windows 研究内核, 在 WRK 中 ...

  5. 【转】Ext JS xtype

      原文:Ext 中xtype一览 基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cyc ...

  6. Android 使用Post方式提交数据(登录)

    在Android中,提供了标准Java接口HttpURLConnection和Apache接口HttpClient,为客户端HTTP编程提供了丰富的支持. 在HTTP通信中使用最多的就是GET和POS ...

  7. ASP.NET网站限制访问频率

    最近做了一个免费发短信的小网站(http://freesms.cloudapp.net/),但发现最近有人破解了我的验证码,以每3秒/条的速度用我的短信服务来发他的广告.更换验证码程序和过滤关键字只是 ...

  8. Loadrunner打开VU时候报错Critical error(cannot use Exceptiondialog)

    打开Loadrunner打开VU时候报错Critical error(cannot use Exceptiondialog) 卸载后,删掉注册表,重新安装,打开还是这样 怎么办呢 我男票告诉我,从开始 ...

  9. Codeforces Round #414 A. Bank Robbery

    A. Bank Robbery time limit per test 2 seconds memory limit per test   256 megabytes   A robber has a ...

  10. 【Zigbee技术入门教程-02】一图读懂ZStack协议栈的核心思想与工作机理

    [Zigbee技术入门教程-02]一图读懂ZStack协议栈的核心思想与工作机理 广东职业技术学院  欧浩源   Z-Stack协议栈是一个基于任务轮询方式的操作系统,其任务调度和资源分配由操作系统抽 ...