qq_53016396
小呀莫小菜鸟
2021-05-28 11:21
采纳率: 50%
浏览 26

用Python和Django制作校验码

 

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • qq_15769939
    小P聊技术 2021-05-28 11:32
    已采纳

      1.views.py

    from django.shortcuts import render, HttpResponse
    
    from django.http import JsonResponse
    
    from django.contrib import auth
    from PIL import Image, ImageDraw, ImageFont
    import random
    from io import BytesIO
    
    
    # Create your views here.
    
    
    # 自己生成验证码的登录
    
    def login(request):
        if request.method == "POST":
            # 初始化一个给AJAX返回的数据
            ret = {"status": 0, "msg": ""}
            # 从提交过来的数据中 取到用户名和密码
            username = request.POST.get("username")
            pwd = request.POST.get("password")
            valid_code = request.POST.get("valid_code")  # 获取用户填写的验证码
            if valid_code and valid_code.upper() == request.session.get("valid_code", "").upper():
                # 验证码正确
                # 利用auth模块做用户名和密码的校验
                user = auth.authenticate(username=username, password=pwd)
                if user:
                    # 用户名密码正确
                    # 给用户做登录
                    auth.login(request, user)
                    ret["msg"] = "/index/"
                else:
                    # 用户名密码错误
                    ret["status"] = 1
                    ret["msg"] = "用户名或密码错误!"
            else:
                ret["status"] = 1
                ret["msg"] = "验证码错误"
    
            return JsonResponse(ret)
        return render(request, "login.html")
    
    
    # 获取验证码图片的视图
    def get_valid_img(request):
        # 获取随机颜色的函数
        def get_random_color():
            return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)
    
        # 生成一个图片对象
        img_obj = Image.new(
            'RGB',
            (220, 35),
            get_random_color()
        )
        # 在生成的图片上写字符
        # 生成一个图片画笔对象
        draw_obj = ImageDraw.Draw(img_obj)
        # 加载字体文件, 得到一个字体对象
        font_obj = ImageFont.truetype("static/font/kumo.ttf", 28)
        # 开始生成随机字符串并且写到图片上
        tmp_list = []
        for i in range(5):
            u = chr(random.randint(65, 90))  # 生成大写字母
            l = chr(random.randint(97, 122))  # 生成小写字母
            n = str(random.randint(0, 9))  # 生成数字,注意要转换成字符串类型
    
            tmp = random.choice([u, l, n])
            tmp_list.append(tmp)
            draw_obj.text((20 + 40 * i, 0), tmp, fill=get_random_color(), font=font_obj)
    
        # 保存到session
        request.session["valid_code"] = "".join(tmp_list)
        # 加干扰线
        width = 220  # 图片宽度(防止越界)
        height = 35
        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_obj.line((x1, y1, x2, y2), fill=get_random_color())
    
        # 加干扰点
        for i in range(40):
            draw_obj.point((random.randint(0, width), random.randint(0, height)), fill=get_random_color())
            x = random.randint(0, width)
            y = random.randint(0, height)
            draw_obj.arc((x, y, x+4, y+4), 0, 90, fill=get_random_color())
    
        # 不需要在硬盘上保存文件,直接在内存中加载就可以
        io_obj = BytesIO()
        # 将生成的图片数据保存在io对象中
        img_obj.save(io_obj, "png")
        # 从io对象里面取上一步保存的数据
        data = io_obj.getvalue()
        return HttpResponse(data)
     2.urls.py
    from django.conf.urls import url
    from django.contrib import admin
    from app01 import views
    
    urlpatterns = [
        url(r'^admin/', admin.site.urls),
        url(r'^login/', views.login),
        url(r'^get_valid_img.png/', views.get_valid_img),
    ]
     3.login.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎登录</title>
        <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="/static/mystyle.css">
    </head>
    <body>
    
    <div class="container">
        <div class="row">
            <form class="form-horizontal col-md-6 col-md-offset-3 login-form">
                {% csrf_token %}
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="username" name="username" placeholder="用户名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-10">
                        <input type="text" name="valid_code" id="valid_code">
                        <img id="valid-img" class="valid-img" src="/get_valid_img.png?" alt="">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-default" id="login-button">登录</button>
                        <span class="login-error"></span>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="/static/jquery-3.3.1.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script>
        $("#login-button").click(function () {
            // 1. 取到用户填写的用户名和密码 -> 取input框的值
            var username = $("#username").val();
            var password = $("#password").val();
            var valid_code = $("#valid_code").val();
            // 2. 用AJAX发送到服务端
            $.ajax({
                url: "/login/",
                type: "post",
                data: {
                    "username": username,
                    "password": password,
                    "valid_code": valid_code,
                    "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val()
                },
                success: function (data) {
                    console.log(data);
                    if (data.status) {
                        // 有错误,在页面上提示
                        $(".login-error").text(data.msg);
                    } else {
                        // 登陆成功
                        location.href = data.msg;
                    }
                }
            })
        });
    
        // 当input框获取焦点时将之前的错误清空
        $("#username,#password").focus(function () {
            // 将之前的错误清空
            $(".login-error").text("");
        });
    
        // 点击验证码图片 刷新验证码
        $("#valid-img").click(function () {
            $(this)[0].src += "?";
        })
    </script>
    </body>
    </html>
    点赞 评论
  • QA_Assistant
    有问必答小助手 2021-05-28 14:04

    您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

    点赞 评论

相关推荐