django博客项目-登录验证码生成和登录校验

最新推荐文章于 2024-06-17 11:47:21 发布
最新推荐文章于 2024-06-17 11:47:21 发布
阅读量303 收藏
点赞数 2
分类专栏： python 博客项目 文章标签： python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/no_name_sky/article/details/116701344
版权

验证码图片生成

图片背景随机生成

验证码图片每次登录的时候都会刷新不同的验证码，有两种方式:

  • 本地存储所有验证码图片，每次返回本地验证码图片，很占资源，不建议使用
  • 后台自动生成验证码图片，每次返回随机生成的图片
login.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script src="/static/js/bootstrap.min.js"></script>
</head>
<body>
<h1>登录</h1>
<div class="row">
    <div class="col-md-6 col-lh-offset-3">
        <form>
            <div class="form-group">
                <label for="user">用户名</label>
                <input type="text" id="user" class="form-control">
            </div>
            <div class="form-group">
                <label for="pwd">密码</label>
                <input type="password" id="pwd" class="form-control">
            </div>

            <div class="form-group">
                <label for="valid">验证码</label>
                <div class="row">
                    <div class="col-md-6">
                        <input type="txt" class="valid_code form-control">
                    </div>
                    <div class="col-md-6">
                        <img width="270" height="40" id="valid_code_img" src="/get_validCode_img">
                    </div>

                </div>

            </div>
        </form>

    </div>
</div>


<script src="/static/js/jquery.min.js"></script>
<script>
    // 刷新验证码
    $('#valid_code_img').click(function (){
        $(this)[0].src+="?"
    })

</script>
</body>
</html>

# views.py
def get_validCode_img(request):
    def get_random_color():
        return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)
    # 方式一
    # with open('dog.jpg') as f:
    #     data = f.read()

    # 方式二 pillow 模块
    # 使用磁盘作为存储，每次都需要写入文件打开文件，IO磁盘操作都是很慢的
    # from PIL import Image
    # img = Image.new('RGB', (270, 40), (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
    #
    # with open('validCode.png', 'wb') as f:
    #     img.save(f, 'png')
    #
    # with open('validCode.png', 'rb') as f:
    #     data = f.read()

    # 方式3 使用内存句柄，不经过磁盘
    from PIL import Image, ImageDraw, ImageFont
    from io import BytesIO
    img = Image.new('RGB', (270, 40), get_random_color())

    # 在图片上增加文字
    draw = ImageDraw.Draw(img)
    halfings_font = ImageFont.truetype("static/fonts/kumo.ttf", size=32)
    # 随机字符生成
    for i in range(5):
        random_number = str(random.randint(0, 9))
        random_low_alpha = chr(random.randint(97, 122))
        random_upper_alpha = chr(random.randint(65,90))
        random_char = random.choice([random_low_alpha, random_number, random_upper_alpha])
        draw.text((i*50+20, 5), random_char, get_random_color(), font=halfings_font)

    # 噪点噪线
    width = 270
    height = 40
    # 划线
    for i in range(5):
        x1 = random.randint(0, width)
        x2 = random.randint(0, width)
        y1 = random.randint(0, height)
        y2 = random.randint(0, height)
        draw.line((x1, y1, x2, y2), fill=get_random_color())

    # 画点
    for i in range(30):
        draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color())
        x = random.randint(0, width)
        y = random.randint(0, height)
        draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color())

    f = BytesIO()
    img.save(f, 'png')
    data = f.getvalue()

    return HttpResponse(data)

知识点

PIL 模块使用
BytesIO 模块使用

效果展示

在这里插入图片描述

验证码校验

思路：在生成验证码图片的时候，需将生成的校验码保存到session中，保证每个用户之间的校验码是单独的，互不影响。在校验用户输入的时候将其从session中拿出来校验即可。
登录点击使用ajax来完成，对数据校验之后出现的错误数据进行局部显示，用来提示用户。
前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script src="/static/js/bootstrap.min.js"></script>
</head>
<body>
<h1>登录</h1>
<div class="row">
    <div class="col-md-6 col-lh-offset-3">
        <form>
            {% csrf_token %}
            <div class="form-group">
                <label for="user">用户名</label>
                <input type="text" id="user" class="form-control">
            </div>
            <div class="form-group">
                <label for="pwd">密码</label>
                <input type="password" id="pwd" class="form-control">
            </div>

            <div class="form-group">
                <label for="valid">验证码</label>
                <div class="row">
                    <div class="col-md-6">
                        <input type="txt" class="form-control" id="valid_code">
                    </div>
                    <div class="col-md-6">
                        <img width="270" height="40" id="valid_code_img" src="/get_validCode_img">
                    </div>

                </div>

            </div>
            <div class="form-group">
                <input type="button" class="btn btn-default login_btn pull-right" value="登录">

            </div>
        </form>

    </div>
