9-Django项目--验证码操作

已于 2024-06-02 16:54:45 修改
阅读量1k 收藏 28
点赞数 22
分类专栏： # Django 文章标签： django python 数据库 web安全 后端 pycharm github
于 2024-06-02 16:54:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_80857229/article/details/139393697
版权

目录

templates/login/login.html

utils/code.py

views/login.py

验证码

生成验证码

code.py

应用验证码

views.py

login.html

templates/login/login.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.css'%}">
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
            width: 100%;
            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }
        .login-wrapper {
            background-color: #fff;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }
        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }
        .input-item:placeholder {
            text-transform: uppercase;
        }
        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
        }
        .msg {
            text-align: center;
            line-height: 88px;
        }
        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-wrapper">
            <div class="header">Login</div>
            <div class="form-wrapper">
                <form method="post" novalidate>
                    {% csrf_token %}
                    <div class="col-md-12">
                        {{ form.username }}
                        <span style="color: red">{{ form.password.errors.0 }}</span>
                        {{ form.password }}
                    </div>
                    <div class="col-md-7">
                        {{ form.code }}
                        <span style="color:red;">{{ form.code.errors.0 }}</span>
                    </div>
                    <div class="col-md-5">
                        <button style="border: none">
                            <img src="/image/code/">
                        </button>

                    </div>

                    <button class="btn" type="submit">Login</button>
                </form>
            </div>

        </div>
    </div>
</body>
</html>

</body>
</html>

utils/code.py

# -*- coding:utf-8 -*-
# pip install pillow==9.4.0

from PIL import Image, ImageFont, ImageDraw
from random import choice,randint

def create_image_content():
    # 创建一张图片
    img = Image.new(mode="RGB", size=(110, 40), color=(255, 255, 255))
    # 创建一个画笔
    draw = ImageDraw.Draw(img, mode="RGB")
    font = ImageFont.truetype("./simkai.ttf", size=30)

    # 验证码出现的字符
    text = "ABCDEFG23456789"

    # 存放四位验证码的字符串
    image_text = ""
    # 生成几位数的验证码，就循环几次
    for num in range(4):
        image_text += choice(text)

    # 每次遍历的时候，将字符添加到图片上
    x = 15
    for i in image_text:
        # 为每一位验证码添加不同颜色
        R = str(randint(0, 255))
        G = str(randint(0, 255))
        B = str(randint(0, 255))
        draw.text(
            (x, 5),
            text=i,
            font=font,
            fill=f"rgb({R},{G},{B})"
        )
        x += 20

    # 添加干扰线条
    for i in range(1, randint(3, 6)):
        x1, y1 = randint(0, 110), randint(0, 40)
        x2, y2 = randint(0, 110), randint(0, 40)
        R = str(randint(0, 255))
        G = str(randint(0, 255))
        B = str(randint(0, 255))
        draw.line((x1, y1, x2, y2),fill=f"rgb({R},{G},{B})", width=2)

    # 添加干扰点
    for i in range(1, randint(30, 50)):
        x1, y1 = randint(0, 110), randint(0, 40)
        R = str(randint(0, 255))
        G = str(randint(0, 255))
        B = str(randint(0, 255))
        draw.point([x1, y1], fill=f"rgb({R},{G},{B})")

    # print(image_text)
    # img.save("code.png")
    # print(img)
    return [img, image_text]

views/login.py

# -*- coding:utf-8 -*-
from django.shortcuts import render, redirect,HttpResponse
from demo_one.utils import pwd_data
from django import forms
from demo_one import models
from demo_one.utils.code import create_image_content


class LoginForm(forms.Form):
    username = forms.CharField(label="用户名", widget=forms.TextInput(
        attrs={"class": "input-item", "autocomplete": "off", "placeholder": "请输入用户名"}))
    password = forms.CharField(label="密码", widget=forms.PasswordInput(
        attrs={"class": "input-item", "autocomplete": "off", "placeholder": "请输入密码"}))
    code = forms.CharField(label="验证码", widget=forms.TextInput(
        attrs={"class": "input-item", "autocomplete": "off", "placeholder": "请输入验证码"}))


    def clean_password(self):
        pwd = self.cleaned_data.get("password")
        # print(self.cleaned_data)
        return pwd_data.md5(pwd)


