自定义图片验证码

Posted anle123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义图片验证码相关的知识，希望对你有一定的参考价值。

首先我们需要用到一下库

1
2
3
4
5
6
7
8
 
#绘画库
from PIL import ImageDraw
#图片库
from PIL import Image
#随机库
import random
#文件流
import io

后台代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
# 自定义图片验证码
class MyCode(View):

    # 定义rgb随机颜色
    def get_random_color(self):

        R = random.randrange(255)

        G = random.randrange(255)

        B = random.randrange(255)

        return (R,G,B)
    # 定义图片视图
    def get(self,reuqest):

        # 画布
        img_size = (120,50)

        # 定义图片对象
        image = Image.new(‘RGB‘,img_size,‘white‘)

        # 定义画笔
        draw = ImageDraw.Draw(image,‘RGB‘)

        # 随机字母
        source = ‘1256453534&32qwertyyuiycvbnbdsf‘

        # 接收容器
        code_str = ""

        # 进入循环绘制
        for i in range(4):

            # 获取字母颜色
            text_color = self.get_random_color()

            # 获取随机下标
            tmp_num = random.randrange(len(source))

            # 随机字符串
            random_str = source[tmp_num]

            # 装入容器中
            code_str += random_str

            # 绘制字符串
            draw.text((10+30*i,20),random_str,text_color)

        # 获取缓存区
        buf = io.BytesIO()

        # 临时图图片保存在缓冲
        image.save(buf,‘png‘)

        return HttpResponse(buf.getvalue(),‘image/png‘)

简单的验证码绘制完成

在前端的操作

1
2
3
4
5
6
7
 
1.首先我们需要的input文本

    <td>
        验证码：<input type="text" v-model="code">
    </td>

    注：我们需要双向绑定一个code 这个code作为验证码的信息传给后端

获取后台的验证码的地址

1
 
path(‘code/‘,MyCode.as_view()) #这是我们设定路由为code 运行django项目 进入这个路由 导航栏的地址 ctrl+c

之后前端验证码进行展示

1
2
3
4
5
6
7
8
9
10
11
 
首先我们需要个img标签来展示验证码    

    <img :src="src" alt="点击刷新" @click="changecode" class="imagecode">

    注：用v-bind绑定,src代表地址，此时我们从后端复制的地址，则定义变量进行存储

    return{
        code:‘‘, # 验证码,
        src:‘http://127.0.0.1:8000/code/‘, # 图片地址
    }
    就是这个样子

我们点击验证码的时候需要刷新 点一下刷新一下

1
2
3
4
5
6
7
8
9
 
   1.看见@click这个点击事件，所以我们在下面定义一个叫changecode的方法 用于点击刷新
       
       # 点击刷新
       changecode:function(){
           # 生成随机数
           var num = Math.ceil(Math.random()*100)
           # 进行传参	
           this.src = this.src + ‘?num =‘+num   # 路由拼接
}

存储redis

1
2
3
4
5
6
7
8
9
10
11
 
import redis
# 连接redis
host = "localhost" # 本地端口
port = 6379 # redis端口号
r = redis.Redis(host=host,port=port) #连接  
# 保存随机码
r.set(‘code‘,code_str)
# 读取则用 
r.get(‘code‘)

ok廖！！

之后登陆就简单了

1
2
3
4
5
6
7
8
9
10
11
 
code = request.GET.get(‘code‘,None)
# 比对验证码
redis_code = r.get(‘code‘)
# 转码
redis_code = redis_code.decode(‘utf-8‘)
# if贩判断
if code != redis_code:
    return Response({‘code‘:403,‘msg‘:"您输入的验证码有误"})

注：在这里有一个坑需要suo一下 我们必须进行转码操作，这样才能进行判断。
    如果不进行转码，则无法比较，因为不转码 redis_code的值将会是二进制，所以decode一下。

以上是关于自定义图片验证码的主要内容，如果未能解决你的问题，请参考以下文章

spring securtty学习 图片验证码认证

PHP编写的图片验证码类文件分享方法

SSM+Shiro系统登录验证码的实现

Yii2.0自定义验证码

iOS开发-随机图片验证码

自定义控件（倒计时篇）