加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 大数据 > 正文

【插拔式】自定义图片验证码(开源)

发布时间:2020-12-15 17:08:33 所属栏目:大数据 来源:网络整理
导读:1:第一种自定义验证码(推荐) 1 前端: img id = " img " src= /路由/ " span {{ dict.error }}/span 2 前端js刷新验证码: 3 script 4 img =document.getElementById( " ); 5 img.onclick = function () { 6 img.src = img.src + ? " ; # 利用加?来刷新图

1:第一种自定义验证码(推荐)

  1 前端:   <img id ="img"  src=/路由/"> <span {{ dict.error }}</span>
  2 前端js刷新验证码:
  3 <script>
  4     img =document.getElementById(");
  5     img.onclick = function () {
  6         img.src = img.src + ?";    #利用加?来刷新图片生成更换
  7     }
  8 </script>
  9 
 10 
 11 
 12 校验验证码函数:
 13 if request.method == POST:
 14         dict = {}           用户返回错误信息
 15          判断验证码
 16         input_code = request.POST.get(code").upper() 输入的验证码
 17         obj = F1(request.POST)  输入框的所有数据
 18 
 19         if obj.is_valid() and input_code == request.session["]:   #判断输入的值是否等于注册session的验证码(生成随机码的时候已经注册到session)
 20 
 21              插入数据库,这里是删除不需要添加到数据表的key
 22             obj.cleaned_data.pop(again_password)
 23             obj.cleaned_data.pop( 24             models.UserInfo.objects.create_user(**obj.cleaned_data)
 25             return redirect(/index/login/")  返回页面
 26         else 27             dict[error"] = 验证码不匹配"
 28             return render(request,register.html",{obj":obj,1)">dict:dict})
 29 
 30 
 31 
 32 
 33 验证码生成(直接复制到对应视图最下面):
 34 后端视图对应的路由 :
 35 
 36 验证码:
 37 from PIL import Image,ImageDraw,ImageFont,ImageFilter
 38  random
 39 
 40 
 41 随机颜色
 42 def random_color():
 43     return random.randint(0,255),random.randint(0,255 44 
 45 def code(request,width=150,height=35):
 46      with open("1.png","wb") as f:
 47      定义一个图片,并且设置参数
 48     img_obj = Image.new('RGB',size=(width,height),color=(255,255))   长宽   颜色
 49 
 50      创建画笔在画布上
 51     draw_obj = ImageDraw.Draw(img_obj)
 52      自定义字体
 53     font_obj = ImageFont.truetype(Monaco.ttf 54 
 55      写干扰点
 56     for i in range(40 57         draw_obj.point([random.randint(0,width),height)],fill=random_color())
 58 
 59      写干扰圆圈
 60      61         draw_obj.point([random.randint(0,1)"> 62         x = random.randint(0,width)
 63         y = 64         draw_obj.arc((x,y,x + 4,y + 4),90,1)"> 65 
 66          画干扰线
 67     in range(5 68         x1 = 69         y1 = 70         x2 = 71         y2 = 72 
 73         draw_obj.line((x1,y1,x2,y2),1)"> 74 
 75         img = img_obj.filter(ImageFilter.EDGE_ENHANCE_MORE)
 76 
 77      随机字符串
 78      79         l = chr(random.randint(97,122))   小写字母
 80         b = chr(random.randint(65,90))   大学字母
 81         n = str(random.randint(0,9))
 82 
 83         t = random.choice([b,l,n])
 84 
 85          在text参数设置坐标,字符串,颜色,字体
 86         draw_obj.text((i * 30,0),t,fill=random_color(),font=font_obj)
 87         
 88     放到session,并且忽略大小写
 89     request.session["".join(temp).upper()
 90 
 91     写入内存,显示到网页上
 92     f = open(1.pngrb 93     data =f.read()
 94     from io  BytesIO
 95     f1 = BytesIO()
 96     img_obj.save(f1,format=PNG 97     image_data = f1.getvalue()
 98 
 99 
100     return HttpResponse(image_data,content_type=image/png")

2:第二种验证码(据说有BUG)博主没用过

1) 安装 django-simple-captcha:
pip install django-simple-captcha


2)注册captcha
INSTALLED_APPS = [
    django.contrib.admin',django.contrib.authdjango.contrib.contenttypesdjango.contrib.sessionsdjango.contrib.messagesdjango.contrib.staticfilescaptcha 设置 captcha 图片大小
CAPTCHA_IMAGE_SIZE = (80,45 字符个数
CAPTCHA_LENGTH = 4
 超时(minutes)
CAPTCHA_TIMEOUT = 1



3)创建它的表
python manage.py makemigrations
python manage.py migrate


4)添加路由
urlpatterns = [
    url(admin/ 图片验证码 路由
    url(captcha/captcha.urls))

]
再添加ajax刷新请求的二级路由,ajxa请求地址: captcha/refresh_captcha/
url(refresh_captcha/ 刷新验证码,ajax



5)在form文件中直接导入模块:
from captcha.fields  CaptchaField

6)在写的form类下填写生成标签:
Captcha = CaptchaField()

7)前端设置跟其他组件一致,存放数据库:
obj.cleaned_data.pop(" ")
ps:django-simple-captcha有一些多余的功能,所以从它的源代码中提取了一部分加以修改,生成了一个简单的验证码模块。在使用django-simple-captcha时发现了一个Bug,
该库使用HttpResponse.write(image_data)的方式返回验证码图片数据,导致验证码图片无法显示,具体原因还不清楚,
不过换成HttpResponse(content=image_data)的方式就好了。这也是我自定义验证码功能的原因。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读