zoukankan      html  css  js  c++  java
  • 4 Template层-验证码

    1.验证码

    • 在用户注册、登录页面,为了防止暴力请求,可以加入验证码功能,如果验证码错误,则不需要继续处理,可以减轻一些服务器的压力
    • 使用验证码也是一种有效的防止crsf的方法
    • 验证码效果如下图:

     官网文档:http://pillow.readthedocs.io/en/latest/

    (h4) python@ubuntu:~/Desktop/projects/test4$ pip install pillow

    验证码视图

    • 新建viewsUtil.py,定义函数verifycode
    • 此段代码用到了PIL中的Image、ImageDraw、ImageFont模块,需要先安装Pillow(3.4.1)包,详细文档参考http://pillow.readthedocs.io/en/3.4.x/
    • Image表示画布对象
    • ImageDraw表示画笔对象
    • ImageFont表示字体对象,ubuntu的字体路径为“/usr/share/fonts/truetype/freefont”

     

     

     

    2.代码如下:

    from django.http import HttpResponse
    def verifycode(request):
        #引入绘图模块
        from PIL import Image, ImageDraw, ImageFont
        #引入随机函数模块
        import random
        #定义变量,用于画面的背景色、宽、高
        bgcolor = (random.randrange(20, 100), random.randrange(
            20, 100), 255)
        width = 100
        height = 25
        #创建画面对象
        im = Image.new('RGB', (width, height), bgcolor)
        #创建画笔对象
        draw = ImageDraw.Draw(im)
        #调用画笔的point()函数绘制噪点
        for i in range(0, 100):
            xy = (random.randrange(0, width), random.randrange(0, height))
            fill = (random.randrange(0, 255), 255, random.randrange(0, 255))
            draw.point(xy, fill=fill)
        #定义验证码的备选值
        str1 = 'ABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0'
        #随机选取4个值作为验证码
        rand_str = ''
        for i in range(0, 4):
            rand_str += str1[random.randrange(0, len(str1))]
        #构造字体对象
        font = ImageFont.truetype('FreeMono.ttf', 23)
        #构造字体颜色
        fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
        #绘制4个字
        draw.text((5, 2), rand_str[0], font=font, fill=fontcolor)
        draw.text((25, 2), rand_str[1], font=font, fill=fontcolor)
        draw.text((50, 2), rand_str[2], font=font, fill=fontcolor)
        draw.text((75, 2), rand_str[3], font=font, fill=fontcolor)
        #释放画笔
        del draw
        #存入session,用于做进一步验证
        request.session['verifycode'] = rand_str
        #内存文件操作
        import cStringIO
        buf = cStringIO.StringIO()
        #将图片保存在内存中,文件类型为png
        im.save(buf, 'png')
        #将内存中的图片数据返回给客户端,MIME类型为图片png
        return HttpResponse(buf.getvalue(), 'image/png')

     

    配置url

    • 在urls.py中定义请求验证码视图的url
    from . import viewsUtil
    
    urlpatterns = [
        url(r'^verifycode/$', viewsUtil.verifycode),
    ]

    显示验证码

    • 在模板中使用img标签,src指向验证码视图
    <img id='verifycode' src="/verifycode/" alt="CheckCode"/>
    • 启动服务器,查看显示成功
    • 扩展:点击“看不清,换一个”时,可以换一个新的验证码
    <script type="text/javascript" src="/static/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#verifycodeChange').css('cursor','pointer').click(function() {
                $('#verifycode').attr('src',$('#verifycode').attr('src')+1)
            });
        });
    </script>
    <img id='verifycode' src="/verifycode/?1" alt="CheckCode"/>
    <span id='verifycodeChange'>看不清,换一个</span>
    • 为了能够实现提交功能,需要增加form和input标签
    <form method='post' action='/verifycodeValid/'>
        <input type="text" name="vc">
        <img id='verifycode' src="/verifycode/?1" alt="CheckCode"/>
    <span id='verifycodeChange'>看不清,换一个</span>
    <br>
    <input type="submit" value="提交">
    </form>

    验证

    • 接收请求的信息,与session中的内容对比
    from django.http import HttpResponse
    
    def verifycodeValid(request):
        vc = request.POST['vc']
        if vc.upper() == request.session['verifycode']:
            return HttpResponse('ok')
        else:
            return HttpResponse('no')
    • 配置验证处理的url
    urlpatterns = [
        url(r'^verifycodeValid/$', views.verifycodeValid),
    ]

    第三方

    • 可以在网上搜索“验证码”,找到一些第三方验证码提供网站,阅读文档,使用到项目中

    3.实现

     

  • 相关阅读:
    欧拉回路 定理
    UESTC 1087 【二分查找】
    POJ 3159 【朴素的差分约束】
    ZOJ 1232 【灵活运用FLOYD】 【图DP】
    POJ 3013 【需要一点点思维...】【乘法分配率】
    POJ 2502 【思维是朴素的最短路 卡输入和建图】
    POJ 2240 【这题貌似可以直接FLOYD 屌丝用SPFA通过枚举找正权值环 顺便学了下map】
    POJ 1860【求解是否存在权值为正的环 屌丝做的第一道权值需要计算的题 想喊一声SPFA万岁】
    POJ 1797 【一种叫做最大生成树的很有趣的贪心】【也可以用dij的变形思想~】
    js 实现slider封装
  • 原文地址:https://www.cnblogs.com/venicid/p/8301999.html
Copyright © 2011-2022 走看看