一、验证码工具选择
django-simple-captcha
是一款轻量且高度可定制的 Django 验证码应用,具有以下优势
- 多样化验证码类型:支持随机字符、数学运算、字典单词等多种验证形式
- 高度可定制:可自定义验证码样式、噪声效果和过滤规则
- 良好的交互性:支持 AJAX 动态刷新,无需重新加载页面
- 音频输出支持 :提供音频输出功能,提升可访问性
二、验证码工作流程
一个完整的验证码验证流程如下:
- 用户访问页面时,前端请求生成验证码
- 后端生成验证码图片和对应的验证 key,返回给前端
- 用户输入验证码并提交表单,前端将用户输入与验证 key 一同发送到后端
- 后端进行二次校验,验证用户输入的正确性
- 返回校验结果给前端,完成整个验证流程
三、安装与基础配置
安装依赖包
安装
sh
pip install django-simple-captcha
项目配置
配置 settings.py
sh
# `INSTALLED_APPS` 中添加 `'captcha'`
INSTALLED_APPS = [
# ...
'captcha',
]
### 验证码配置
CAPTCHA_CHALLENGE_FUNCT = "captcha.helpers.math_challenge" # 验证码生成方式
CAPTCHA_TIMEOUT = 1 # 验证码有效期,单位为分钟
迁移数据库(验证码需要存储验证记录)
sh
python manage.py migrate captcha
四、核心功能实现
后端实现
下面通过一个视图集实现验证码的生成和验证功能 ,适用于前后端分离架构。点击查看完整代码
配置urls.py
python
# 管理后台 - 验证码
router.register(r"captcha", CaptchaViewSet, basename="captcha")
前端实现
编写一个验证码Vue组件,主要功能包括:
- 显示验证码:通过
img
标签展示验证码图片,点击可刷新 - 用户输入:提供输入框供用户输入验证码
- 数据存储:隐藏域存储验证码的hashkey
- 接口调用:调用API获取验证码图片和验证用户输入
- 验证功能:提供validateCaptcha方法供父组件调用验证
vue
<template>
<div class="captcha-wrapper">
<!-- 用户输入框 -->
<input type="text" v-model="userInput" placeholder="请输入验证码" class="captcha-input" />
<!-- 验证码图片(点击可刷新) -->
<img :src="captchaImage" @click="refreshCaptcha" class="captcha-img" />
<!-- 隐藏域存储hashkey -->
<input type="hidden" v-model="captchaHashKey" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as LoginApi from '@/api/login'
const captchaImage = ref('')
const captchaHashKey = ref('')
const userInput = ref('')
// 初始化获取验证码
const fetchCaptcha = async () => {
try {
const response = await LoginApi.getCode({})
// console.log('验证码响应:', response) // 添加日志
if (response.code === 0) {
captchaImage.value = response.data.imageBase
captchaHashKey.value = response.data.captchaKey
} else {
console.error('验证码加载失败:', response.msg)
}
} catch (error) {
console.error('验证码加载失败:', error)
}
}
// 点击刷新验证码
const refreshCaptcha = () => fetchCaptcha()
// 暴露验证方法
const validateCaptcha = async () => {
try {
const response = await LoginApi.reqCheck({
captchaKey: captchaHashKey.value,
captchaValue: userInput.value
})
return response.code === 0
} catch (error) {
console.error('验证码验证失败:', error)
return false
}
}
// 组件挂载时加载验证码
onMounted(() => {
fetchCaptcha()
})
// 暴露接口给父组件
defineExpose({ validateCaptcha })
</script>
实现效果
可通过配置选项控制验证码是否开启,支持点击刷新验证码
五、Base64 图片格式说明
在上面的实现中,我们使用了 Base64 格式来传输图片,这是一种将二进制数据编码为可打印字符的方法
- 图片的 Base64 格式通常以
data:image/图片格式;base64,
开头 - 示例:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
- 优势:可以直接嵌入到 HTML 或 JSON 中,减少 HTTP 请求次数
适用场景
- 小型图片资源(如验证码、图标等)
- 需要跨平台传输二进制数据的场景
您正在阅读的是《Django从入门到实战》专栏!关注不迷路~