前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >​Python Django下的实现注册验证码

​Python Django下的实现注册验证码

原创
作者头像
no怕不了木
发布2024-04-29 12:13:52
840
发布2024-04-29 12:13:52
举报
文章被收录于专栏:未来码迹

1.需要准备如下:

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

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

代码语言:python
代码运行次数:0
复制
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,验证码图片,验证码,就像下面这样,下面是数据库内容

代码语言:TXT
复制
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代码

代码语言: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,并返回所在的数据,返回图片位置

代码语言:python
代码运行次数:0
复制
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'})

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
验证码
腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档