1. Python

Django-验证码

Written by Posted on Less than 0 min read

一.写在前面

对于像Django这样强大的开源Web框架，实现个验证码还要自己动手？别人写好的包千千万！随便拿来使即可！

但是像这样简单的轮子自己动手造一下还是可以的。

二.动手实现

对于Python绘图必然是PIL包

 

PIL到现在都不资瓷python 3.x,也是厉害！

还好我已经安装了它的一个有名的fork pillow

废话少说开始行动！

1.在项目app的urls.py里添加两条路由

path('login', views.login, name='login'),
path('get_code', views.get_code, name='get_code'),

这此做一个用户登录（带验证码的）

2.编写视图函数

先看模板login.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
    <script type="text/javascript" src="{% static 'js/login.js' %}"></script>
    <title>Login</title>

</head>
<body>
<form action="{% url 'polls:login' %}" method="post">
    {% csrf_token %}
    <span>username:</span><input name="username"/><br />
    <span>password:</span><input name="password"/><br />
    <span>verifyCode:</span><input name="code"/><br />
    <img src="{% url 'polls:get_code' %}"/><br />
    <button>Login</button>

</form>
</body>
</html>

 

视图函数如下：

# 登录接口
def login(requests):
    if requests.method == "GET":
        return render(requests, "login.html")
    elif requests.method == "POST":
        username = requests.POST.get('username')
        password = requests.POST.get('password')
        code = requests.POST.get('code')
        if code == requests.session.get('code'):
            return HttpResponse("验证码验证正确！登录成功！")
        else:
            return HttpResponse("登录失败！")

# 获取验证码接口
def get_code(requests):
    mode = "RGB"
    size = (200, 100)
    r = get_color()
    g = get_color()
    b = get_color()
    bg_color = (r, g, b)
    image = Image.new(mode=mode, size=size, color=bg_color)
    ig = ImageDraw.Draw(image, mode=mode)

    imagefont = ImageFont.truetype('static/fonts/DejaVuSansMono-Bold_0.ttf', 80)
    code = generate_code()
    requests.session['code'] = code
    # 分别绘制四个字符不同位置，不同颜色
    for i in range(4):
        fill = (get_color(), get_color(), get_color())
        ig.text(xy=(50*i, 0), text=code[i], font=imagefont, fill=fill)

    for i in range(10000):
        fill = (get_color(), get_color(), get_color())
        xy = (random.randrange(201), random.randrange(101))
        ig.point(xy=xy, fill=fill)
    # 内存流
    fp = BytesIO()
    image.save(fp, 'png')
    return HttpResponse(fp.getvalue(), content_type="image/png")

# 获取随机颜色
def get_color():
    return random.randrange(256)

# 随机生成四个字符
def generate_code():
    src = "qwertyuiopasdfghjklzxcvbnm1234567890"
    code = ""
    for i in range(4):
        code += random.choice(src)
    return code

这次视图函数写的比较多

这次还加了点击图片刷新验证码（JS实现）

$(function(){
    $("img").click(function(){
        $(this).attr("src","get_code?u="+Math.random());
    })
})

由于js不是很熟，所以写的很费劲！

细节：为了防止浏览器图片缓存导致刷新不了，这里使用get一个随机值的方式来不然浏览器使用缓存的图片。

 

 

 

 

Related articles

Next