当前位置：首页 > news >正文

Django集成图片验证码功能：基于django-simple-captcha实现

news 2025/8/5 14:01:45

文章目录

- 一、验证码工具选择
- 二、验证码工作流程
- 三、安装与基础配置
- - 安装依赖包
  - 项目配置
- 四、核心功能实现
- - 后端实现
  - 前端实现
  - 实现效果
- 五、Base64 图片格式说明

一、验证码工具选择

django-simple-captcha 是一款轻量且高度可定制的 Django 验证码应用，具有以下优势

多样化验证码类型：支持随机字符、数学运算、字典单词等多种验证形式
高度可定制：可自定义验证码样式、噪声效果和过滤规则
良好的交互性：支持 AJAX 动态刷新，无需重新加载页面
音频输出支持：提供音频输出功能，提升可访问性

二、验证码工作流程

一个完整的验证码验证流程如下：

用户访问页面时，前端请求生成验证码
后端生成验证码图片和对应的验证 key，返回给前端
用户输入验证码并提交表单，前端将用户输入与验证 key 一同发送到后端
后端进行二次校验，验证用户输入的正确性
返回校验结果给前端，完成整个验证流程

在这里插入图片描述

三、安装与基础配置

安装依赖包

安装

pip install django-simple-captcha

项目配置

配置 settings.py

# `INSTALLED_APPS` 中添加 `'captcha'`
INSTALLED_APPS = [# ...'captcha',
]### 验证码配置
CAPTCHA_CHALLENGE_FUNCT = "captcha.helpers.math_challenge"  # 验证码生成方式
CAPTCHA_TIMEOUT = 1  # 验证码有效期，单位为分钟

迁移数据库（验证码需要存储验证记录）

python manage.py migrate captcha

四、核心功能实现

后端实现

下面通过一个视图集实现验证码的生成和验证功能，适用于前后端分离架构。点击查看完整代码

在这里插入图片描述

配置urls.py

# 管理后台 - 验证码
router.register(r"captcha", CaptchaViewSet, basename="captcha")

前端实现

编写一个验证码Vue组件，主要功能包括：

显示验证码：通过img标签展示验证码图片，点击可刷新
用户输入：提供输入框供用户输入验证码
数据存储：隐藏域存储验证码的hashkey
接口调用：调用API获取验证码图片和验证用户输入
验证功能：提供validateCaptcha方法供父组件调用验证

<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.imageBasecaptchaHashKey.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>