图形验证码---pillow

图片验证码逻辑

1. 客户端发起GET连接请求，并随机生成UUID，绑定图片
   • UUID：通用唯一识别码（Universally Unique Identifier），目的，是让分布式系统中的所有元素，都能有唯一的辨识信息，每个人都可以创建不与其它人冲突的UUID
2. 服务端生成图片验证码，图片存入内存并返回到客户端
3. 服务端存储源字符串到session中，也可以存入缓存中，例memcached、redis
4. 客户端表单填写验证码原值
5. 移出表单框时间触发异步post请求验证，访问时，图片uuid作为属性绑定到表单属性中，作为post提交的数据一部分
6. 服务端验证时通过UUID为key，表单值为value进行图片验证码校验

图片验证码使用

　　下载pillow

pip install pillow

　　在使用的时候需要设置pillow需要的字体。需要复制到django项目中

设置字体文件的路径

 

生成图片

 

 

vue生成uuid

 

vue请求图片验证码

<template>
  <div>
      
      <p><img @click="refresh()" :src="'http://127.0.0.1:8000/user/generate_image_code/' + uuid" /></p>
      <p>验证码<input type="text" v-model="code"></p>
      
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:"regist",
  data() {
    return {
      code:'',
      uuid:'',
    }
  },
  methods: {
    generate_uuid: function() {
      var d = new Date().getTime();
      if (window.performance && typeof window.performance.now === "function") {
        d += performance.now(); //use high-precision timer if available
      }
      var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function(c) {
          var r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
        }
      );
      return uuid;
    },
    refresh(){
      this.uuid = this.generate_uuid()
    }
  },
  mounted() {
    this.uuid = this.generate_uuid()
  },
}
</script>

带图片验证码的用户注册