一、引言 

        本部落格談不上深度，算是筆記和一些探索經驗。主要是遇到了一個實際問題，在使用django-simple-captcha模組的時候，官網推薦使用django表單的形式去新增，django表單確實很方便，但是對於簡單專案或者只需要django-simple-captcha模組的時候也沒有太多的文件具體說明，這篇部落格就說一下怎麼單獨使用django-simple-captcha模組。

        目標：實現手動建立驗證碼和前端顯示，後臺手動驗證，ajax請求。

二、流程

1）安裝 django-simple-captcha

pip install django-simple-captcha
 

2）註冊captcha

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'captcha',
]

也可以個性化定製，在 settings.py中新增如下程式碼，詳情參考官方文件：

# 設定 captcha 圖片大小
CAPTCHA_IMAGE_SIZE = (80, 45)
# 字元個數
CAPTCHA_LENGTH = 4
# 超時(minutes)
CAPTCHA_TIMEOUT = 1
 

3）執行資料遷移，生成資料表 captcha_captchastore

python manage.py migrate

4）新增路由

urlpatterns = [
    path('admin/', admin.site.urls),
    # 圖片驗證碼 路由
    path('captcha/', include('captcha.urls'))
]

再新增ajax重新整理請求的二級路由，ajxa請求地址： captcha/refresh_captcha/

path('refresh_captcha/', views.refresh_captcha),    # 重新整理驗證碼，ajax
 

本次django使用的是2.1.1版本，路由的寫法可能有點不同，原理一樣。

5）在views.py中新增程式碼，因為在我的專案中，設計到程式碼的複用問題，所以我建立驗證碼和驗證單獨做成函式

# 驗證碼需要匯入的模組
from captcha.models import CaptchaStore
from captcha.helpers import captcha_image_url

# 建立驗證碼
def captcha():
    # 驗證碼，第一次請求
    hashkey = CaptchaStore.generate_key()
    image_url = captcha_image_url(hashkey)
    captcha = {'hashkey': hashkey, 'image_url': image_url}
    return captcha

# 驗證驗證碼
def jarge_captcha(captchaStr, captchaHashkey):
    if captchaStr and captchaHashkey:
        try:
            # 獲取根據hashkey獲取資料庫中的response值
            get_captcha = CaptchaStore.objects.get(hashkey=captchaHashkey) 
            # 如果驗證碼匹配
            if get_captcha.response == captchaStr.lower():  
                return True
        except:
            return False
    else:
        return False

6）ajax請求，settings.py 檔案中

# 重新整理驗證碼
# path: /ims/refresh_captcha
import json
def refresh_captcha(request):
    return HttpResponse(json.dumps(captcha()), content_type='application/json')

前端頁面：

<div class="form-group">
    <label for="id_password">驗證碼</label>
    <div id="captcha_div">
        <input type="text" name='captcha' class="form-control" placeholder="Captcha" required style="width: 55%;display: inline-block;margin-right: 8%;">
        <a href="#" class="captcha"><img src="{{captcha.image_url}}" alt="點選換一張" id="id_captcha"></a>
        <input value="{{captcha.hashkey}}" name="hashkey" type="hidden" id="id_captcha_0">
    </div>
</div>

前端頁面顯示圖片採用 src="{{captcha.image_url}}"來獲取：  

<script>
        <!-- 動態重新整理驗證碼js -->
        $(document).ready(function(){
            $('.captcha').click(function () {
                $.getJSON("/ims/refresh_captcha/", function (result) {
                    $('#id_captcha').attr('src', result['image_url']);
                    $('#id_captcha_0').val(result['hashkey'])
                });
            });
        });
</script>

三、原理