用python實(shí)現(xiàn)一個(gè)簡(jiǎn)單的驗(yàn)證碼
我們經(jīng)常在登錄一個(gè)網(wǎng)站，或者注冊(cè)的時(shí)候需要輸入一個(gè)驗(yàn)證碼，有時(shí)候覺(jué)得很煩，因?yàn)橛行?yàn)證碼不僅復(fù)雜還看不清，許多用戶就會(huì)因?yàn)檫@些而懶得再登錄或者注冊(cè)之類的。既然驗(yàn)證碼會(huì)造成流失用戶的風(fēng)險(xiǎn)，為什么大家都還要使用驗(yàn)證碼呢？這是驗(yàn)證碼在一定程度上起到保護(hù)網(wǎng)站安全的作用，比如防止大規(guī)模惡意注冊(cè)（比如手機(jī)驗(yàn)證碼形式，一機(jī)一戶），再比如反爬蟲（至少不會(huì)輕易讓你爬取數(shù)據(jù)）等，你看用戶基數(shù)最大的12306，就會(huì)有各種驗(yàn)證碼。既然驗(yàn)證碼這么重要，它的原理是什么？是怎么實(shí)現(xiàn)的？它的原理其實(shí)很簡(jiǎn)單，就是在服務(wù)器端生成驗(yàn)證碼，發(fā)送給客戶端，并以圖像格式顯示。客戶端提交所顯示的驗(yàn)證碼，服務(wù)端接收并進(jìn)行比較，若比對(duì)失敗則不能實(shí)現(xiàn)登錄或注冊(cè)，反之成功后跳轉(zhuǎn)相應(yīng)界面。
我們知道了其原理，實(shí)現(xiàn)起來(lái)就很簡(jiǎn)單了，現(xiàn)在網(wǎng)絡(luò)上也有各種各樣已經(jīng)做好的驗(yàn)證碼，我們完全可以拿來(lái)即用。但是為了更好的理解其原理，我們來(lái)手?jǐn)]一個(gè)簡(jiǎn)單的驗(yàn)證碼，以下是在Django中實(shí)現(xiàn)。
簡(jiǎn)單的驗(yàn)證碼（1）、我們?cè)趗rls.py中定義一條路由，如下：
url(r’getcode’, views.get_code, name='get_code'),
（2）、我們定義一個(gè)視圖函數(shù)get_code()，如下：
from io import BytesIOfrom PIL import Image, ImageDraw, ImageFontfrom django.conf import settingsfrom django.shortcuts import render, HttpResponse, redirectdef get_code(request): ''' 手?jǐn)]一個(gè)驗(yàn)證碼 ''' # 定義圖像顏色模型 mode = 'RGB' # 定義圖像尺寸 size = (200, 100) # 定義背景色 bg_color = (255, 0, 0) # 創(chuàng)建圖像 image = Image.new(mode=mode, size=size, color=bg_color) # 創(chuàng)建畫布 image_draw = ImageDraw.Draw(image, mode=mode) # 創(chuàng)建字體,第一個(gè)參數(shù)是字體，第二個(gè)參數(shù)是字體大小 image_font = ImageFont.truetype(settings.FONT_PATH, 100) # 創(chuàng)建一個(gè)驗(yàn)證碼 verify_code = 'Joke' # 生成驗(yàn)證碼 fill_color = (255,255,255) for i in range(4): image_draw.text(xy=(50 * i, 0), text=verify_code[i], font=image_font, fill=fill_color) # 保存圖像 fp = BytesIO() image.save(fp, 'png') return HttpResponse(fp.getvalue(), content_type='image/png')
其中settings.FONT_PATH是我預(yù)先定義好的字段，如下
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'statics'),]FONT_PATH = os.path.join(os.path.join(STATICFILES_DIRS[0], 'fonts'),'constan.ttf')
然后我們我們啟動(dòng)服務(wù)python manager.py runserver，在瀏覽器上就可以看到驗(yàn)證碼生成了
能是實(shí)現(xiàn)了，但是我們現(xiàn)在是自定義了一個(gè)驗(yàn)證碼字段，我們是需要隨機(jī)生成驗(yàn)證碼，而且字體顏色，背景顏色這些也不要定死了，然后我們?cè)偕梢恍└蓴_點(diǎn)，我們對(duì)代碼進(jìn)行如下重構(gòu)：
def get_code(request): ''' 手?jǐn)]一個(gè)驗(yàn)證碼 ''' # 定義圖像顏色模型 mode = 'RGB' # 定義圖像尺寸 size = (200, 100) # 定義背景色 bg_color = (get_color(), get_color(), get_color()) # 創(chuàng)建圖像 image = Image.new(mode=mode, size=size, color=bg_color) # 創(chuàng)建畫布 image_draw = ImageDraw.Draw(image, mode=mode) # 創(chuàng)建字體,第一個(gè)參數(shù)是字體，第二個(gè)參數(shù)是字體大小 image_font = ImageFont.truetype(settings.FONT_PATH, 100) # 創(chuàng)建一個(gè)驗(yàn)證碼 # verify_code = 'Joke' verify_code = get_verify_code() # 生成驗(yàn)證碼 # fill_color = (255,255,255) for i in range(4): fill_color = (get_color(),get_color(),get_color()) image_draw.text(xy=(50 * i, 0), text=verify_code[i], font=image_font, fill=fill_color) # 加入干擾點(diǎn) for i in range(10000): fill_color = (get_color(),get_color(),get_color()) xy = (random.randrange(200), random.randrange(100)) image_draw.point(xy=xy,fill=fill_color) # 保存圖像 fp = BytesIO() image.save(fp, 'png') return HttpResponse(fp.getvalue(), content_type='image/png')def get_color(): '''隨機(jī)獲取顏色''' return random.randrange(256)def get_verify_code(): '''隨機(jī)獲取驗(yàn)證碼''' verify_code = ’’.join(random.choice(string.ascii_uppercase + string.digits + string.ascii_lowercase) for x in range(4)) return verify_code
然后我們重啟應(yīng)用，刷新頁(yè)面如下
是不是有點(diǎn)神似了？下面我們創(chuàng)建一個(gè)簡(jiǎn)單的login頁(yè)面，來(lái)實(shí)際應(yīng)用一下驗(yàn)證碼。
簡(jiǎn)單的登錄頁(yè)面（1）、創(chuàng)建一個(gè)路由
url(r’login’,views.login, name='login'),
（2）、創(chuàng)建一個(gè)Login的視圖函數(shù)
def login(request): '''登錄頁(yè)面''' if request.method == 'POST': pass return render(request, 'login.html')
（3）、創(chuàng)建一個(gè)login.html的template
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Login</title></head><body><form action='{% url ’app01:login’ %}' method='post'>{% csrf_token %} <span>用戶名：</span><input type='text' name='username'> <br> <span>驗(yàn)證碼：</span><input type='text' name='verify_code'> <br> <img src='http://m.lshqa.cn/bcjs/{% url ’app01:get_code’ %}' alt=''> <br> <button>登錄</button></form></body></html>
然后重啟服務(wù)，瀏覽器訪問(wèn)如下
現(xiàn)在我們只是簡(jiǎn)單的搭建起了流程，我們需要的功能還沒(méi)有實(shí)現(xiàn)，我們需要的功能有：1、驗(yàn)證碼校驗(yàn)2、點(diǎn)擊圖片自動(dòng)刷新驗(yàn)證碼3、忽略大小寫
我們現(xiàn)在對(duì)項(xiàng)目進(jìn)行重構(gòu)，如下：（1）、我們?cè)趃et_code視圖函數(shù)添加一行代碼，如下
# 創(chuàng)建一個(gè)驗(yàn)證碼 # verify_code = 'Joke' verify_code = get_verify_code()# 加入session request.session[’verify_code’] = verify_code ......
（2）、修改login視圖函數(shù)，如下
def login(request): '''登錄頁(yè)面''' if request.method == 'POST': storage_code = request.session.get('verify_code') submit_code = request.POST.get('verify_code') if storage_code.lower() == submit_code.lower(): return HttpResponse('登錄成功') return render(request, 'login.html')
（3）、修改login.html代碼如下
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Login</title></head><body><form action='{% url ’app01:login’ %}' method='post'> {% csrf_token %} <span>用戶名：</span><input type='text' name='username'> <br> <span>驗(yàn)證碼：</span><input type='text' name='verify_code'> <br> <img src='http://m.lshqa.cn/bcjs/{% url ’app01:get_code’ %}' alt='' name='verify_image'> <br> <button>登錄</button></form><script src='https://cdn.bootcss.com/jquery/3.2.0/jquery.js'></script><script> $(function () { $('img').on('click', function () { console.log('來(lái)了啊') $(this).attr('src','{% url ’app01:get_code’ %}'+'?id='+Math.random()) }) })</script></body></html>
然后就可以愉快的玩耍了，是不是很簡(jiǎn)單呢？
以上就是用python實(shí)現(xiàn)一個(gè)簡(jiǎn)單的驗(yàn)證碼的詳細(xì)內(nèi)容，更多關(guān)于python 實(shí)現(xiàn)驗(yàn)證碼的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. 不要在HTML中濫用div2. Vue3使用JSX的方法實(shí)例(筆記自用)3. 使用css實(shí)現(xiàn)全兼容tooltip提示框4. CSS代碼檢查工具stylelint的使用方法詳解5. vue實(shí)現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程6. html清除浮動(dòng)的6種方法示例7. 詳解CSS偽元素的妙用單標(biāo)簽之美8. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)9. JavaScript數(shù)據(jù)類型對(duì)函數(shù)式編程的影響示例解析10. 利用CSS3新特性創(chuàng)建透明邊框三角
網(wǎng)公網(wǎng)安備