def login(request):
    if request.method == "GET":
        form = LoginForm()
        return render(request, "login/login.html", {"form": form})

    form = LoginForm(data=request.POST)
    if form.is_valid():
        # 去数据库进行校验
        # print(form.cleaned_data)
        # 使用pop删除，pop返回被删除的值
        user_input_code = form.cleaned_data.pop("code")
        code = str(request.session.get("image_code"))
        # print("我自己输入的是：", user_input_code)
        # print("系统生成的是：", code)
        if user_input_code.upper() != code.upper():
            form.add_error("code", "验证码错误")
            return render(request, "login/login.html", {"form": form})
        admin_object = models.Adminrole.objects.filter(**form.cleaned_data).first()
        if not admin_object:
            # 给输入框添加一个错误提示
            form.add_error("password", "用户名或密码错误")
            return render(request, "login/login.html", {"form": form})
        # 登录成功之后
        # 将登录信息存储在session当中
        request.session["info"] = {"id": admin_object.id, "username": admin_object.username,
                                   "password": admin_object.password, "role": admin_object.role}
        # 时效性
        request.session.set_expiry(60 * 60 * 24 * 30)
        # 登录成功后跳转到首页
        return redirect("/")
    return render(request, "login/login.html", {"form": form})


def logout(request):
    request.session.clear()
    return redirect("/login/")


from io import BytesIO

def image_code(request):
    image, text = create_image_content()
    request.session["image_code"] = text
    request.session.set_expiry(60)

    stream = BytesIO()
    image.save(stream, "png")
    return HttpResponse(stream.getvalue())

验证码

生成验证码

  • code.py

    # -*- coding:utf-8 -*-
# pip install pillow==9.4.0
​
from PIL import Image, ImageFont, ImageDraw
from random import choice,randint
​
def create_image_content():
    # 创建一张图片
    img = Image.new(mode="RGB", size=(110, 40), color=(255, 255, 255))
    # 创建一个画笔
    draw = ImageDraw.Draw(img, mode="RGB")
    font = ImageFont.truetype("./simkai.ttf", size=30)
​
    # 验证码出现的字符
    text = "ABCDEFG23456789"
​
    # 存放四位验证码的字符串
    image_text = ""
    # 生成几位数的验证码，就循环几次
    for num in range(4):
        image_text += choice(text)
​
    # 每次遍历的时候，将字符添加到图片上
    x = 15
    for i in image_text:
        # 为每一位验证码添加不同颜色
        R = str(randint(0, 255))
        G = str(randint(0, 255))
        B = str(randint(0, 255))
        draw.text(
            (x, 5),
            text=i,
            font=font,
            fill=f"rgb({R},{G},{B})"
        )
        x += 20
​
    # 添加干扰线条
    for i in range(1, randint(3, 6)):
        x1, y1 = randint(0, 110), randint(0, 40)
        x2, y2 = randint(0, 110), randint(0, 40)
        R = str(randint(0, 255))
        G = str(randint(0, 255))
        B = str(randint(0, 255))
        draw.line((x1, y1, x2, y2),fill=f"rgb({R},{G},{B})", width=2)
​
    # 添加干扰点
    for i in range(1, randint(30, 50)):
        x1, y1 = randint(0, 110), randint(0, 40)
        R = str(randint(0, 255))
        G = str(randint(0, 255))
        B = str(randint(0, 255))
        draw.point([x1, y1], fill=f"rgb({R},{G},{B})")
​
    # print(image_text)
    # img.save("code.png")
    # print(img)
    return [img, image_text]

应用验证码

  • views.py

    def login(request):
    if request.method == "GET":
        form = LoginForm()
        return render(request, "login/login.html", {"form": form})
