图形验证码---pillow
图片验证码逻辑
- 客户端发起GET连接请求，并随机生成UUID，绑定图片
UUID：通用唯一识别码（Universally Unique Identifier），目的，是让分布式系统中的所有元素，都能有唯一的辨识信息，每个人都可以创建不与其它人冲突的UUID
- 服务端生成图片验证码，图片存入内存并返回到客户端
- 服务端存储源字符串到
session中，也可以存入缓存中，例memcached、redis - 客户端表单填写验证码原值
- 移出表单框时间触发异步
post请求验证，访问时，图片uuid作为属性绑定到表单属性中，作为post提交的数据一部分 - 服务端验证时通过
UUID为key，表单值为value进行图片验证码校验
图片验证码使用
下载pillow
pip install pillow
在使用的时候需要设置pillow需要的字体。需要复制到django项目中
设置字体文件的路径
FONTS_DIRS = os.path.join(BASE_DIR, 'fonts',) #找到字体文件的路径
setting.py
生成图片
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path("generate_image_code/<str:generate_image_id>/",views.generate_image_code), ]
urls.py
from PIL import Image, ImageDraw, ImageFont
from shiyanloupro.settings import *
from django.http.response import HttpResponse def generate_image_code(request, generate_image_id):
'''
本地图片验证码生成函数
'''
bgcolor = (random.randrange(20, 100), random.randrange(
20, 100), random.randrange(20, 100))
width = 110
height = 40
# 创建画面对象
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)
# 定义验证码的备选值
str = '1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm'
# 随机选取4个值作为验证码
rand_str = ''
for i in range(0, 4):
rand_str += str[random.randrange(0, len(str))]
# 构造字体对象 fonts_files = os.path.join(
FONTS_DIRS, 'SourceCodePro-Bold.ttf')
font = ImageFont.truetype(fonts_files, 30)
# 构造字体颜色
fontcolor1 = (255, random.randrange(0, 255), random.randrange(0, 255))
fontcolor2 = (255, random.randrange(0, 255), random.randrange(0, 255))
fontcolor3 = (255, random.randrange(0, 255), random.randrange(0, 255))
fontcolor4 = (255, random.randrange(0, 255), random.randrange(0, 255))
# 绘制4个字
draw.text((5, 2), rand_str[0], font=font, fill=fontcolor1)
draw.text((25, 2), rand_str[1], font=font, fill=fontcolor2)
draw.text((50, 2), rand_str[2], font=font, fill=fontcolor3)
draw.text((75, 2), rand_str[3], font=font, fill=fontcolor4)
# 释放画笔
del draw
# 存入缓存，用于做进一步验证，并设置超时时间为10分组
cache.set(generate_image_id,rand_str,60*10)
buf = io.BytesIO()
# 将图片保存在内存中，文件类型为png
im.save(buf, 'png')
# 将内存中的图片数据返回给客户端，MIME类型为图片png！
return HttpResponse(buf.getvalue(), 'image/png')
views.py
vue生成uuid
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;
},
regist.vue
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>
带图片验证码的用户注册
<template>
<div>
<p>用户名：<input type="text" v-model="name"></p>
<p>密码：<input type="password" v-model="pwd"></p>
<p>手机号：<input type="text" v-model="phone"></p>
<p>邮箱：<input type="email" v-model="email"></p>
<p><img @click="refresh()" :src="'http://127.0.0.1:8000/user/generate_image_code/' + uuid" /></p>
<p>验证码<input type="text" v-model="code" @blur="check"></p>
<p><button @click="regist_user()">注册</button></p> </div>
</template> <script>
import axios from 'axios'
export default {
name:"regist",
data() {
return {
code:'',
name:'',
pwd:'',
phone:'',
email:'',
uuid:'',
is_ok:false }
},
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()
},
check(){
let post_data = new FormData()
post_data.append('generate_image_id',this.uuid)
post_data.append('user_code',this.code)
axios({
url: 'http://127.0.0.1:8000/user/check/',
method: 'post',
data: post_data,
}).then(res=>{
console.log(res.data)
if (res.data.code==200){
this.is_ok=true
}else{
this.is_ok=false
}
}) },
regist_user(){
if(this.is_ok==true){
var form_data = new FormData()
form_data.append("username",this.name)
form_data.append("password",this.pwd)
form_data.append("phone",this.phone)
form_data.append("email",this.email)
axios({
url: 'http://127.0.0.1:8000/user/users/',
method: 'post',
data: form_data,
}).then(res=>{
console.log(res.data)
sessionStorage.setItem("jwt_token",res.data.token)
alert("注册成功") })
}else{
alert("注册前请输入正确的用户码")
} }
},
mounted() {
this.uuid = this.generate_uuid()
},
}
</script>
regist.vue
"""
Django settings for shiyanloupro project. Generated by 'django-admin startproject' using Django 2.2.7. For more information on this file, see
https://docs.djangoproject.com/en/2.2/topics/settings/ For the full list of settings and their values, see
https://docs.djangoproject.com/en/2.2/ref/settings/
""" import os # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) # Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/ # SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'f84z(fu2k-n^*38fn+o5xbx0wyxq*hrk-rs7__75p0ux$x8s2*' # SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True ALLOWED_HOSTS = [] # Application definition INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders',
'rest_framework.authtoken',
'userapp'
] MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
] ROOT_URLCONF = 'shiyanloupro.urls' TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')]
,
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
] WSGI_APPLICATION = 'shiyanloupro.wsgi.application' # Database
# https://docs.djangoproject.com/en/2.2/ref/settings/#databases DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'HOST': '127.0.0.1', # 数据库主机
'PORT': 3306, # 数据库端口
'USER': 'root', # 数据库用户名
'PASSWORD': 'root', # 数据库用户密码
'NAME': 'shiyanlou' # 数据库名字
}
} # Password validation
# https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
] # Internationalization
# https://docs.djangoproject.com/en/2.2/topics/i18n/ LANGUAGE_CODE = 'en-us' TIME_ZONE = 'UTC' USE_I18N = True USE_L10N = True USE_TZ = True # Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/ STATIC_URL = '/static/' CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = ()
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
) CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
) FONTS_DIRS = os.path.join(BASE_DIR, 'fonts',)
CACHES = {
"default": {
"BACKEND": "django_redis.cache.RedisCache",
"LOCATION": "redis://127.0.0.1:6379/1",
"OPTIONS": {
"CLIENT_CLASS": "django_redis.client.DefaultClient",
},
}
}
AUTH_USER_MODEL='userapp.User'
REST_FRAMEWORK = {
# 身份认证
'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
'rest_framework.authentication.SessionAuthentication',
'rest_framework.authentication.BasicAuthentication',
), #全局配置接口权限
# 'DEFAULT_PERMISSION_CLASSES': (
# 'rest_framework.permissions.IsAuthenticated',
# ), } import datetime JWT_AUTH = {
'JWT_AUTH_HEADER_PREFIX': 'JWT',
'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),
'JWT_RESPONSE_PAYLOAD_HANDLER':
'users.views.jwt_response_payload_handler', # 重新login登录返回函数
}
setting.py
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path("generate_image_code/<str:generate_image_id>/",views.generate_image_code),
path("check/",views.CheckCode.as_view()),
path("users/",views.UserView.as_view()), ]
user/urls.py
from rest_framework_jwt.settings import api_settings
from rest_framework import serializers
from userapp.models import User class UserSerializer(serializers.Serializer):
id =serializers.IntegerField(read_only=True)
username = serializers.CharField()
password = serializers.CharField()
phone = serializers.CharField()
email = serializers.CharField()
token = serializers.CharField(read_only=True) def create(self, data):
user = User.objects.create(**data)
#数据库里密码的加密（固定的步骤）
user.set_password(data.get('password'))
user.save() # 补充生成记录登录状态的token 固定的格式，用过来生成jwt的token
jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER
jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER
payload = jwt_payload_handler(user)
token = jwt_encode_handler(payload) #把token发放在user里返回
user.token = token
return user
user/serializers.py
from django.db import models
from django.contrib.auth.models import AbstractUser
# Create your models here. class User(AbstractUser):
username = models.CharField(max_length=64, unique=True)
password = models.CharField(max_length=255)
phone = models.CharField(max_length=64)
email = models.CharField(max_length=64)
user/model.py
from django.http.response import HttpResponse
from PIL import Image, ImageDraw, ImageFont
from shiyanloupro.settings import *
from django.core.cache import cache
from rest_framework.views import APIView
from rest_framework.response import Response
from .serializers import UserSerializer
import random,os,io def generate_image_code(request, generate_image_id):
'''
本地图片验证码生成函数
'''
bgcolor = (random.randrange(20, 100), random.randrange(
20, 100), random.randrange(20, 100))
width = 110
height = 40
# 创建画面对象
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)
# 定义验证码的备选值
str = '1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm'
# 随机选取4个值作为验证码
rand_str = ''
for i in range(0, 4):
rand_str += str[random.randrange(0, len(str))]
# 构造字体对象 fonts_files = os.path.join(
FONTS_DIRS, 'SourceCodePro-Bold.ttf')
font = ImageFont.truetype(fonts_files, 30)
# 构造字体颜色
fontcolor1 = (255, random.randrange(0, 255), random.randrange(0, 255))
fontcolor2 = (255, random.randrange(0, 255), random.randrange(0, 255))
fontcolor3 = (255, random.randrange(0, 255), random.randrange(0, 255))
fontcolor4 = (255, random.randrange(0, 255), random.randrange(0, 255))
# 绘制4个字
draw.text((5, 2), rand_str[0], font=font, fill=fontcolor1)
draw.text((25, 2), rand_str[1], font=font, fill=fontcolor2)
draw.text((50, 2), rand_str[2], font=font, fill=fontcolor3)
draw.text((75, 2), rand_str[3], font=font, fill=fontcolor4)
# 释放画笔
del draw
# 存入缓存，用于做进一步验证，并设置超时时间为10分组
cache.set(generate_image_id,rand_str,60*10)
buf = io.BytesIO()
# 将图片保存在内存中，文件类型为png
im.save(buf, 'png')
# 将内存中的图片数据返回给客户端，MIME类型为图片png！
return HttpResponse(buf.getvalue(), 'image/png') class CheckCode(APIView):
def post(self,request):
generate_image_id = request.data.get('generate_image_id',"")
data_code = cache.get(generate_image_id)
user_code = request.data.get('user_code',"")
if data_code and user_code:
print(data_code,user_code)
if data_code.lower() == user_code.lower():
return Response({'code':200})
return Response({'code':201}) class UserView(APIView):
def post(self,request):
serializer = UserSerializer(data=request.data)
if serializer.is_valid():
serializer.save()
return Response(serializer.data, status=200)
return Response(serializer.errors, status=200)
user/views.py
图形验证码---pillow的更多相关文章
- 图形验证码 tesserocr pillow
利用tesserocr和pil生成图形验证码 import tesserocr from PIL import Image image = Image.open('222.jpg') image = ...
- Tornado框架实现图形验证码功能
图形验证码是项目开发过程中经常遇到的一个功能,在很多语言中都有对应的不同形式的图形验证码功能的封装,python 中同样也有类似的封装操作,通过绘制生成一个指定的图形数据,让前端HTML页面通过链接获 ...
- 一百一十四：CMS系统之图形验证码生成
安装Pillow库,用于生成图形验证码:pip install Pillow 字体文件来源 生成一个验证码图片 import randomimport stringfrom PIL import Im ...
- 爬虫(十二)：图形验证码的识别、滑动验证码的识别（B站滑动验证码）
1. 验证码识别 随着爬虫的发展,越来越多的网站开始采用各种各样的措施来反爬虫,其中一个措施便是使用验证码.随着技术的发展,验证码也越来越花里胡哨的了.最开始就是几个数字随机组成的图像验证码,后来加入 ...
- mac使用python识别图形验证码
前言 最近在研究验证码相关的操作,所以准备记录下安装以及使用的过程.虽然之前对验证码的破解有所了解的,但是之前都是简单使用之后就不用了,没有记录一个详细的过程,所以后面再用起来也要重新从网上查找资料比 ...
- 【无私分享：ASP.NET CORE 项目实战（第十四章）】图形验证码的实现
目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 很长时间没有来更新博客了,一是,最近有些忙,二是,Core也是一直在摸索中,其实已经完成了一个框架了,并且正在准备在生产环境中 ...
- C#生成图形验证码
先看效果: 再上代码 public class CaptchaHelper { private static Random rand = new Random(); private static in ...
- php 图形验证码的3种方法
生成图形验证码需要使用php GD库来生成,如果你没开户GD库我们需要在php.ini文件找到extension=php_gd2.dll 去掉前面的;就行了,然后重启apache 或iis环境即可 检 ...
- PHP5 GD库生成图形验证码(汉字)
PHP5 GD库生成图形验证码且带有汉字的实例分享. 1,利用GD库函数生成图片,并在图片上写指定字符imagecreatetruecolor 新建一个真彩色图像imagecolorallocate ...
随机推荐
- C语言经典100例-ex001
系列文章<C语言经典100例>持续创作中,欢迎大家的关注和支持. 喜欢的同学记得点赞.转发.收藏哦- 后续C语言经典100例将会以pdf和代码的形式发放到公众号 欢迎关注:计算广告生态 即 ...
- Centos中部署NetCore项目（二）
前言 在centos中部署程序,一般都不会是使用控制台进程直接启动,或者是后台运行.而是一些守护进程管理工具进行管理,例如supervisor. 部署Web相关程序,使用nginx是比较普遍的, 安装 ...
- 记EF的一个基本访问类
代码: 1 using EFModel; 2 using System; 3 using System.Collections.Generic; 4 using System.Data.Entity; ...
- 前端未来趋势之原生API：Web Components
声明:未经允许,不得转载. Web Components 现世很久了,所以你可能听说过,甚至学习过,非常了解了.但是没关系,可以再重温一下,温故知新. 浏览器原生能力越来越强. js 曾经的 JQue ...
- Blazor 准备好为企业服务了吗？
如果您正在编写 .NET Web 应用程序,您很可能已经意识最近一年在.NET Web开发领域的热点都是 Blazor 的.如果你还没有了解Blazor,它允许您使用 C# 来编写 Web UIs,传 ...
- 什么是4G模块 4G模块的工作原理及特点
什么是4G模块 4G模块,也被叫做4G通信模块或4G DTU模块,他是物联网行业具有4G通信功能的一种产品,通过4G模块,我们可以实现工业设备数据通过无线4G网络传输到远端控制中心,并从控制中心通过4 ...
- 对Spark硬件配置的建议
对于Spark开发人员来说,一个比较普遍的问题就是如何合理的配置Spark的硬件?当然如何合理的对Spark集群进行硬件配置要视情况而定,在这里给出以下建议: 存储系统 在大数据领域,有一句" ...
- Python之Matplot——01.堆叠柱状图的绘制
1.Matplotlib是python的一个绘图库,可以方便的绘制各种图标,是数据可视化的利器. 2.本文我就给大家介绍一下条形图或者说柱状图的绘制 3.代码如下: <1>首先导入模块 1 ...
- Tim Urban：如何选择真正适合你的职业？
Wait But Why是一个专注于写长博客的网站,Tim Urban是网站的创始人之一.Tim Urban专注于写长论文,与时下的轻度阅读完全背道而驰,文章动辄几千甚至上万字,但令人吃惊的是却拥有惊 ...
- Mysql_笔记2018.1.28
1.Mysql代码规范 1.关键字.函数名称大写 2.数据库名称.表名称.字段名称等全部小写 3.必须以分号;结尾 (或 \g) 2.记录mysql日志 开始记录 mysql> \T 日志地址 ...