</div>


<script src="/static/js/jquery.min.js"></script>
<script>
    // 刷新验证码
    $('#valid_code_img').click(function (){
        $(this)[0].src+="?"
    })

    // 校验验证码
    $('.login_btn').click(function () {
        $.ajax({
            url:"",
            type:"post",
            data:{
                'user':$('#user').val(),
                'pwd':$('#pwd').val(),
                'valid_code':$('#valid_code').val(),
                'csrfmiddlewaretoken':$("[name='csrfmiddlewaretoken']").val()
            },
            success:function(data){
                console.log(data)
            }
        })
    })

</script>
</body>
</html>

后端代码

def login(request):
    if request.method == "POST":
        response = {'user': None, 'msg': None}
        user = request.POST.get('user')
        pwd = request.POST.get('pwd')
        valid_code = request.POST.get('valid_code')
        # 校验验证码输入
        valid_code_str = request.session.get('valid_code_str')
        if valid_code.lower() == valid_code_str.lower():
            # 用户名密码校验
            pass
        else:
            response['msg'] = 'valid code error'

        print(user, pwd, valid_code)
        return JsonResponse(response)

    return render(request, 'login.html')

def get_validCode_img(request):
    def get_random_color():
        return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)
    # 方式3 使用内存句柄，不经过磁盘
    from PIL import Image, ImageDraw, ImageFont
    from io import BytesIO
    img = Image.new('RGB', (270, 40), get_random_color())

    # 在图片上增加文字
    draw = ImageDraw.Draw(img)
    halfings_font = ImageFont.truetype("static/fonts/kumo.ttf", size=32)
    # 保存生成的随机验证码
    valid_code_str = ''
    # 随机字符生成
    for i in range(5):
        random_number = str(random.randint(0, 9))
        random_low_alpha = chr(random.randint(97, 122))
        random_upper_alpha = chr(random.randint(65,90))
        random_char = random.choice([random_low_alpha, random_number, random_upper_alpha])
        draw.text((i*50+20, 5), random_char, get_random_color(), font=halfings_font)
        valid_code_str += random_char

    # 存储生成验证码到session中，保证每一个人的都是独立的
    request.session['valid_code_str'] = valid_code_str

    # 噪点噪线
    width = 270
    height = 40
    # 划线
    for i in range(5):
        x1 = random.randint(0, width)
        x2 = random.randint(0, width)
        y1 = random.randint(0, height)
        y2 = random.randint(0, height)
        draw.line((x1, y1, x2, y2), fill=get_random_color())

    # 画点
    for i in range(30):
        draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color())
        x = random.randint(0, width)
        y = random.randint(0, height)
        draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color())

    f = BytesIO()
    img.save(f, 'png')
    data = f.getvalue()

    return HttpResponse(data)

用到的知识点

request.session

	request.session[''key] = value  存储数据到session中
	request.session.get('key')  获取session中的数据

