在Web應(yīng)用開(kāi)發(fā)中，驗(yàn)證碼是防止惡意攻擊、自動(dòng)化腳本濫用的重要手段。本文將介紹如何使用django-simple-captcha庫(kù)在Django項(xiàng)目中快速集成圖片驗(yàn)證碼功能，包括安裝配置、核心實(shí)現(xiàn)代碼及使用方法。

一、驗(yàn)證碼工具選擇

django-simple-captcha 是一款輕量且高度可定制的 Django 驗(yàn)證碼應(yīng)用，具有以下優(yōu)勢(shì)

• 多樣化驗(yàn)證碼類(lèi)型：支持隨機(jī)字符、數(shù)學(xué)運(yùn)算、字典單詞等多種驗(yàn)證形式
• 高度可定制：可自定義驗(yàn)證碼樣式、噪聲效果和過(guò)濾規(guī)則
• 良好的交互性：支持 AJAX 動(dòng)態(tài)刷新，無(wú)需重新加載頁(yè)面
• 音頻輸出支持 ：提供音頻輸出功能，提升可訪(fǎng)問(wèn)性

二、驗(yàn)證碼工作流程

一個(gè)完整的驗(yàn)證碼驗(yàn)證流程如下：

1. 用戶(hù)訪(fǎng)問(wèn)頁(yè)面時(shí)，前端請(qǐng)求生成驗(yàn)證碼
2. 后端生成驗(yàn)證碼圖片和對(duì)應(yīng)的驗(yàn)證 key，返回給前端
3. 用戶(hù)輸入驗(yàn)證碼并提交表單，前端將用戶(hù)輸入與驗(yàn)證 key 一同發(fā)送到后端
4. 后端進(jìn)行二次校驗(yàn)，驗(yàn)證用戶(hù)輸入的正確性
5. 返回校驗(yàn)結(jié)果給前端，完成整個(gè)驗(yàn)證流程

三、安裝與基礎(chǔ)配置

安裝依賴(lài)包

安裝

pip install django-simple-captcha

項(xiàng)目配置

配置 settings.py

# `INSTALLED_APPS` 中添加 `'captcha'`
INSTALLED_APPS = [
    # ...
    'captcha',
]

### 驗(yàn)證碼配置
CAPTCHA_CHALLENGE_FUNCT = "captcha.helpers.math_challenge"  # 驗(yàn)證碼生成方式
CAPTCHA_TIMEOUT = 1  # 驗(yàn)證碼有效期，單位為分鐘

遷移數(shù)據(jù)庫(kù)（驗(yàn)證碼需要存儲(chǔ)驗(yàn)證記錄）

python manage.py migrate captcha

四、核心功能實(shí)現(xiàn)

后端實(shí)現(xiàn)

下面通過(guò)一個(gè)視圖集實(shí)現(xiàn)驗(yàn)證碼的生成和驗(yàn)證功能，適用于前后端分離架構(gòu)。點(diǎn)擊查看完整代碼

配置urls.py

# 管理后臺(tái) - 驗(yàn)證碼
router.register(r"captcha", CaptchaViewSet, basename="captcha")

前端實(shí)現(xiàn)

編寫(xiě)一個(gè)驗(yàn)證碼Vue組件，主要功能包括：

• 顯示驗(yàn)證碼：通過(guò)img標(biāo)簽展示驗(yàn)證碼圖片，點(diǎn)擊可刷新
• 用戶(hù)輸入：提供輸入框供用戶(hù)輸入驗(yàn)證碼
• 數(shù)據(jù)存儲(chǔ)：隱藏域存儲(chǔ)驗(yàn)證碼的hashkey
• 接口調(diào)用：調(diào)用API獲取驗(yàn)證碼圖片和驗(yàn)證用戶(hù)輸入
• 驗(yàn)證功能：提供validateCaptcha方法供父組件調(diào)用驗(yàn)證

<template>
  <div class="captcha-wrapper">
    <!-- 用戶(hù)輸入框 -->
    <input type="text" v-model="userInput" placeholder="請(qǐng)輸入驗(yàn)證碼" class="captcha-input" />
    <!-- 驗(yàn)證碼圖片（點(diǎn)擊可刷新） -->
    <img :src="captchaImage" @click="refreshCaptcha" class="captcha-img" />
    <!-- 隱藏域存儲(chǔ)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('')

// 初始化獲取驗(yàn)證碼
const fetchCaptcha = async () => {
  try {
    const response = await LoginApi.getCode({})
    // console.log('驗(yàn)證碼響應(yīng):', response) // 添加日志
    if (response.code === 0) {
      captchaImage.value = response.data.imageBase
      captchaHashKey.value = response.data.captchaKey
    } else {
      console.error('驗(yàn)證碼加載失敗:', response.msg)
    }
  } catch (error) {
    console.error('驗(yàn)證碼加載失敗:', error)
  }
}

// 點(diǎn)擊刷新驗(yàn)證碼
const refreshCaptcha = () => fetchCaptcha()

// 暴露驗(yàn)證方法
const validateCaptcha = async () => {
  try {
    const response = await LoginApi.reqCheck({
      captchaKey: captchaHashKey.value,
      captchaValue: userInput.value
    })
    return response.code === 0
  } catch (error) {
    console.error('驗(yàn)證碼驗(yàn)證失敗:', error)
    return false
  }
}

// 組件掛載時(shí)加載驗(yàn)證碼
onMounted(() => {
  fetchCaptcha()
})

// 暴露接口給父組件
defineExpose({ validateCaptcha })
</script>

實(shí)現(xiàn)效果

可通過(guò)配置選項(xiàng)控制驗(yàn)證碼是否開(kāi)啟，支持點(diǎn)擊刷新驗(yàn)證碼

點(diǎn)擊查看完整代碼

五、Base64 圖片格式說(shuō)明

在上面的實(shí)現(xiàn)中，我們使用了 Base64 格式來(lái)傳輸圖片，這是一種將二進(jìn)制數(shù)據(jù)編碼為可打印字符的方法

• 圖片的 Base64 格式通常以 data:image/圖片格式;base64, 開(kāi)頭
• 示例：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
• 優(yōu)勢(shì)：可以直接嵌入到 HTML 或 JSON 中，減少 HTTP 請(qǐng)求次數(shù)

適用場(chǎng)景

• 小型圖片資源（如驗(yàn)證碼、圖標(biāo)等）
• 需要跨平臺(tái)傳輸二進(jìn)制數(shù)據(jù)的場(chǎng)景

---

您正在閱讀的是《Django從入門(mén)到實(shí)戰(zhàn)》專(zhuān)欄！關(guān)注不迷路~