​
    form = LoginForm(data=request.POST)
    if form.is_valid():
        # 去数据库进行校验
        # print(form.cleaned_data)
        # 使用pop删除，pop返回被删除的值
        user_input_code = form.cleaned_data.pop("code")
        code = str(request.session.get("image_code"))
        # print("我自己输入的是：", user_input_code)
        # print("系统生成的是：", code)
        if user_input_code.upper() != code.upper():
            form.add_error("code", "验证码错误")
            return render(request, "login/login.html", {"form": form})
        admin_object = models.Adminrole.objects.filter(**form.cleaned_data).first()
        if not admin_object:
            # 给输入框添加一个错误提示
            form.add_error("password", "用户名或密码错误")
            return render(request, "login/login.html", {"form": form})
        # 登录成功之后
        # 将登录信息存储在session当中
        request.session["info"] = {"id": admin_object.id, "username": admin_object.username,
                                   "password": admin_object.password, "role": admin_object.role}
        # 时效性
        request.session.set_expiry(60 * 60 * 24 * 30)
        # 登录成功后跳转到首页
        return redirect("/")
    return render(request, "login/login.html", {"form": form})
​
​
def logout(request):
    request.session.clear()
    return redirect("/login/")
​
​
from io import BytesIO
​
def image_code(request):
    image, text = create_image_content()
    request.session["image_code"] = text
    request.session.set_expiry(60)
​
    stream = BytesIO()
    image.save(stream, "png")
    return HttpResponse(stream.getvalue())

login.html

  • login.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.css'%}">
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
            width: 100%;
            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }
        .login-wrapper {
            background-color: #fff;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }
        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }
        .input-item:placeholder {
            text-transform: uppercase;
        }
        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
        }
        .msg {
            text-align: center;
            line-height: 88px;
        }
        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-wrapper">
            <div class="header">Login</div>
            <div class="form-wrapper">
                <form method="post" novalidate>
                    {% csrf_token %}
                    <div class="col-md-12">
                        {{ form.username }}
                        <span style="color: red">{{ form.password.errors.0 }}</span>
                        {{ form.password }}
                    </div>
                    <div class="col-md-7">
                        {{ form.code }}
                        <span style="color:red;">{{ form.code.errors.0 }}</span>
                    </div>
                    <div class="col-md-5">
                        <button style="border: none">
                            <img src="/image/code/">
                        </button>
​
                    </div>
​
                    <button class="btn" type="submit">Login</button>
                </form>
            </div>
​
        </div>
    </div>
</body>
</html>
​
</body>
</html>

