64.django实现登录添加验证码功能

Posted learningonline

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了64.django实现登录添加验证码功能相关的知识,希望对你有一定的参考价值。

1.目的  

   现在我们一般访问网页都需要输入验证码,比如博客园,有的甚至是通过手机验证码实时登录。这样做的目的主要还是为了防止其他人的恶意访问,比如爬虫,下面就来看看验证码是如何实现的

2.演示

  这里我在项目下创建了一个utils文件,存放验证码文件,字体文件下载猛戳这里

utils/code.py

技术分享图片
import random
from PIL import Image,ImageDraw,ImageFont,ImageFilter
def check_code(width=120, height=30, char_length=5, font_file=kumo.ttf, font_size=28):
    """
    生成一个120*30验证码框体,28字体,字体文件需自己导入
    char_length代表生成5个字母
    :return:
    """
    code = []   # 用于存放每个验证码
    img = Image.new(mode=RGB, size=(width, height), color=(255, 255, 255))
    draw = ImageDraw.Draw(img, mode=RGB)

    def rndChar():
        """
        生成随机字母A-Z
        :return:
        """
        return chr(random.randint(65, 90))

    def rndColor():
        """
        生成随机颜色
        :return:
        """
        return (random.randint(0, 255), random.randint(10, 255), random.randint(64, 255))

    # 写文字
    font = ImageFont.truetype(font_file, font_size)
    for i in range(char_length):
        char = rndChar()
        code.append(char)   # 循环了char_length次并追加进去
        h = random.randint(0, 4)
        draw.text([i * width / char_length, h], char, font=font, fill=rndColor())

    # 写干扰点
    for i in range(40):
        draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())

    # 写干扰圆圈
    for i in range(40):
        draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
        x = random.randint(0, width)
        y = random.randint(0, height)
        draw.arc((x, y, x + 4, y + 4), 0, 90, fill=rndColor())

    # 画干扰线
    for i in range(5):
        x1 = random.randint(0, width)
        y1 = random.randint(0, height)
        x2 = random.randint(0, width)
        y2 = random.randint(0, height)
        draw.line((x1, y1, x2, y2), fill=rndColor())

    img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)
    return img, ‘‘.join(code)
View Code

views.py

技术分享图片
from django.shortcuts import render,HttpResponse,redirect
from django.contrib import auth
# 从utils文件夹下的code文件导入 check_code
from utils.code import check_code

def code(request):
    """
    生成图片验证码
    """
    img,random_code = check_code()
    request.session[random_code] = random_code
    from io import BytesIO
    # 实现了在内存中操作bytes
    stream = BytesIO()
    # 将二维码最终转为png格式
    img.save(stream, png)
    return HttpResponse(stream.getvalue())

def login(request):
    """
    用户登陆
    """
    if request.method == GET:
        return render(request,login.html)
    user = request.POST.get(user)
    pwd = request.POST.get(pwd)
    code = request.POST.get(code)
    if code.upper() != request.session[random_code].upper():
        return render(request,login.html,{msg:验证码错误})
    # 通过auth模块进行用户认证
    user = auth.authenticate(username=user,password=pwd)
    if user:
        return redirect(https://www.luffycity.com)
    return render(request, login.html, {msg: 用户名或密码错误})
View Code

login.html

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form method="post">
        {% csrf_token %}
        <p>
            <input type="text" name="user" placeholder="用户名" />
        </p>
        <p>
            <input type="password" name="pwd" placeholder="密码" />
        </p>
        <p>
            <input type="text" name="code" placeholder="验证" />
            <img onclick="changeImg(this);" src="/code/"  title="点击更换">
        </p>
        <input type="submit" value="提交">{{ msg }}
    </form>
    <script>
        // 通过changeImg事件来更换图片
        function changeImg(ths) {
            ths.src = ths.src + ‘?‘;
            console.log(ths.src);
        }
    </script>
</body>
</html>
View Code

#  这里对于changeImg事件加问号还不是太明白

# 对于这里是如何利用random模块实现验证码功能的,详细内容可以参考这里

 

以上是关于64.django实现登录添加验证码功能的主要内容,如果未能解决你的问题,请参考以下文章

我的php代码中登陆界面加一个验证码,如何实现

实现短信验证码登录

登录验证随机验证码的实现

c# Winform 实现登录界面验证码功能(文末附源码)

Java使用SSM框架实现登录页面的验证码功能

实现带有验证码的ajax局部刷新登录界面