Django 实现登陆验证码

时间：2022-12-21 09:36:14

一 基本使用方法

Python生成随机验证码，需要使用PIL模块

安装：

pip3 install pillow

基本使用

1 创建图片

from PIL import Image, ImageDraw, ImageFont

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))

# 在图片查看器中打开

# img.show()

# 保存在本地

with open('code.png','wb') as f:

    img.save(f,format='png')

2. 创建画笔，用于在图片上画任意内容

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))

draw = ImageDraw.Draw(img, mode='RGB')
font = ImageFont.truetype('static/font/waterlily.ttf', size=30) # 验证码字体

3. 画点

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))

draw = ImageDraw.Draw(img, mode='RGB')

# 第一个参数：表示坐标

# 第二个参数：表示颜色

draw.point([100, 100], fill="red")

draw.point([300, 300], fill=(255, 255, 255))

4. 画线

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))

draw = ImageDraw.Draw(img, mode='RGB')

# 第一个参数：表示起始坐标和结束坐标

# 第二个参数：表示颜色

draw.line((100,100,100,300), fill='red')

draw.line((100,100,300,100), fill=(255, 255, 255))

5. 画圆

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))

draw = ImageDraw.Draw(img, mode='RGB')

# 第一个参数：表示起始坐标和结束坐标（圆要画在其中间）

# 第二个参数：表示开始角度

# 第三个参数：表示结束角度

# 第四个参数：表示颜色

draw.arc((100,100,300,300),0,90,fill="red")

6. 写文本

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))

draw = ImageDraw.Draw(img, mode='RGB')

# 第一个参数：表示起始坐标

# 第二个参数：表示写入内容

# 第三个参数：表示颜色

draw.text([0,0],'python',"red")

7. 特殊字体

img = Image.new(mode='RGB', size=(120, 30), color=(255, 255, 255))

draw = ImageDraw.Draw(img, mode='RGB')

# 第一个参数：表示字体文件路径

# 第二个参数：表示字体大小

font = ImageFont.truetype("kumo.ttf", 28)

# 第一个参数：表示起始坐标

# 第二个参数：表示写入内容

# 第三个参数：表示颜色

# 第四个参数：表示颜色

draw.text([0, 0], 'python', "red", font=font)

二 生成图片验证码示例

1 生成图片验证码

import random

from PIL import Image, ImageDraw, ImageFont

class CheckCode:

    '''

    生成图片验证码

    '''

    def generation_code(self):

        '''

        生成随机字符

        :return:

        '''

        valid_code = ''

        for i in range(4):

            string_low = chr(random.randint(97, 122))

            string_upper = chr(random.randint(65, 90))

            num = str(random.randint(0,9))

            code = random.choice([string_low, string_upper, num])

            valid_code += code

        return valid_code

    def get_random_color(self):

        '''

        生成随机颜色

        :return:

        '''

        return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)

    def generation_img(self):

        '''

        生成图片

        :return:

        '''

        img = Image.new("RGB", (200, 40), color=self.get_random_color())

        draw = ImageDraw.Draw(img)

        font = ImageFont.truetype('static/font/waterlily.ttf', size=30)

        check_code = self.generation_code()

        i = 1

        # 写入文本

        for c in check_code:

            draw.text((i*40, 4), c, self.get_random_color(), font=font )

            i = i+1

        # 设置图片宽高

        width = 200

        height = 40

        # 写干扰点

        for i in range(40):

            draw.point([random.randint(0, width), random.randint(0, height)], fill=self.get_random_color())

        # 画线干扰

        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=self.get_random_color())

        # 写干扰圆圈

        for i in range(5):

            draw.point([random.randint(0, width), random.randint(0, height)], fill=self.get_random_color())

            x = random.randint(0, width)

            y = random.randint(0, height)

            draw.arc((x, y, x + 4, y + 4), 0, 90, fill=self.get_random_color())

        return img, check_code

2 视图中使用验证码

def get_code_img(request):

    """

    获取登录图片验证码

    :param request:

    :return:

    """

    code_obj = CheckCode()

    img, valid_code = code_obj.generation_img()

    # 将验证图片写入内存中

    f = BytesIO()

    img.save(f, "png")

    request.session['valid_code'] = valid_code

    # 从内存中获取并返回给前端

    code_img = f.getvalue()

