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

一、验证码工具选择

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

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

二、验证码工作流程

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

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

三、安装与基础配置

安装依赖包

安装

1. pip install django-simple-captcha

复制代码

项目配置

配置 settings.py

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

复制代码

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

1. python manage.py migrate captcha

复制代码

四、核心功能实现

后端实现

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

配置urls.py

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

复制代码

前端实现

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

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

1. <template>
2.   
3.    
4.     <input type="text" v-model="userInput" placeholder="请输入验证码"  />
5.    
6.     <img :src="captchaImage" @click="refreshCaptcha"  />
7.    
8.     <input type="hidden" v-model="captchaHashKey" />
9.   
10. </template>

复制代码

实现效果

可通过配置选项控制验证码是否开启，支持点击刷新验证码

点击查看完整代码
五、Base64 图片格式说明

在上面的实现中，我们使用了 Base64 格式来传输图片，这是一种将二进制数据编码为可打印字符的方法

• 图片的 Base64 格式通常以 data:image/图片格式;base64, 开头
  
• 示例：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
  
• 优势：可以直接嵌入到 HTML 或 JSON 中，减少 HTTP 请求次数
  

适用场景

• 小型图片资源（如验证码、图标等）
  
• 需要跨平台传输二进制数据的场景
  

您正在阅读的是《Django从入门到实战》专栏！关注不迷路~

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！