Python Django下的实现注册验证码

简介: 摘要:使用Python生成随机验证码图像,包括干扰线和噪点,保存到静态文件夹,并将验证码文本存储到数据库。数据库表包含ID、验证码图片路径和验证码文本。JavaScript函数`getRandomInt`生成1到300的随机数,用于请求对应数据库条目的验证码和图片。XMLHttpRequest发送POST请求到服务器,视图函数返回指定ID的验证码图片路径,实现验证码的动态刷新。

1.需要准备如下:

验证码图片、对应的验证码

验证码图片和验证码我们可以使用python去生成,代码参考,不懂的话,可以使用AI生成这一段,可以生成比较复杂的

import random
from PIL import Image
import time
import uuid
import os
code = generate_verification_code_test(6)
image_size = (200, 100)
font_size = 40
image = Image.new('RGB', image_size, color='white')
draw = ImageDraw.Draw(image)

font = ImageFont.truetype("arial.ttf", font_size)
draw.text((10, 10), code, fill='black', font=font)

# 添加干扰线
for _ in range(5):
    draw.line([(random.randint(0, image_size[0]), random.randint(0, image_size[1])),
               (random.randint(0, image_size[0]), random.randint(0, image_size[1]))],
              fill='black', width=2)
# 添加噪点
for _ in range(100):
    draw.point((random.randint(0, image_size[0]), random.randint(0, image_size[1])), fill='black')
filename = str(uuid.uuid4()) + '.jpg'
filename = os.path.join("static\codeimage", filename)
image.save(filename)
time.sleep(2)
# filesave = os.path.join('\codeimage', filename)
verifimhg = validationimage.objects.create(code=code, imageurl=filename)
verifimhg.save()
print(f"验证码第{i}张生成完成")

2.创建一个数据库。包含三个字段,ID,验证码图片,验证码,就像下面这样,下面是数据库内容

303,static\codeimage\d0e5812d-8b8e-4602-b808-71e0e2b3c234.jpg,100S0I
304,static\codeimage\af62a084-6d88-4188-94e0-61b6e8cec1e7.jpg,JWQN43
305,static\codeimage\436db3ce-b3f4-4953-be47-4e13be5cdf8b.jpg,E200UZ
306,static\codeimage\53ad23ef-8119-4c42-a27a-3b81e74785aa.jpg,INHPVV
307,static\codeimage\3bd88aee-68e2-4a39-939d-97a03149e387.jpg,AKXMUP
308,static\codeimage\1a536dc1-5024-4264-b4d9-45923553a924.jpg,8U6DB9
309,static\codeimage\fe3440b9-8631-4de8-89bc-035ca56fe5a2.jpg,H2N83P
310,static\codeimage\e8ddc664-b0c5-4856-8f8c-c992662f88d2.jpg,Y4P0C2
311,static\codeimage\1a5a62fb-3e49-45ed-81d5-b52a1ac77442.jpg,46Q7TL
312,static\codeimage\9d95d569-97fb-42b0-a14d-8ff81e266a7f.jpg,2YKNNW
313,static\codeimage\c5656e02-7359-4cf4-9049-6256430062e3.jpg,B2O9PX
314,static\codeimage\59de9bbb-10c5-4645-a446-38c73dea15f9.jpg,ZZHVGT

3.发起JavaScript请求

大致思路、产生一个随机数,用来请求数据库中的数据,如验证码,以及验证码图片,随机数范围应该是数据库条数的范围之间,如300条数据,那么随机数应该在1-300之间,

JavaScript代码

function getRandomInt(min, max) {
   
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
}