ajax

	css结合ajax增加点击事件：
		<input type="button" class="btn btn-default login_btn pull-right" value="登录">
		$('.login_btn').click(function () {}
	ajax成功函数中的log显示：
		console.log(data)
	ajax获取name为某固定值的标签的value内容
		$("[name='csrfmiddlewaretoken']").val()

前端效果展示

在这里插入图片描述

登录校验

使用auth模块做用户认证功能，当用户认证成功后，需对当前用户进行注册，request.user就等于了当前登录用户，并且全局可以用。
前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script src="/static/js/bootstrap.min.js"></script>
</head>
<body>
<h1>登录</h1>
<div class="row">
    <div class="col-md-6 col-lh-offset-3">
        <form>
            {% csrf_token %}
            <div class="form-group">
                <label for="user">用户名</label>
                <input type="text" id="user" class="form-control">
            </div>
            <div class="form-group">
                <label for="pwd">密码</label>
                <input type="password" id="pwd" class="form-control">
            </div>

            <div class="form-group">
                <label for="valid">验证码</label>
                <div class="row">
                    <div class="col-md-6">
                        <input type="txt" class="form-control" id="valid_code">
                    </div>
                    <div class="col-md-6">
                        <img width="270" height="40" id="valid_code_img" src="/get_validCode_img">
                    </div>

                </div>

            </div>
            <div class="form-group">
                <input type="button" class="btn btn-default login_btn" value="登录">
                <span id="error_info"></span>

            </div>
        </form>

    </div>
</div>


<script src="/static/js/jquery.min.js"></script>
<script>
    // 刷新验证码
    $('#valid_code_img').click(function (){
        $(this)[0].src+="?"
    })

    // 校验验证码
    $('.login_btn').click(function () {
        $.ajax({
            url:"",
            type:"post",
            data:{
                'user':$('#user').val(),
                'pwd':$('#pwd').val(),
                'valid_code':$('#valid_code').val(),
                'csrfmiddlewaretoken':$("[name='csrfmiddlewaretoken']").val()
            },
            success:function(data){
                console.log(data)
                if (data.user){
                // 用户成功登录之后的跳转
                    location.href = "/index"
                }
                else {
                // 显示错误信息，text修改标签之间的内容,css增加css样式
                    $('#error_info').text(data.msg).css({"color":"red", "margin-left":"20px"})
                    // 定时任务，多久之后执行对应函数。对错误信息显示后自动消失
                    setTimeout(function (){
                        $('#error_info').text("")
                    }, 1000)
                }
                }
            }
        })
    })

</script>
</body>
</html>

后端代码：

def login(request):
    if request.method == "POST":
        response = {'user': None, 'msg': None}
        user = request.POST.get('user')
        pwd = request.POST.get('pwd')
        valid_code = request.POST.get('valid_code')
        # 校验验证码输入
        valid_code_str = request.session.get('valid_code_str')
        if valid_code.lower() == valid_code_str.lower():
            # 用户名密码校验
            login_user = auth.authenticate(username=user, password=pwd)
            if login_user:
                # 用户校验成功，进行注册，request.user== 当前登录对象，丙炔全局可用
                auth.login(request, login_user)
                response['user'] = login_user.username
            else:
                response['msg'] = 'username or password error'
        else:
            response['msg'] = 'valid code error'

        print(user, pwd, valid_code)
        return JsonResponse(response)

    return render(request, 'login.html')

用到的知识点

auth模块的使用
ajax对标签内容的替换和前端跳转
ajax定时多久执行函数

