这里假定django已经安装,并且已经架设了media server(就是apache上有直接能够访问的图片,css以及js的目录,这样可以方便的将js等文件放在那里以供所需)。
假定media server中有一个js目录存放了jquery.js,这是用来作为ajax异步调用的。
Python插件假定安装了PIL图片处理库,安装了pycrpto(可以到[url]http://www.voidspace.org.uk/python/modules.shtml#pycrypto[/url]下载)加密库。
工作流程我打算如此做:
1,客户端用户点击刷新按钮,则触发按钮click事件,在click事件中调用jquery的ajax调用,向服务器请求图片的字符窜,并注册异步回调函数等待服务器的应答。
2,服务器得到请求后生成随机字符窜,并在字符窜后面添加时间戳,然后使用pycrpto的DES加密算法进行加密,发送给用户。
3,用户在回调函数中收到了该加密字符窜以后立即设定自己的图片img对象的src属性,将其url后面的参数改成该加密字符窜,于是又触发一次向服务器的图片请求。
4,服务器的另外一个函数响应图片请求,它将解析url的参数,获得加密字符窜,并解密该加密字符窜,获得随机字符窜以及时间戳,判断时间戳超过5分钟(可以自己设定多少分钟图片过期,防止有人通过使用同样的加密字符窜和明文使验证永远有效)则无效,否则使用PIL的Image对象生成新图片,然后将随机字符窜加入该图片中(本来应该要进行一些加噪音处理的,可是挺麻烦,所以我没有做,这里只是一个demo,还需要完善),response给用户即可完成图片的刷新。
5,验证的过程其实同第4步骤,我没有实现,应该非常简单。验证的时候将验证码与图片img对象的src 属性中的参数(需解密)进行对比即可。
django的view代码如下:
[code]
#encoding=utf-8
# Create your views here.
from django.http import HttpResponse
#PIL
import Image, ImageDraw,ImageFont
import StringIO
#DES and others
from Crypto.Cipher import DES
import time
import binascii
import random
#内部加解密函数
def des_alog(text,bencode):
obj = DES.new(binascii.a2b_hex('e9d0ada2cb37fba8'))
if bencode == True :
ciph = obj.encrypt(text)
b2a = binascii.b2a_hex(ciph)
return b2a
else:
ciph = binascii.a2b_hex(text)
msg = obj.decrypt(ciph)
return msg
#获取随机加密字符窜
def getString(request):
t = time.time()
random.seed(t)
rstr = ''
rstr +=str(random.randrange(0,9))
rstr +=str(random.randrange(0,9))
rstr +=str(random.randrange(0,9))
rstr +=str(random.randrange(0,9))
#后面跟上时间戳
rstr +="&&" + str(int(t))
#加密
ciph = des_alog(rstr,True)
return HttpResponse(ciph)
def validate(request):
mstream=StringIO.StringIO()
text = request.REQUEST["aid"]
#解密
text = des_alog(text,False)
text = text[0:4]
font = ImageFont.truetype("c:/windows/fonts/arial.ttf",20)
im = Image.new("RGBA", (50, 20),color=0)
draw = ImageDraw.Draw(im, "RGBA")
draw.ink = 255
draw.text((0,0), text,font=font)
im.save(mstream,"JPEG")
return HttpResponse(mstream.getvalue(),"image/jpg") [/code]
django的模板代码如下:
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ajax Test</title>
<script type="text/javascript" src="http://localhost/static/js/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$("#myreflash").click(function() {
var url = "/validate/getString";
$.get(url,{
content: ""
},function(txt){
$("img").each(function(){ this.src = "/validate/validate/?aid="+txt; });
});
});
$("#myreflash").click();
});
</script>
</head>
<body>
<h1>
图片验证 演示
</h1>
<!--这里仅仅是演示,所以初始化的时候没有图片生成-->
<div id="imgshow"><img src="/validate/validate/?aid=----"/></div>
<input id="myreflash" type="button" value="刷新" />
</body>
</html>
[/code]
假定media server中有一个js目录存放了jquery.js,这是用来作为ajax异步调用的。
Python插件假定安装了PIL图片处理库,安装了pycrpto(可以到[url]http://www.voidspace.org.uk/python/modules.shtml#pycrypto[/url]下载)加密库。
工作流程我打算如此做:
1,客户端用户点击刷新按钮,则触发按钮click事件,在click事件中调用jquery的ajax调用,向服务器请求图片的字符窜,并注册异步回调函数等待服务器的应答。
2,服务器得到请求后生成随机字符窜,并在字符窜后面添加时间戳,然后使用pycrpto的DES加密算法进行加密,发送给用户。
3,用户在回调函数中收到了该加密字符窜以后立即设定自己的图片img对象的src属性,将其url后面的参数改成该加密字符窜,于是又触发一次向服务器的图片请求。
4,服务器的另外一个函数响应图片请求,它将解析url的参数,获得加密字符窜,并解密该加密字符窜,获得随机字符窜以及时间戳,判断时间戳超过5分钟(可以自己设定多少分钟图片过期,防止有人通过使用同样的加密字符窜和明文使验证永远有效)则无效,否则使用PIL的Image对象生成新图片,然后将随机字符窜加入该图片中(本来应该要进行一些加噪音处理的,可是挺麻烦,所以我没有做,这里只是一个demo,还需要完善),response给用户即可完成图片的刷新。
5,验证的过程其实同第4步骤,我没有实现,应该非常简单。验证的时候将验证码与图片img对象的src 属性中的参数(需解密)进行对比即可。
django的view代码如下:
[code]
#encoding=utf-8
# Create your views here.
from django.http import HttpResponse
#PIL
import Image, ImageDraw,ImageFont
import StringIO
#DES and others
from Crypto.Cipher import DES
import time
import binascii
import random
#内部加解密函数
def des_alog(text,bencode):
obj = DES.new(binascii.a2b_hex('e9d0ada2cb37fba8'))
if bencode == True :
ciph = obj.encrypt(text)
b2a = binascii.b2a_hex(ciph)
return b2a
else:
ciph = binascii.a2b_hex(text)
msg = obj.decrypt(ciph)
return msg
#获取随机加密字符窜
def getString(request):
t = time.time()
random.seed(t)
rstr = ''
rstr +=str(random.randrange(0,9))
rstr +=str(random.randrange(0,9))
rstr +=str(random.randrange(0,9))
rstr +=str(random.randrange(0,9))
#后面跟上时间戳
rstr +="&&" + str(int(t))
#加密
ciph = des_alog(rstr,True)
return HttpResponse(ciph)
def validate(request):
mstream=StringIO.StringIO()
text = request.REQUEST["aid"]
#解密
text = des_alog(text,False)
text = text[0:4]
font = ImageFont.truetype("c:/windows/fonts/arial.ttf",20)
im = Image.new("RGBA", (50, 20),color=0)
draw = ImageDraw.Draw(im, "RGBA")
draw.ink = 255
draw.text((0,0), text,font=font)
im.save(mstream,"JPEG")
return HttpResponse(mstream.getvalue(),"image/jpg") [/code]
django的模板代码如下:
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ajax Test</title>
<script type="text/javascript" src="http://localhost/static/js/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$("#myreflash").click(function() {
var url = "/validate/getString";
$.get(url,{
content: ""
},function(txt){
$("img").each(function(){ this.src = "/validate/validate/?aid="+txt; });
});
});
$("#myreflash").click();
});
</script>
</head>
<body>
<h1>
图片验证 演示
</h1>
<!--这里仅仅是演示,所以初始化的时候没有图片生成-->
<div id="imgshow"><img src="/validate/validate/?aid=----"/></div>
<input id="myreflash" type="button" value="刷新" />
</body>
</html>
[/code]