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

一、验证码工具选择

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

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

二、验证码工作流程

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

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

三、安装与基础配置

安装依赖包

安装

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.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从入门到实战》专栏！关注不迷路~