关于登录随机验证码的实现

一、验证码相关知识

Python生成随机验证码，需要使用PIL模块.

安装：

pip3 install pillow

基本使用

1. 创建图片

from PIL import Image
img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))

# 在图片查看器中打开
# img.show()

# 保存在本地
with open('code.png','wb') as f:
img.save(f,format='png')

2. 创建画笔，用于在图片上画任意内容

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')

3. 画点

 img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')
# 第一个参数：表示坐标
# 第二个参数：表示颜色
draw.point([100, 100], fill="red")
draw.point([300, 300], fill=(255, 255, 255))

4. 画线

 img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')
# 第一个参数：表示起始坐标和结束坐标
# 第二个参数：表示颜色
draw.line((100,100,100,300), fill='red')
draw.line((100,100,300,100), fill=(255, 255, 255))

5. 画圆

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')
# 第一个参数：表示起始坐标和结束坐标（圆要画在其中间）
# 第二个参数：表示开始角度
# 第三个参数：表示结束角度
# 第四个参数：表示颜色
draw.arc((100,100,300,300),0,90,fill="red")

6. 写文本

 img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')
# 第一个参数：表示起始坐标
# 第二个参数：表示写入内容
# 第三个参数：表示颜色
draw.text([0,0],'python',"red")

7. 特殊字体文字

 img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')
# 第一个参数：表示字体文件路径
# 第二个参数：表示字体大小
font = ImageFont.truetype("kumo.ttf", 28)
# 第一个参数：表示起始坐标
# 第二个参数：表示写入内容
# 第三个参数：表示颜色
# 第四个参数：表示颜色
draw.text([0, 0], 'python', "red", font=font)

图片验证码

import random

def check_code(width=120, height=30, char_length=5, font_file='kumo.ttf', font_size=28):
code = []
img = Image.new(mode='RGB', size=(width, height), color=(255, 255, 255))
draw = ImageDraw.Draw(img, mode='RGB')

def rndChar():
"""
生成随机字母
:return:
"""
return chr(random.randint(65, 90))

def rndColor():
"""
生成随机颜色
:return:
"""
return (random.randint(0, 255), random.randint(10, 255), random.randint(64, 255))

# 写文字
font = ImageFont.truetype(font_file, font_size)
for i in range(char_length):
char = rndChar()
code.append(char)
h = random.randint(0, 4)
draw.text([i * width / char_length, h], char, font=font, fill=rndColor())

# 写干扰点
for i in range(40):
draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())

# 写干扰圆圈
for i in range(40):
draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
x = random.randint(0, width)
y = random.randint(0, height)
draw.arc((x, y, x + 4, y + 4), 0, 90, fill=rndColor())

# 画干扰线
for i in range(5):
x1 = random.randint(0, width)
y1 = random.randint(0, height)
x2 = random.randint(0, width)
y2 = random.randint(0, height)

draw.line((x1, y1, x2, y2), fill=rndColor())

img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)
return img,''.join(code)

if __name__ == '__main__':
# 1. 直接打开
# img,code = check_code()
# img.show()

# 2. 写入文件
# img,code = check_code()
# with open('code.png','wb') as f:
#     img.save(f,format='png')

# 3. 写入内存(Python3)
# from io import BytesIO
# stream = BytesIO()
# img.save(stream, 'png')
# stream.getvalue()

# 4. 写入内存（Python2）
# import StringIO
# stream = StringIO.StringIO()
# img.save(stream, 'png')
# stream.getvalue()

pass

[b]二、图片验证码应用[/b]

四种实现方式，越来越趋于完美

方式一：

# 方式一：这样的方式吧路径写死了，只能是那一张图片
import os
path = os.path.join(settings.BASE_DIR,"static","image","3.jpg")  #路径拼接
with open(path,"rb") as f:
data = f.read()
return HttpResponse(data)

方式二：

# 方式二：每次都显示不同的图片，利用pillow模块，安装一个pillow模块
from PIL import Image
img = Image.new(mode="RGB",size=(120,40),color="green") #首先自己创建一个图片,参数size=(120,40) 代表长和高
f = open("validcode.png","wb")#然后把图片放在一个指定的位置
img.save(f,"png")  #保存图片
f.close()
with open("validcode.png","rb") as f:
data = f.read()
return HttpResponse(data)

方式三：

# 方式三：
# 方式二也不怎么好，因为每次都要创建一个保存图片的文件，我们可以不让吧图片保存到硬盘上，
# 在内存中保存，完了自动清除，那么就引入了方式三：利用BytesIO模块
from io import BytesIO
from PIL import Image
img = Image.new(mode="RGB",size=(120,40),color="blue")
f = BytesIO()  #内存文件句柄
img.save(f,"png")  #保存文件
data = f.getvalue()#打开文件(相当于python中的f.read())
return HttpResponse(data)

方式四：