3 前端模板渲染验证码

<body>

    <div class="wrap">

        <div class="row">

            <div class="col-md-4 col-md-offset-4">

                <div class="form-group  login">

                    {% csrf_token %}

                    <p>

                        <label for="username" class="control-label has-error">用户名:</label>

                        <input class="form-control has-error" id="username" name="username">

                    </p>

                    <p>

                        <label for="pwd" class="control-label">密码:</label>

                        <input class="form-control" id="pwd" name="password">

                    </p>

                     <div class="error">

                        <span class="pull-right" style="color:red;"></span>

                    </div>

                    <div class="row" style="display: none" id="code-area">

                        <div class="col-md-3" >

                          <label for="check_code" class="control-label">验证码:</label>

                          <input class="form-control " id="check_code" name="code" style="width: auto">

                          <div class="error-valid_code" style="margin-top: 10px">

                            <span class="pull-right" style="color:red;"></span>

                          </div>

                        </div>

                       <div class="col-md-3 col-md-offset-1" style="margin-top: 20px">

                           <img id="valid_code_img" width="" height="" src="/get_code_img/">

                       </div>

                   </div>

                    <div  style="margin-top: 40px" class="col-md-offset-4" >

                        <button style="margin-left: 20px" class="btn btn-primary" id="login_submit">登录</button>

                        <button style="margin-left: 20px" class="btn btn-warning">注册</button>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

<script type="text/javascript">

    $(function () {

        bindGetValidCode()

    });

    function bindGetValidCode() {

            // 点击刷新验证码

            $("#valid_code_img").click(function(){

                   console.log($(this).attr('src'));

                   $(this)[0].src+="?"

                })

    }

</script>

三、滑动验证码应用

我们可以借助插件来做

1、打开插件，找到自己需要的验证码

2、筛选有用的路径

3、把对应的视图函数也拿过来,注意还需要一个geetest.py的文件

具体实现

首先从https://github.com/GeeTeam/gt-python-sdk/
下载geetest文件夹的geetest.py和init.py这2个文件放入自己的项目，

#滑动验证码

url(r'^pc-geetest/register', pcgetcaptcha, name='pcgetcaptcha'),

url(r'^pc-geetest/ajax_validate', pcajax_validate, name='pcajax_validate'),
# ================

from app01.geetest import GeetestLib

pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"

pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"

mobile_geetest_id = "7c25da6fe21944cfe507d2f9876775a9"

mobile_geetest_key = "f5883f4ee3bd4fa8caec67941de1b903"

# 滑动验证码

def pcgetcaptcha(request):

    user_id = 'test'

    gt = GeetestLib(pc_geetest_id, pc_geetest_key)

    status = gt.pre_process(user_id)

    request.session[gt.GT_STATUS_SESSION_KEY] = status

    request.session["user_id"] = user_id

    response_str = gt.get_response_str()

    return HttpResponse(response_str)

# 滑动验证码

def pcajax_validate(request):

    if request.method == "POST":

        # 验证的验证码

        ret = {"flag": False, "error_msg": None}

        gt = GeetestLib(pc_geetest_id, pc_geetest_key)

        challenge = request.POST.get(gt.FN_CHALLENGE, '')

        validate = request.POST.get(gt.FN_VALIDATE, '')

        seccode = request.POST.get(gt.FN_SECCODE, '')

        status = request.session[gt.GT_STATUS_SESSION_KEY]

        user_id = request.session["user_id"]

        print("status",status)

        if status:

            result = gt.success_validate(challenge, validate, seccode, user_id)

        else:

            result = gt.failback_validate(challenge, validate, seccode)

        if result:  #如果验证验证码正确，就验证用户名是否正确

            username = request.POST.get("username")

            password = request.POST.get("password")

           # 验证用户名和密码

            user = auth.authenticate(username=username, password=password)

            if user:

                # 如果验证成功就让登录

                ret["flag"] = True

                auth.login(request, user)

            else:

                ret["error_msg"] = "用户名和密码错误"

        else:

            ret["error_msg"] = "验证码错误"

        return HttpResponse(json.dumps(ret))

    else:

        return render(request, "login.html")
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width">

    <title>Title</title>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <link rel="stylesheet" href="/static/css/login.css">

    <script src="/static/jquery-3.2.1.min.js"></script>

   滑动验证码的时候导入

    <script src="http://static.geetest.com/static/tools/gt.js"></script>

    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-1=10">

            <form class="form-horizontal" id="form_data" action="/login/" method="post">

                {% csrf_token %}

                <div class="form-group">

                    <label for="username" class="col-sm-2 control-label">用户名</label>

                    <div class="col-sm-5">

                        <input type="text" class="form-control" id="username" placeholder="username" name="username">

                    </div>

                </div>

                <div class="form-group">

                    <label for="password" class="col-sm-2 control-label">密码</label>

                    <div class="col-sm-5">

                        <input type="password" class="form-control" id="password" placeholder="password" name="password">

                    </div>

                </div>

                <div class="form-group">

                    <div class="row">

                        <div class="col-md-6 col-md-offset-1">