no_name_sky
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Django框架登录加上验证码校验实现验证功能示例
09-19
主要介绍了Django框架登录加上验证码校验实现验证功能,结合实例形式分析了Django框架基于Pillow模块的图形验证码生成与使用相关操作技巧,需要的朋友可以参考下
基于Django的登录注册模块，包含验证码，可直接用于WEB项目
01-03
在本模块中，可能使用了第三方库如`django-simple-captcha`来生成和验证随机的图像验证码。用户在提交表单前需正确输入验证码，确保操作是由人类执行的。 6. **Web项目集成**： 这个登录注册模块可以直接与任何...
9-Django项目--验证码操作
金灰的博客
06-02 1068
form.add_error("password", "用户名或密码错误")# print("我自己输入的是：", user_input_code)form.add_error("code", "验证码错误")# print("系统生成的是：", code)# 使用pop删除，pop返回被删除的值。# 给输入框添加一个错误提示。# 每次遍历的时候，将字符添加到图片上。# 为每一位验证码添加不同颜色。# 生成几位数的验证码，就循环几次。# 去数据库进行校验。# 存放四位验证码的字符串。# 验证码出现的字符。
django 生成验证码，并用验证码校验登录
YUAYU博客
09-06 821
from PIL import Image, ImageFont from PIL.ImageDraw import ImageDraw from django.conf import settings from middle.utils import generate_code def get_code(request): mode = "RGB" # 颜色模式 size = (200,100) # 画布大小 red = random.randrange(255)
五. Django项目之电商购物商城 -- 短信验证码生成
几许的博客
05-02 794
需要开发文档和前端资料的可私聊。
83.Django项目中使用验证码
m0_63953077的博客
11-23 907
Django项目中使用验证码
Django在后台登录处添加验证码
xyh2004的博客
05-28 378
【代码】Django在后台登录处添加验证码。
基于Django的博客系统之增加手机验证码登录（九）
最新发布
06-17 687
实现基于Redis和第三方短信服务商的短信验证码登录功能。用户可以通过手机号码获取验证码，并使用验证码进行登录。前端部分：使用 Vue.js 编写手机验证码登录页面。后端部分：使用 Django 编写 API，处理手机号码和验证码的验证逻辑，并与 Redis 集成存储验证码。
Django开发技术第八式---登录验证码
qq_36789311的博客
09-08 568
1、建立Django项目 TOTO 2、生成系统数据库user （1）迁移数据库 (2) 创建超级用户数据 得到： 3、登录页面、验证码（1.0） login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
Django登录/注册用户为普通表单加入验证码功能
weixin_43573931的博客
09-14 257
Django注册登录添加验证码
Django项目--用户注册（个人练手）
2301_78505185的博客
04-14 1421
在使用命令时如果app的名字是user会出现包冲突，建议包名改成users。然后再models.py中粘贴代码。只要使用了models就需要在dev文件的INSTALLED_APPS注册一下。"""自定义用户模型类"""mobile = models.CharField(max_length=11, unique=True, verbose_name='手机号') #unique指定唯一值db_table = 'tb_users' #指定表的名字。
python&登录网站验证码的生成与识别系统(django)
11-21
1.服务端随机生成小拼块和带有抠图缺口的背景图片，并保存随机抠图位置坐标； 2.前端实现滑动交互，将小拼块拖到缺口上还原完整图，记录到用户拖动距离值； 3.前端将用户拖动距离值传入服务端，服务端校验误差是否在...
基于python+django的登录网站验证码的生成与识别系统的实现.zip
06-09
基于python+django的登录网站验证码的生成与识别系统的实现.zip 用python实现登录网站验证码功能： 设计两种验证码： 1 图形验证码，用python web框架Django能够实现动态刷新。 2 滑动验证码： 1.服务端随机生成小...
django博客项目-文章详情页功能
no_name_sky的博客
05-28 6851
文章详情页左侧边栏数据复用 文章详情页和个人站点的左侧边栏的内容格式都是一样的，从个人站点路由和文章详情路由进入到网页，侧边栏显示的内容是一模一样，解决方案： 方案一： 写一个home_site.html和article_detail.html建立一个新的母版base.html，两者继承base.html,在将所需的数据从对应的视图函数中传入即可。这只是解决了html代码重复问题。视图函数代码的问题是，在文章详情页和个人站点的视图函数中都要获取相同的数据，存在了数据代码冗余问题。 方案二： 利用inclus
ajax实现图片点击的局部刷新
no_name_sky的博客
05-17 1046
点击图片刷新文本框的内容 结合ajax来实现，给图片添加一个onclick事件，ajax添加事件处理逻辑，在收到后端的response后对文本框的内容进行刷新。 代码 前端代码： <p>图片点击</p> <img width="20" height="20" src="/static_0/image/flush.jpg" onclick="FlushImg();"> <input id="1i"> <script src="{% static '/js
利用face_recognition识别照片是否为同一人
no_name_sky的博客
05-14 640
import face_recognition image_me = face_recognition.load_image_file("s.png") my_face_encoding = face_recognition.face_encodings(image_me)[0] image_unkonw = face_recognition.load_image_file("unkonw.png") unknow_face_encoding = face_recognition.face_encodi
django博客项目-文章评论功能
no_name_sky的博客
05-29 529
实现流程 根评论：基于文章的评论 子评论：对于评论的评论 两者区别：是否有父评论 对评论进行树形显示。 构建样式 代码 前端代码： <div class="clearfix"> <div id="div_digg"> {% csrf_token %} <div class="diggit action"> <span class="diggnum" id="digg_count">{{ artic
博客项目-功能分析和表设计
no_name_sky的博客
05-24 353
仿照博客园编写一个博客系统 功能分析 登录功能，基于auth模块和ajax实现登录验证 注册功能，基于forms组件和ajax实现注册 系统首页，所有文章列表渲染，分页器 个人站点页面 文章详情页 文章点赞 文章评论，包含对文章的评论和对评论的评论 富文本编辑器和xss攻击 表设计 根据功能设计表和表之间的关系，关系图如下： 表结构 UserInfo from django.contrib.auth.models import AbstractUser class UserInfo(AbstractUs
在django中怎么运用django-simple-captcha自动生成验证码
02-28
在Django中使用django-simple-captcha生成验证码可以通过以下步骤现： 1. 安装django-simple-captcha库： 在终端中运行以下命令安装django-simple-captcha库： ``` pip install django-simple-captcha ``` 2. ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值