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

一、验证码工具选择

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

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

二、验证码工作流程

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

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

三、安装与基础配置

安装依赖包

安装

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

相关推荐
Q_Q5110082859 小时前
python的驾校培训预约管理系统
开发语言·python·django·flask·node.js·php
2025年一定要上岸10 小时前
【Django】-9- 单元测试和集成测试(上)
单元测试·django·集成测试
大得36919 小时前
django的数据库原生操作sql
数据库·sql·django
计算机毕设定制辅导-无忧学长1 天前
InfluxDB 与 Python 框架结合:Django 应用案例(三)
开发语言·python·django
bigcarp1 天前
linux + 宝塔面板 部署 django网站 启动方式:uwsgi 和gunicorn如何选择 ?
linux·运维·django
2025年一定要上岸1 天前
【Django】-6- 登录用户身份鉴权
数据库·django·sqlite
电商数据girl2 天前
如何利用API接口与网页爬虫协同进行电商平台商品数据采集?
大数据·开发语言·人工智能·python·django·json