function imagesfun() {
   
    var image = document.getElementById("vaildimg")
    // 示例:生成 1 到 300 之间的随机整数
    var randomNumber = getRandomInt(1, 300); // 区间为 [1, 301),所以实际上生成了 1 到 300 之间的随机整数
    console.log(randomNumber);

    var formData = new  FormData()
    formData.append("id",randomNumber);
    // 如果Django视图需要CSRF令牌,可以在这里添加
    formData.append('csrfmiddlewaretoken', document.querySelector('input[name=csrfmiddlewaretoken]').value);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/verificationimagefun/", true);
    xhr.onload = function() {
   
        if (xhr.status === 200) {
   
            var response = JSON.parse(xhr.responseText);
            // console.log(response.data)
            // console.log(response)
            console.log(response.imagepath)
            if (response.data === "OK") {
   
                // alert('验证码刷新成功');
                image.src = '\\' +response.imagepath
                image.name = randomNumber
                // console.log(image.name)
            } else {
   
                alert('验证码刷新失败');
            }
        } else {
   
            alert('验证码刷新失败:' + xhr.statusText);
        }
    };
    xhr.onerror = function() {
   
        alert('验证码刷新失败:网络错误');
    };
    xhr.send(formData);

}

视图函数,打到id,并返回所在的数据,返回图片位置

def verificationimagefun(request):
    if request.method == 'POST':
        id = request.POST.get('id')
        imagepath = validationimage.objects.all()[int(id)].imageurl
        if request.method == 'POST':
            id = request.POST.get('id')
            # print(id)
    # return JsonResponse({'data': "OK"})
        return JsonResponse({
   'data': "OK",'imagepath':imagepath})
    else:
        return JsonResponse({
   'data':'NG'})
相关文章
|
1月前
|
Linux 数据库管理 Python
CentOS7编译安装Python3.10(含OpenSSL1.1.1安装),创建虚拟环境,运行Django项目(含sqlite版本报错)
CentOS7编译安装Python3.10(含OpenSSL1.1.1安装),创建虚拟环境,运行Django项目(含sqlite版本报错)
174 4
|
1月前
|
开发框架 数据库 开发者
Web开发新境界:用Python玩转Django和Flask!
【6月更文挑战第12天】Python的Web开发框架Django和Flask各有千秋。Django是全能型框架,适合快速开发大型应用,提供ORM、模板引擎、URL路由和后台管理等全面功能。Flask则轻量级且灵活,适用于小型到中型应用,以其简单易用、高度可扩展和灵活路由著称。两者结合使用,能应对各种Web开发需求。
|
29天前
|
前端开发 JavaScript 数据安全/隐私保护
计算机Python项目|django学生成绩管理系统
计算机Python项目|django学生成绩管理系统
|
10天前
|
机器人 计算机视觉 Python
使用Python生成图片验证码
本文介绍了如何使用Python的PIL库生成简单的验证码图片和文本。通过实现CaptchaGenerator类,我们可以轻松生成包含随机字符和干扰元素的验证码。这种技术可以应用于Web应用程序中,用于增强用户验证的安全性和可靠性。
|
17天前
|
Go 调度 Python
Django 视图探秘:FBV与CBV注册方式的异同,揭秘as_view()的执行魔法
Django 视图探秘:FBV与CBV注册方式的异同,揭秘as_view()的执行魔法
|
29天前
|
小程序 前端开发 JavaScript
计算机Python项目|django傣族节日及民间故事推广小程序
计算机Python项目|django傣族节日及民间故事推广小程序
|
1月前
|
前端开发 JavaScript 数据库
四. Django项目之电商购物商城 -- 图片验证码生成
四. Django项目之电商购物商城 -- 图片验证码生成
|
19天前
|
数据采集 计算机视觉 Python
Python验证码的实操讲解
Python验证码的实操讲解
13 0
|
26天前
|
前端开发 数据库 Python
Python Django项目下的分页和筛选查询
在Django中实现分页功能,视图函数通过`Paginator`处理数据,每页显示10条记录。URL配置支持带参数和不带参数的分页请求。前端模板使用for循环展示分页数据,包括商品信息和状态按钮,并利用分页组件导航。筛选查询视图根据GET请求的`state`参数过滤上架或下架产品,同样实现分页功能。前端添加状态选择下拉框,分页链接携带查询参数`state`确保筛选状态在翻页时保持。
|
2月前
|
开发框架 开发者 Python
深入探究Python Web开发框架:Flask与Django
Python作为一种广泛应用于Web开发的编程语言,其拥有众多优秀的Web开发框架。本文将深入探讨其中两大知名框架——Flask与Django。通过对它们的概念与实践进行比较分析,帮助读者更好地理解和选择适合自己项目需求的Web开发框架。