图片验证码
1. 分析
前端发送图片uuid，后端生成图片，返回前端
2. 请求方式
request： GET
3. 接口URL路径定义
url： /captcha_codes/<uuid:captcha_uuid>/
4. 前端传递参数方式及数据格式
传递参数方式：url 路径参数传参
| 参数 | 类型 | 前端是否必须传 | 描述 |
|---|---|---|---|
| captcha_uuid | uuid字符串 | 是 | 图片验证码编号 |
uuid：Universally unique identifier(eg. 123e4567-e89b-12d3-a456-426655440000)
5.代码实现
- 后端代码
- 配置 verifications app
- 生成 manage.py@Dreamblog > startapp verifications
manage.py@Dreamblog > startapp verifications- 注册
INSTALLED_APPS = [ # ... 'verifications', ]- 导入路径
urlpatterns = [ # ... path('verifications/', include('verifications.urls')), ] - 将 图像验证码的模块文件夹（captcha文件夹）复制粘贴到项目根目录utils文件夹下
- 安装图片验证码所需要的 Pillow 模块 pip install Pillow
- 确保settings.py文件中有配置redis CACHE
Redis原生指令参考 http://redisdoc.com/index.html
Redis python客户端 方法参考 http://redis-py.readthedocs.io/en/latest/#indices-and-tables
# 配置redis缓存 # 在settings.py文件中指定redis配置 CACHES = { # 默认redis数据库 -- default "default": { "BACKEND": "django_redis.cache.RedisCache", # 引擎 "LOCATION": "redis://127.0.0.1:6379/0", # 0 代表第一个数据库，端口默认6379 "OPTIONS": { "CLIENT_CLASS": "django_redis.client.DefaultClient", } }, # 指定redis数据库 -- "verify_codes" # 保存图片以及短信验证码 "verify_codes": { "BACKEND": "django_redis.cache.RedisCache", "LOCATION": "redis://127.0.0.1:6379/1", # 1 代表第一个数据库， "OPTIONS": { "CLIENT_CLASS": "django_redis.client.DefaultClient", } }, }- 代码实现
- 配置 verifications app
# views.py
import logging
from django.views import View
from django.http import HttpResponse
from django_redis import get_redis_connection
from . import constants
from utils.captcha.captcha import captcha
logger =logging.getLogger('django')
# 图片验证码视图
class CaptchaView(View):
"""
1.创建一个类视图： CaptchaView
2.明确请求方式： GET
3.url路径定义： /captcha_codes/<uuid:captcha_uuid>/
4.前端传参方式及参数：
-- 传参方式： url路径传参，
-- 参数： captcha_uuid
5.获取前端参数：
-- get(self, request, captcha_uuid)
6.业务处理：
-- 1.是否需要校验以及校验方式 不需要，url路径传参已校验
-- 2.是否需要储存以及储存方式 需要，redis储存
-- 3.其他 利用uuid生成图片验证码
7.返回前端参数：
-- return HttpResponse(content=captcha_content, content_type='image/jpg')
"""
def get(self, request, captcha_uuid):
"""
:param request:
:param captcha_uuid:
:return:
"""
# 利用接口，生成图片验证码文本以及二进制文件
captcha_text, captcha_content = captcha.generate_captcha()
# redis 保存数据三部曲
# 1. 连接redis
conn_redis = get_redis_connection(alias="verify_codes")
# 2. 建立key值 -- key值设为二进制
captcha_key = 'captcha_{}'.format(captcha_uuid).encode('utf-8')
# 3. 保存数据，并设置有效期
conn_redis.setex(captcha_key, constants.CAPTCHA_CODE_REDIS_EXPIRES, captcha_text)
# 日志器记录，后台显示
logger.info('图片验证码为：{}'.format(captcha_text))
# 返回前端参数，验证码二进制文件
# type='image/jpg'默认打开, type='images/jpg'默认下载
return HttpResponse(content=captcha_content, content_type='image/jpg')
# constants.py
# 图片验证码redis有效期，单位秒
CAPTCHA_CODE_REDIS_EXPIRES = 5 * 60
# urls.py
from django.urls import path
from . import views
app_name = 'verifications'
urlpatterns = [
path('captcha_codes/<uuid:captcha_uuid>/', views.CaptchaView.as_view(), name='captcha_code'),
]
-
postman测试
image.png
-
redis数据库查看数据
127.0.0.1:6379[1]> keys *
(empty list or set)
127.0.0.1:6379[1]> keys *
1) "captcha_123e4567-e89b-12d3-a456-426655440000"
127.0.0.1:6379[1]> ttl "captcha_123e4567-e89b-12d3-a456-426655440000"
(integer) 183
127.0.0.1:6379[1]>
6.前端代码
register.html代码
<a href="javascript:void(0);" class="captcha-graph-img">
<img src="" alt="" title="点击刷新" class="captcha_image">
</a>
{% block script %}
<script src="{% static 'js/users/register.js' %}"></script>
{% endblock %}
在js文件夹下创建一个users文件夹用户存放用户模块相关的js文件，在users文件下创建users.js文件
// -----------------register.js--------------------- //
$(function () {
// -----------------图像验证码逻辑代码--------------------- //
let $captcha = $('.captcha_image'); // 获取图像标签
let s_UUID = ''; // 定义图像验证码ID值
let s_captcha_url= ''; // 定义获取图像验证码 url
// 生成图像验证码图片
generateImageCode();
// 点击图片验证码生成新的图片验证码图片
$captcha.click(generateImageCode);
// 生成请求验证码 url
function generateImageCode() {
// 1、生成一个图片验证码随机编号
s_UUID = generateUUID();
// 2、拼接请求url verifications/captcha_codes/<uuid:captcha_uuid>/
s_captcha_url = '/verifications/captcha_codes/' + s_UUID + '/';
// 3、修改验证码图片src地址(此时后端传入图片二进制，显示)
$captcha.attr('src',s_captcha_url)
}
// 生成图片UUID验证码
function generateUUID() {
let d = new Date().getTime();
if (window.performance && typeof window.performance.now === "function") {
d += performance.now(); //use high-precision timer if available
}
let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
let r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
}
});
展示
image_1.png
image_2.png
127.0.0.1:6379[1]> keys *
1) "captcha_9cdb9550-b409-4dc9-aa35-52b865f19108"
2) "captcha_fcb8934b-8086-48f2-a712-de1b9b1ab516"
3) "captcha_034ea509-5423-4d9d-a074-e996366af401"
4) "captcha_09aef28e-22ef-4587-b37a-77acb4376a57"
5) "captcha_85b481da-f926-4182-b474-7c2324be351f"
6) "captcha_d58f4beb-a9a3-4e8b-8c4f-979c7a96acea"
7) "captcha_abf202b8-63f8-4e68-b3af-5f234c2c7342"
网友评论