金灰
关注
  • 22
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
34--Django-项目实战-全栈开发-基于django+drf+vue+elementUI企业级项目开发流程-环境准备
摘 月
04-05 1186
基于mysqldb做了---->mysqlclient即支持python2，又支持python3，无缝支持django，这个模块可能装不上（linux，win）基于mysqldb做了---->pymysql即支持python2，又支持python3，不支持django，需要改源码。django操作mysql，底层用的mysqldb模块，在python2可以用，3.x不维护了。5.项目如果要顺利跑，配置路径得正确---->修改配置文件路径。3.技术选型，架构设计，数据库设计，分任务开发。
Python-Django-视图
sinat_61909096的博客
04-19 1714
《 Django 框架》课程第 1 次教学 - 视图高级 一、内置错误视图 1 、视图 一个视图函数，简称视图，是一个简单的Python函数，它接受Web请求并且返回Web响应。代码写在哪里也无所 谓，只要它在你的应用目录下面。但是为了方便视图一般被定义在“应用/views.py”文件中。 视图的第一个参数必须为HttpRequest实例，还可能包含下参数如： 通过正则表达式组获得参数 视图必须返回一个HttpResponse对象或子对象作为响应。 2 、错误视图 Django内置处理HTTP错误的视图，
毕业设计----Django实现验证码登录
生夏夏的博客
01-24 521
登陆时添加一个验证码校验功能，当邮箱激活后，用户输入正确的验证码之后才能登录系统。需要注意的是，这里需要导入一个字体文件，字体文件可以从电脑获取。通过从session中获取验证码与输入的验证码进行比较。
Django图形验证码-captcha
IT瘾君子的博客
10-21 800
目的：区分人和机器 1、功能分析 1、新建子应用verifications python …/manage.py startapp verifications 2、注册settings ‘apps.verifications’ 3、接收路由 from django.urls import path from apps.verifications.views import ImageCodeView urlpatterns = [ path('image_codes/<uuid>
django-验证码
pyhui的技术博客
09-11 794
参考资料 Django 2.1.7 模板 - 图片验证码的实现 - 云+社区 - 腾讯云 https://cloud.tencent.com/developer/article/1455075 验证码的使用 from django.shortcuts import render, redirect, HttpResponse # 验证码所需 # 验证码 from PIL import Image...
83.Django项目中使用验证码
m0_63953077的博客
11-23 907
Django项目中使用验证码
开发知识点-Django
aming小老弟
11-09 597
flask 轻手机游戏请求响应 路由MTV设计结构HTTP状态的 cookie session解释器 版本。
django-simple-captcha验证码的使用
。
12-07 907
第三方库：django-simple-captcha 一、安装配置captcha： 1. 【Terminal】使用命令行安装 pip install django-simple-captcha 2. 把captcha添加到Django项目下的settings.py文件已安装app中 INSTALLED_APPS = [ …… 'captcha', ] 3. 【Terminal】...
django-项目
m0_43448734的博客
08-31 681
全称：Representational State Transfer1.资源网络上的一个实体，每个资源都有一个独一无二的URL与之对应；获取资源-直接访问URL即可2.表现层资源的表现形式 如HTML、xml、JPG、json等3.状态转化访问一个URL即发生一次客户端和服务端得交互；此次交互将会涉及到数据和状态得变化客户端需要通过某些方式接触具体得变化 如GET、POST、PUT、PATCH、DELETE。
wagtail-django-simple-captcha：用于Wagtail表单页面的简单Captcha字段
02-06
在本文中，我们将深入探讨Wagtail、Django Simple Captcha以及如何在Wagtail项目中集成和使用这个插件。 首先，我们需要理解**Wagtail**。Wagtail是一款基于Django的开源内容管理系统，它以其强大的模板系统、...
python-django-flask-爬虫
08-31
此外，Django还包括ORM（对象关系映射）系统，方便数据库操作，以及内置的管理员界面，用于快速管理数据。 1. 模型：定义数据结构，包括字段、数据类型、验证规则等。 2. 视图：处理HTTP请求，调用相关逻辑，并返回...
django-two-factor-auth：完整的Django双重身份验证，可轻松集成到大多数Django项目中
02-05
总结，`django-two-factor-auth` 是Django项目中实现2FA的理想选择，它提供了一套全面的解决方案，易于集成，且安全可靠。通过实施这个库，你可以增强用户账户的安全性，同时保持良好的用户体验。不过，为了确保最佳...
django-fluent-comments：django注释的基于ajax的现代外观
02-04
**标题与描述解析** 标题"django-fluent-comments：django注释的基于ajax的现代外观"指的是一款名为django-fluent-comments的Django...通过适当的配置和定制，开发者可以充分利用这个工具提升其Django项目的评论功能。
python-Django实现用户登录
04-06
Python Django 是一个强大的Web开发框架，它为开发者提供了一种高效、优雅的方式来...通过学习这些视频教程，你可以掌握如何在Django项目中实现用户登录，并理解其背后的原理，从而为用户提供安全、便捷的登录体验。
Django学习（二）
weixin_67852201的博客
07-25 493
当我门直接访问时会出触发django的csrf检测。
Django 表单常用字段参数
人生苦短，何妨一试
07-24 890
在Django中，表单（Form）是用来处理HTML表单数据的重要工具。Django的表单API允许你定义表单字段及其验证规则。每个表单字段都可以通过多种参数来定制其行为。
快醒醒，别睡了!...讲《数据分析pandas库》了—/—＜4＞
qq_64603703的博客
07-27 1002
详细解说数据分析pandas库中的常用方法
【Python】pandas：排序、重复值、缺省值处理、合并、分组
最新发布
yannan20190313的博客
07-30 524
【Python】pandas：排序（sort_index,sort_values,nsmallest,nlargest）、重复值（duplicated,drop_duplicates,value_counts,nunique）、缺省值处理（isna,isnull,notna,notnull,fillna,dropna,replace）、合并（join,merge,append,concat）、分组（groupby）
Django商城项目开发实战：涵盖图形验证码、QQ登录、商品管理与订单系统
在本Django项目开发过程中，首先进行了项目准备，这包括对项目需求的深入分析以及整体架构的设计。在项目架构设计阶段，考虑了使用MySQL作为主要数据库，Redis用于缓存和队列处理，如验证码逻辑、短信验证以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

金灰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值