django-simple-captcha 驗證碼模塊的小結

一、引言 

        官方文檔：django-simple-captcha

        本博客談不上深度，算是筆記和一些探索經驗。主要是遇到了一個實際問題，在使用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>

三、原理