验证码生成

本文介绍了一种利用Django框架生成并验证图形验证码的方法,包括验证码图片的生成过程、前端展示及验证流程。通过随机生成字母、设置颜色、加入干扰点等步骤,实现了安全有效的验证码系统。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

视图函数里

1,导入图片,画布,画笔,画笔上的字体,定义坐标
2,从外部导入字体(字体导入到static静态中)
3,随机生成验证码,验证码颜色,验证码背景,给验证码加干扰点
4,清理垃圾
5,把验证码导入到对应的页面上
6, 验证码更新策略(浏览器在处理图片地址设置的时候,如果图片地址没有改变,
而内容发生了改变,浏览器不会认为发生了改变,导致图片不能正常刷新)
7. 解决图片更新问题方案,在地址最后拼接时间戳
8. 验证使用的session缓存的验证码

import random

from PIL import Image, ImageDraw, ImageFont
from django.http import HttpResponse
from django.shortcuts import render, redirect


# Create your views here.

# timestamp参数是定义的时间戳
def getVerifyCode(request, timestamp):
    # 绘制验证码,画布,画笔,画笔字体
    imageMode = 'RGB'
    imageSize = (100, 50)
    red = random.randrange(0, 255)
    green = random.randrange(0, 255)
    blue = random.randrange(0, 255)
    imageColor = (red, green, blue)

    # 画布完成 imageMode画布颜色  imageSize画布大小
    image = Image.new(imageMode, imageSize, imageColor)
    # 画笔
    imageDrwaw = ImageDraw.Draw(image)
    # 文本坐标
    xy = (10, 10)

    # 导入字体   ()字体路径,字体大小
    imageFont = ImageFont.truetype('static/fonts/ADOBEARABIC-BOLD.OTF', 30)

    # 随机生成四个大写字母
    verifyCode = ''
    for i in range(4):
        num = random.randrange(65, 91)
        letter = chr(num)
        verifyCode += letter

    # 把当下的四个随机数的数字赋给session
    request.session["verifycode"] = verifyCode

    x = 5
    # 验证码的颜色
    for l in verifyCode:
        fred = random.randrange(0, 255)
        fgreen = random.randrange(0, 255)
        fblue = random.randrange(0, 255)
        fontColor = (fred, fgreen, fblue)
        # 验证码的位置
        xy = (x, 10)
        x += 20
        imageDrwaw.text(xy, l, font=imageFont, fill=(0, 0, 255))

    # 验证码加点
    for i in range(300):
        x = random.randrange(0, 100)
        y = random.randrange(0, 50)
        xy = (x, y)
        pred = random.randrange(0, 256)
        pgreen = random.randrange(0, 256)
        pblue = random.randrange(0, 256)
        pColor = (pred, pgreen, pblue)
        imageDrwaw.point(xy, pColor)

    # 清理垃圾
    del imageDrwaw
    # 使用IO将画布转换成流,输出
    import io
    # 缓冲区
    buffer = io.BytesIO()
    # 将image导入到缓冲区
    image.save(buffer, 'png')
    return HttpResponse(buffer.getvalue(), 'image/png')

# 进入登录页面
def verifycode(request):
    return render(request, 'youapp/verifycode.html')

# 验证
def doverifycode(request):
    # 获取用户输入的验证码的值
    verifycode = request.POST.get('verifycode')
    # 在生成验证码的地方获取session,
    cacaverifycode = request.session.get('verifycode')
    # 判断比较
    if verifycode == cacaverifycode:
        return HttpResponse('欢迎来到王者荣耀')
    else:
        # 这里不能用重定向
        return HttpResponse('王者荣耀')
        # return redirect("/youapp/verifycode/")


# 富文本 pip install django-tinymce
def rtfblog(request):
    return render(request, 'youapp/blog.html')

在HTML页面里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码</title>
    {#    导入jq#}
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function () {
            $("#ww").click(function () {
                {#Date.now()时间戳 #}
                $('#verify_img').prop("src", "http://127.0.0.1:8000/youapp/getverifycode/" + Date.now());
            })
        })
    </script>
    <style>
        #ww {
            background: #00ff00;
            width: 100px;
        }
    </style>
</head>
<body>
<form action="{% url 'youapp:doverifycode' %}" method="post">
    {% csrf_token %}
    <span>验证码</span><input type="text" name='verifycode' placeholder="请输入验证码">
    {#    验证码的图传进来 1 是传入的参数,默认值#}
    <img id="verify_img" src="{% url 'youapp:getVerifyCode' 1 %}">
    <br>
    <div id='ww'>更换验证码</div>
    <input type="submit" value="提交">
</form>


</body>
</html>

配置路径

from django.conf.urls import url
from youapp import views

urlpatterns = [
    url(r'^getverifycode/(\d+)', views.getVerifyCode, name='getVerifyCode'),
    url(r'^verifycode', views.verifycode, name='verifycode'),
    url(r'^doverifycode', views.doverifycode, name='doverifycode'),
    url(r'^rtfblog', views.rtfblog, name='rtfblog'),
]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值