# 方式四：1、添加画笔，也就是在图片上写上一些文字
#         2、并且字体随机，背景颜色随机
from io import BytesIO
from PIL import Image,ImageDraw,ImageFont
import random
#随机创建图片
img = Image.new(mode="RGB",size=(120,40),color=(random.randint(0,255),random.randint(0,255),random.randint(0,255)))
draw = ImageDraw.Draw(img,"RGB")
# 画干扰线
for i in range(5):
x1 = random.randint(0, 120)
y1 = random.randint(0, 40)
x2 = random.randint(0, 120)
y2 = random.randint(0, 40)

draw.line((x1, y1, x2, y2), fill=(random.randint(0,255),random.randint(0,255),random.randint(0,255)))

font = ImageFont.truetype("static/font/kumo.ttf",20)  #20表示20像素

str_list = []  #吧每次生成的验证码保存起来
# 随机生成五个字符
for i in range(5):
random_num = str(random.randint(0, 9))  # 随机数字
random_lower = chr(random.randint(65, 90))  # 随机小写字母
random_upper = chr(random.randint(97, 122))  # 随机大写字母
random_char = random.choice([random_num, random_lower, random_upper])
print(random_char,"random_char")
str_list.append(random_char)
# (5 + i * 24, 10)表示坐标，字体的位置
draw.text((5+i*24,10),random_char,(random.randint(0,255),random.randint(0,255),random.randint(0,255)),font=font)
print(str_list,"str_list")
f = BytesIO()#内存文件句柄
img.save(f,"png")   #img是一个对象
data = f.getvalue()  #读取数据并返回至HTML
valid_str = "".join(str_list)
print(valid_str,"valid_str")
request.session["keep_valid_code"] = valid_str   #吧保存到列表的东西存放至session中
return HttpResponse(data)

[b]三、滑动验证码应用[/b]

我们可以借助插件来做

1、打开插件，找到自己需要的验证码

2、筛选有用的路径

3、把对应的视图函数也拿过来,注意还需要一个geetest.py的文件

具体实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/login.css">
<script src="/static/jquery-3.2.1.min.js"></script>
滑动验证码的时候导入
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1=10">
<form class="form-horizontal" id="form_data" action="/login/" method="post">
{% csrf_token %}
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="username" placeholder="username" name="username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="password" placeholder="password" name="password">
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6 col-md-offset-1">
{#                            文字部分#}
<label for="vialdCode" class="col-sm-2 control-label">验证码</label>
<div class="col-sm-5">
<input type="text" class="form-control vialdCode_text" id="vialdCode" placeholder="验证码" name="vialdCode">
</div>
{#                            图片部分#}
<div class="col-md-5">
<img class="vialdCode_img" src="/get_vaildCode_img/" alt="" width="200px" height="100px">
{#                                 <a href=""></a>     #}
</div>
</div>

</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 下次自动登录
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<p>
<button type="button" class="btn btn-success login" id="submit">登录</button>
<span class="error has-error"></span></p>
<p>
<button type="button" class="btn btn-primary register">注册</button>
</p>
</div>
<div id="popup-captcha"></div>
</div>
</form>
</div>
</div>
</div>
{#滑动验证码#}
<script>
var handlerPopup = function (captchaObj) {
$("#submit").click(function () {
captchaObj.show();
});
//定时函数
$(".login").click(function () {
function foo() {
$(".error").html("")
}

// 成功的回调
captchaObj.onSuccess(function () {
var validate = captchaObj.getValidate();
$.ajax({
url: "/pc-geetest/ajax_validate", // 进行二次验证
type: "post",
dataType: "json",
headers: {"X-CSRFToken": $.cookie('csrftoken')},
data: {
username: $('#username').val(),
password: $('#password').val(),
geetest_challenge: validate.geetest_challenge,
geetest_validate: validate.geetest_validate,
geetest_seccode: validate.geetest_seccode
},
success: function (data) {
console.log(data);
if (data["flag"]) {
{#                             alert(location.search);#}
{#                             alert(location.search.slice(6));#}
{#                             方式一#}
{#                             if (location.search.slice(6)) {#}
{#                            如果用户没有登录点赞的时候，当用户后来又登录了，就直接让跳转到当前点赞的那个路径#}
{#                                 location.href = location.search.slice(6)#}
{#                             }#}
{#                             else {#}
{#                                 window.location.href = '/index/'#}
{#                             }#}
{#                             方式二：#}
alert($.cookie("next_path"));
if ($.cookie("next_path")){
location.href = $.cookie("next_path")
}
else{
location.href = "/index/"
}
}
else {
$(".error").html(data["error_msg"]);
setTimeout(foo, 3000)
}
}
});
});

});
// 将验证码加到id为captcha的元素里
captchaObj.appendTo("#popup-captcha");
// 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
};
// 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）
$.ajax({
url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
type: "get",
dataType: "json",
success: function (data) {
// 使用initGeetest接口
// 参数1：配置参数
// 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
initGeetest({
gt: data.gt,
challenge: data.challenge,
product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
// 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
}, handlerPopup);
}
});
</script>

login.html