一、图形验证码

1.1 图形验证码逻辑分析

需要新建应用verifications

知识要点

将图形验证码的文字信息保存到Redis数据库，为短信验证码做准备。
UUID 用于唯一区分该图形验证码属于哪个用户，也可使用其他唯一标识信息来实现。

1.2 图形验证码接口设计和定义

1. 图形验证码接口设计

1.请求方式

选项	方案
请求方法	GET
请求地址	image_codes/(?P[\w-]+)/

2.请求参数：路径参数

参数名	类型	是否必传	说明
uuid	string	是	唯一编号

3.响应结果：image/jpg

2. 图形验证码接口定义

1.图形验证码视图

views.py

from django.shortcuts import render
from django.views import View# Create your views here.
class ImageCodeView(View):"""图形验证码"""def get(self, request, uuid):""":param request:请求对象 :param uuid: 唯一标识图形验证码所属于的用户:return: image/jpg"""pass

2.总路由

# verifications
url(r'^', include('verifications.urls')),

3.子路由

from django.conf.urls import url
from . import viewsurlpatterns = [#  图形验证码url(r'^image_codes/(?P<uuid>[\w-]+)/$', views.ImageCodeView.as_view()),
]

1.3 图形验证码后端逻辑

1. 准备captcha扩展包

提示：captcha扩展包用于后端生成图形验证码

可能出现的错误

报错原因：环境中没有Python处理图片的库：PIL

解决办法

安装Python处理图片的库：pip install Pillow

2. 准备Redis数据库

准备Redis的2号库存储验证码数据(setting.py)

"verify_code": { # 验证码"BACKEND": "django_redis.cache.RedisCache","LOCATION": "redis://127.0.0.1:6379/2","OPTIONS": {"CLIENT_CLASS": "django_redis.client.DefaultClient",}},

3. 图形验证码后端逻辑实现

from django.shortcuts import render
from django.views import View
from .lib.captcha.captcha import captcha
from django_redis import get_redis_connection
from django import http
from meiduo_mall.meiduo_mall.utils import constants# Create your views here.
class ImageCodeView(View):"""图形验证码"""def get(self, request, uuid):""":param request:请求对象:param uuid: 唯一标识图形验证码所属于的用户:return: image/jpg"""#  生成图片验证码text, image = captcha.generate_captcha()#  保存图片验证码redis_conn = get_redis_connection('verify_code')redis_conn.setex('img_%s' % uuid, constants.IMAGE_CODE_REDIS_EXPIRES, text)#  响应图片验证码return http.HttpResponse(image, constant_tpye='image/jpg')

1.4 图形验证码前端逻辑

1. Vue实现图形验证码展示

1.register.js

mounted(){// 生成图形验证码this.generate_image_code();
},
methods: {// 生成图形验证码generate_image_code(){// 生成UUID。generateUUID() : 封装在common.js文件中，需要提前引入this.uuid = generateUUID();// 拼接图形验证码请求地址this.image_code_url = "/image_codes/" + this.uuid + "/";},......
}

2.register.html

<li><label>图形验证码:</label><input type="text" name="image_code" id="pic_code" class="msg_input"><img :src="data:image_code_url" @click="generate_image_code" alt="图形验证码" class="pic_code"><span class="error_tip">请填写图形验证码</span>
</li>

3.图形验证码展示和存储效果

2. Vue实现图形验证码校验

1.register.html

<li><label>图形验证码:</label><input type="text" v-model="image_code" @blur="check_image_code" name="image_code" id="pic_code" class="msg_input"><img :src="data:image_code_url" @click="generate_image_code" alt="图形验证码" class="pic_code"><span class="error_tip" v-show="error_image_code">[[ error_image_code_message ]]</span>
</li>

2.register.js

check_image_code(){if(!this.image_code) {this.error_image_code_message = '请填写图片验证码';this.error_image_code = true;} else {this.error_image_code = false;}
},

3.图形验证码校验效果

美多商城之验证码(图形验证码)相关推荐

美多商城之短信验证码
美多商城之短信验证码 1.短信验证码逻辑分析 2.容联云通讯短信平台 3.短信验证码后端逻辑 4.短信验证码前端逻辑 5.补充注册时短信验证逻辑 6.避免频繁发送短信验证码 7.pipeline操作R ...
Java 图片验证码/图形验证码亲测
Java 图片验证码/图形验证码 1. Maven包 pom.xml 2. 图片验证码工具类 3. 生成验证码,图片验证码和验证接口 4. 验证页面 index.html 1. Maven包 po ...
【5分钟教你】3种实现验证码功能-数字短信验证码-图形验证码-滑动验证码
摘要:我们在做一些后台系统的登录验证的时候.难免会用到验证码功能,来辅助进行验证,提高安全性,在我们日常生活中,验证方式无处不在,最多的是短信验证码的方式,通过点击发送验证码,然后手机接收短信,填写验 ...
Python项目实战 3.1：验证码.图形验证码
目录一.逻辑分析二.接口设计和定义三.后端逻辑四.前端逻辑一.逻辑分析要点将图形验证码的文字信息保存到Redis数据库,为短信验证码做准备. UUID 用于唯一区分该图形验证码属于哪个 ...
web前端入门到实战：实现图形验证码
什么是图形验证码图形验证码是验证码的一种.验证码(CAPTCHA)是"Completely Automated Public Turing test to tell Computers a ...
selenium之自动登录获取短信验证码或者图形验证码的方法
对于很多项目的登录界面都是需要一个验证码的,对于验证码的方式有两种,一种是纯数字,就是验证码是通过发送短信的这种,这种比较好获取,另一种是图形验证码,有些图形验证码比较简单,比如纯数字的,有些比较复杂 ...
验证码识别初探——图形验证码为主
目录一.需求二.验证码起源三.验证码分类纯文本验证码图形验证码 Gif动画验证码手机短信验证码手机语音验证码视频验证码手势验证码四.简单验证码识别流程和一些算法五.基本案例案例 ...
IDaaS 系统 ArkID 一账通内置插件：图形验证码认证因素的配置流程
图形验证码认证因素插件功能介绍图形验证码认证因素插件对用户认证凭证表单进行扩充,插入图形验证码并实现相关验证功能,是 IDaaS 一账通 ArkID 系统内置功能插件之一. 注意:图形验证码认证因素 ...
Python非暴力飘过——图形验证码
嗨害大家好鸭!我是芝士❤ 先来看看,目前遇到的验证码种类有哪些? 1)图形验证码图形验证码应该是最简单的一种验证码,这种验证码是最早出现,也是目前最常见的,一般组成规则是4个字母或数字或混合组成; ...

美多商城之验证码(图形验证码)