はじめに:どんなにユーザーは常にカントンの周りに開いていない、といくつかの検証コードが存在しなければならないように、ユーザモジュールが見えるように、プロジェクトのモジュールは、ここでPythonのコードの下で認定を達成する2つの方法を紹介するもの
環境はじめに:ジャンゴ+ python3.6以降
実施例1:独自のジャンゴ・ジャンゴ・シンプル・キャプチャを使用します
サードパーティ製のパッケージをダウンロードしてください
pip install django-simple-captcha
install_appsの内側に取り付けられたキャプチャ
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'captcha', ]
メインアプリケーションルーティング経路設定キャプチャで
urlpatterns = [ path('admin/', admin.site.urls), path('captcha/',include('captcha.urls')), ]
生成された移行同期キャプチャは、テーブルに依存します
#生成迁移脚本 python manage.py makemigrations #执行文件迁移 python manage.py migerte ''' 如果出现错误可以尝试执行执行第二条命令,或者在两条命令后加上app名 python manage.py makemigrations captcha python manage.py migerte captcha '''
クラスを形成する用意キャプチャフィールド
#例子:forms.py from django import forms from captcha.fields import CaptchaField class UserRegisterForm(forms.Form): email = forms.EmailField(required=True) password = forms.CharField(required=True,min_length=6,max_length=26,error_messages={ 'required':'密码不能为空', 'min_length': '密码至少6个字符', 'max_length' : '密码过长', }) captcha = CaptchaField()
それらの背後にあるロジックでは、私たちのリクエストフォーム内にインスタンスを取得、フォームオブジェクトは、ページに戻ります
#views.py 代码逻辑 def user_register(request): if request.method == 'GET': #实例化user_register_form 不是为了验证,而是为了使用验证码 user_register_form = UserRegisterForm() return render(request,'register.html',{'user_register_form':user_register_form}) else: pass
検証コードページについては、次のページで、コードの一部に登録されています
<div class="form-group marb8 captcha1 "> <label>验 证 码</label> {{ user_register_form.captcha }} </dv>
オープン登録ページ所望の効果を得るための要求を取得送信、およびクリックは、コードを更新
オプション2:、自分で服を着た彼自身を確認コードを塗装
Pythonは私たちのために、追加のサードパーティの絵画ギャラリーを提供します
説明書
- フレームワーク熟練の使用ジャンゴ
- HTML HTMLに精通
- Ajaxの背後にあるロジックを構成するために使用されます
原則
- 絵を描くことにより、PIL(定義可能な文字、画像サイズは、障害物を識別し...)
- フロントエンドディスプレイの写真
- ユーザは、前景と比較して、AJAXを介して情報を送信し、確認コードを送信します
- リフレッシュするには画像をクリックしてください(別のデータを渡すことによって、別の画像を表示します)
直接小さなBB上のコード
#views.py
#views
from PIL import Image, ImageDraw, ImageFont
from random
def verify_code(request):
# 引入随机函数模块
import random
def rndColor():
"""
生成随机颜色
:return:
"""
return (random.randint(0, 255), random.randint(10, 255), random.randint(64, 255))
# 定义变量,用于画面的背景色、宽、高
bgcolor = (rndColor())
width = 100
height = 37
# 创建画面对象
im = Image.new('RGB', (width, height), bgcolor)
# 创建画笔对象
draw = ImageDraw.Draw(im)
# 调用画笔的point()函数绘制噪点
for i in range(0, 100):
xy = (random.randrange(0, width), random.randrange(0, height))
fill = (random.randrange(0, 255), 255, random.randrange(0, 255))
draw.point(xy, fill=fill)
# 定义验证码的备选值
str1 = 'ABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0'
# 随机选取4个值作为验证码
rand_str = ''
for i in range(0, 4):
rand_str += str1[random.randrange(0, len(str1))]
# 构造字体对象,ubuntu的字体路径为“/usr/share/fonts/truetype/freefont”
font = ImageFont.truetype('simhei.ttf', 23)
# 构造字体颜色
fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
# 绘制4个字
draw.text((5, 2), rand_str[0], font=font, fill=fontcolor)
draw.text((25, 2), rand_str[1], font=font, fill=fontcolor)
draw.text((50, 2), rand_str[2], font=font, fill=fontcolor)
draw.text((75, 2), rand_str[3], font=font, fill=fontcolor)
# 写干扰圆圈
for i in range(40):
draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
x = random.randint(0, width)
y = random.randint(0, height)
draw.arc((x, y, x + 4, y + 4), 0, 90, fill=rndColor())
# 画干扰线
for i in range(5):
x1 = random.randint(0, width)
y1 = random.randint(0, height)
x2 = random.randint(0, width)
y2 = random.randint(0, height)
draw.line((x1, y1, x2, y2), fill=rndColor())
# 释放画笔
del draw
# 存入session,用于做进一步验证
request.session['verifycode'] = rand_str
# 内存文件操作
buf = BytesIO()
# 将图片保存在内存中,文件类型为png
im.save(buf, 'png')
# 将内存中的图片数据返回给客户端,MIME类型为图片png
return HttpResponse(buf.getvalue(), 'image/png')
#将验证码的数据其实是存储到session中通过session和前端获取的值进行比较
#因为要忽视大小写,这里用.lower(),全部转换为小写进行比较
def verify_yz(request):
'''验证码校验视图'''
user_yzm = request.GET.get('user_yzm')
verifycode = request.session['verifycode']
print('user_yzm='+user_yzm)
print('verifycode='+verifycode)
if user_yzm.lower() == verifycode.lower():
return restful.ok("OK", data=None)
else:
return restful.params_error("验证码错误", data=None)
#html
#输入验证码
<input type="text" name="user_yzm" id='user_yzm' class="user_yzm" placeholder="请输入图文验证">
#盒子内放置图片
<div id="photo_yzm">
<img id="yzm" class="yzm" src="/user/verify_code"/>//也可以写成:src="{% url 'user:verify_code' %}"
</div>
#实现点击验证码图片进行刷新的js代码
<script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js'%}"></script>
<script type="text/javascript" src="{% static 'js/register.js' %}"></script>
//ajax
<script>
$(function(){
var img = $('#yzm');
//点击图片触发事件
img.click(function(){
//获取现在时间,用于每次刷新图片不同
mydate=new Date();
//点击却换yzm的src属性.后面加参数是因为每次访问网站之后每次参数不同接收到的图像也不同,如果没有传参数,每次返回的都是相同的图像
$(this).attr("src",'/user/verify_code?a='+mydate);
});// img click
var photo_text = $('.user_yzm');
//验证码图片改变事件
photo_text.change(function(){
//ajax
var user_yzm = $(this).val();
{#alert(user_yzm);#}
$.ajax({
//获取方式,这边写get,views获取也要写get,所连接到的是本文views中71行,使用POST出现问题请看:https://blog.csdn.net/weixin_43790705/article/details/87867172
type: "get",
//将数据发送到:
url: "{% url 'user:verify_yz' %}",
//数据
data:"user_yzm="+user_yzm,
//数据类型默认为json
success: function(msg){
{#alert('发送ajax');#}
{#obj = eval("("+msg+")");#}
alert(msg.code);
//如果返回的参数的code属性为200那么执行:
if(msg.code=='200'){
$('#user_yzm').css({"background": "rgba(87,255,53,0.51)"});
}
//否则
else{
$('#user_yzm').css({"background": "rgba(255,113,103,0.47)"});
}
}
})// ajax
}) //change
})// $func
</script>