{#                            文字部分#}

                            <label for="vialdCode" class="col-sm-2 control-label">验证码</label>

                             <div class="col-sm-5">

                                <input type="text" class="form-control vialdCode_text" id="vialdCode" placeholder="验证码" name="vialdCode">

                            </div>

{#                            图片部分#}

                             <div class="col-md-5">

                            <img class="vialdCode_img" src="/get_vaildCode_img/" alt="" width="200px" height="100px">

{#                                 <a href=""></a>     #}

                        </div>

                        </div>

                    </div>

                </div>

                <div class="form-group">

                    <div class="col-sm-offset-2 col-sm-10">

                        <div class="checkbox">

                            <label>

                                <input type="checkbox"> 下次自动登录

                            </label>

                        </div>

                    </div>

                </div>

                <div class="form-group">

                    <div class="col-sm-offset-2 col-sm-10">

                        <p>

                            <button type="button" class="btn btn-success login" id="submit">登录</button>

                            <span class="error has-error"></span></p>

                        <p>

                            <button type="button" class="btn btn-primary register">注册</button>

                        </p>

                    </div>

                    <div id="popup-captcha"></div>

                </div>

            </form>

        </div>

    </div>

</div>

{#滑动验证码#}

<script>

    var handlerPopup = function (captchaObj) {

        $("#submit").click(function () {

            captchaObj.show();

        });

        //定时函数

         $(".login").click(function () {

             function foo() {

                 $(".error").html("")

             }

             // 成功的回调

             captchaObj.onSuccess(function () {

                 var validate = captchaObj.getValidate();

                 $.ajax({

                     url: "/pc-geetest/ajax_validate", // 进行二次验证

                     type: "post",

                     dataType: "json",

                     headers: {"X-CSRFToken": $.cookie('csrftoken')},

                     data: {

                         username: $('#username').val(),

                         password: $('#password').val(),

                         geetest_challenge: validate.geetest_challenge,

                         geetest_validate: validate.geetest_validate,

                         geetest_seccode: validate.geetest_seccode

                     },

                     success: function (data) {

                         console.log(data);

                         if (data["flag"]) {

{#                             alert(location.search);#}

{#                             alert(location.search.slice(6));#}

{#                             方式一#}

{#                             if (location.search.slice(6)) {#}

                                 {#                            如果用户没有登录点赞的时候，当用户后来又登录了，就直接让跳转到当前点赞的那个路径#}

{#                                 location.href = location.search.slice(6)#}

{#                             }#}

{#                             else {#}

{#                                 window.location.href = '/index/'#}

{#                             }#}

{#                             方式二：#}

                             alert($.cookie("next_path"));

                             if ($.cookie("next_path")){

                                 location.href = $.cookie("next_path")

                             }

                             else{

                                 location.href = "/index/"

                             }

                         }

                         else {

                             $(".error").html(data["error_msg"]);

                             setTimeout(foo, 3000)

                         }

                     }

                 });

             });

         });

             // 将验证码加到id为captcha的元素里

             captchaObj.appendTo("#popup-captcha");

             // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html

         };

    // 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）

    $.ajax({

        url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存

        type: "get",

        dataType: "json",

        success: function (data) {

            // 使用initGeetest接口

            // 参数1：配置参数

            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件

            initGeetest({

                gt: data.gt,

                challenge: data.challenge,

                product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效

                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注

                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config

            }, handlerPopup);

        }

    });

</script>

相关文章