在网站开发的登录页面中,经常会需要使用到图形验证码来验证。在Django中,django-simple-captcha库包提供了图形验证码的使用。

django-simple-captcha的安装

pip instsall django-simple-captcha的安装

在settings.py文件中注册captcha

INSTALLED_APPS = [
'captcha'
]

在settings.py文件中设置图形验证码的样式

#字母验证码
CAPTCHA_IMAGE_SIZE = (80, 45) # 设置 captcha 图片大小
CAPTCHA_LENGTH = 4 # 字符个数
CAPTCHA_TIMEOUT = 1 # 超时(minutes) #加减乘除验证码
CAPTCHA_OUTPUT_FORMAT = '%(image)s %(text_field)s %(hidden_field)s '
CAPTCHA_NOISE_FUNCTIONS = ('captcha.helpers.noise_null',
'captcha.helpers.noise_arcs', # 线
'captcha.helpers.noise_dots', # 点
)
CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.random_char_challenge'
CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.math_challenge'
CAPTCHA_TIMEOUT = 1

执行数据迁移,在数据表中生成captcha_captchastore表

python manage.py migrate

在urls.py中添加路由

urlpatterns = [
path('captcha/', include('captcha.urls')), # 图片验证码 路由
path('refresh_captcha/', views.refresh_captcha), # 刷新验证码,ajax
]

示例

urls.py文件

from django.urls import path
from django.conf.urls import include
from App.views import IndexView
from App import views urlpatterns = [
path('captcha/', include('captcha.urls')),
path('refresh_captcha/',views.refresh_captcha),
path('',IndexView.as_view()),
]

views.py文件

from django.shortcuts import render
from django.views.generic import View
from captcha.models import CaptchaStore
from captcha.helpers import captcha_image_url
from django.http import HttpResponse
import json # 创建验证码
def captcha():
hashkey = CaptchaStore.generate_key() #验证码答案
image_url = captcha_image_url(hashkey) #验证码地址
captcha = {'hashkey': hashkey, 'image_url': image_url}
return captcha
#刷新验证码
def refresh_captcha(request):
return HttpResponse(json.dumps(captcha()), content_type='application/json')
# 验证验证码
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
class IndexView(View):
def get(self, request):
hashkey = CaptchaStore.generate_key() # 验证码答案
image_url = captcha_image_url(hashkey) # 验证码地址
captcha = {'hashkey': hashkey, 'image_url': image_url}
return render(request, "login.html", locals())
def post(self,request):
capt=request.POST.get("captcha",None) #用户提交的验证码
key=request.POST.get("hashkey",None) #验证码答案
if jarge_captcha(capt,key):
return HttpResponse("验证码正确")
else:
return HttpResponse("验证码错误")

login.html文件

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
<script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js'%}"></script>
</head>
<body>
<form action="/" method="post">
<a href="#" class="captcha">
<img src="{{ captcha.image_url }}" alt="点击切换" id="id_captcha" >
</a> <br>
<input type="text" name="captcha" placeholder="验证码"> <br>
<input value="{{ captcha.hashkey }}" name="hashkey" type="hidden" id="id_captcha_0">
<button type="submit" class="btn btn-primary btn-block ">提交</button>
</form>
<script>
<!-- 动态刷新验证码js -->
$(document).ready(function(){
$('.captcha').click(function () {
$.getJSON("refresh_captcha/", function (result) {
$('#id_captcha').attr('src', result['image_url']);
$('#id_captcha_0').val(result['hashkey'])
});
});
});
</script>
</body>
</html>

扩展JavaScript

#这样子设置的background-image就是url(s),JavaScript代码当中的s变量并没有如你期望的那样子扩展开来。对JavaScript的运用不熟悉。
var s = "images/" + row + ".jpg";//row是table的当前行
$("body").css("background-image","url(" + s + ")");

django-图形验证码(django-simple-captcha)的更多相关文章

  1. Django Simple Captcha插件

    正文开始 先看官方描述 1.安装 打开控制台,输入如下: pip install django-simple-captcha 2.把APP添加到Django项目进入自己的Django项目,在setti ...

  2. Django Simple Captcha的使用

    Django Simple Captcha的使用 1.下载Django Simple Captcha django-simple-captcha官方文档地址 http://django-simple- ...

  3. Django中图形验证码(django-simple-captcha)

    django-simple-captcha 在网站开发的登录页面中,经常会需要使用到图形验证码来验证.在Django中,django-simple-captcha库包提供了图形验证码的使用. 下面我们 ...

  4. django生成验证码

    django生成验证码 # 制作验证码 def verify_code(): # 1,定义变量,用于画面的背景色.宽.高 # random.randrange(20, 100)意思是在20到100之间 ...

  5. JQ-用户注册用到的图形验证码,短信验证码点击事件,切换active类

    // 点击切换图形验证码 页面加载完后执行,类似window.onload $(function () { var imgCaptcha = $(".img-captcha"); ...

  6. python 生成图形验证码

    文章链接:https://mp.weixin.qq.com/s/LYUBRNallHcjnhJb1R3ZBg 日常在网站使用过程中经常遇到图形验证,今天准备自己做个图形验证码,这算是个简单的功能,也适 ...

  7. php 图形验证码的3种方法

    生成图形验证码需要使用php GD库来生成,如果你没开户GD库我们需要在php.ini文件找到extension=php_gd2.dll 去掉前面的;就行了,然后重启apache 或iis环境即可 检 ...

  8. Tornado框架实现图形验证码功能

    图形验证码是项目开发过程中经常遇到的一个功能,在很多语言中都有对应的不同形式的图形验证码功能的封装,python 中同样也有类似的封装操作,通过绘制生成一个指定的图形数据,让前端HTML页面通过链接获 ...

  9. vue项目经验:图形验证码接口get请求处理

    一般图形验证码处理: 直接把img标签的src指向这个接口,然后在img上绑定点击事件,点击的时候更改src的地址(在原来的接口地址后面加上随机数即可,避免缓存) <img :src=" ...

  10. Python 图形验证码库、二维码库的使用

    1. 图形验证码库 captcha # 引入图形库 from captcha.image import ImageCaptcha # 获取图像对象 image = ImageCaptcha(width ...

随机推荐

  1. golang数据结构和算法之BinarySearch二分查找法

    基础语法差不多了, 就需要系统的撸一下数据结构和算法了. 没找到合适的书, 就参考github项目: https://github.com/floyernick/Data-Structures-and ...

  2. 01-CSS3-justify-content: space-around; justify-content: space-between;

    /* justify-content: space-around; 运用在父级元素上 第一个子元素距离左边的距离==最后一个子元素距离右边的距离 除第一个子元素和最后一个子元素外,第2个,第3个... ...

  3. 深浅拷贝及 join set

    1.join s="**".join (['风清扬',"独孤求败"] )       join  把里面的东西拿出来,进行拼接 s="_". ...

  4. zz高精地图和定位在自动驾驶的应用

    本次分享聚焦于高精地图在自动驾驶中的应用,主要分为以下两部分: 1. 高精地图 High Definition Map 拓扑地图 Topological Map / Road Graph 3D栅格地图 ...

  5. luoguP4097 [HEOI2013]Segment

    题意 李超树板子题. 对每个区间维护该区间中点\(mid\)的最优线段. 插入一个线段: 求出这个线段的斜率和截距,注意特判无斜率的情况,得到\(y=kx+b\). 之后开始在线段树上插入,假设当前节 ...

  6. github 入门教程之 github 访问速度太慢怎么办

    github 是全世界最流行的开源项目托管平台,其代表的开源文化从根本上改变了软件开发的方式. 基本上所有的需求都能从 github 上或多或少找到现成的实现方案,再也不用重头开始造轮子而是自定义轮子 ...

  7. 关于XSS攻击

    1.XSS XSS(Cross Site Scripting)攻击全称跨站脚本攻击,为了不与CSS(Cascading Style Sheets)混淆,故将跨站脚本攻击缩写为XSS,XSS是一种经常出 ...

  8. sessionStorage 、localStorage 、 cookie 和session之间的区别

    四者的异同 特性 Session   Cookie localStorage sessionStorage 数据的生命期   在一定时间内保存在服务器上.当访问增多,会比较占用你服务器的性能,考虑到减 ...

  9. 一种单机支持 JavaWeb 容器万级并发的设想

    当前的大部分 Java web 容器基于 Bio 线程模型,例如常见的 tomcat ,默认 200 线程,即 200 连接.由此带来的问题是,如果想提高并发,或者提高资源利用率,就得加大线程数. 如 ...

  10. Mac 电脑无法登陆 账号了

    版本:10.14.2 每次输入用户名和密码都没有反应: 进入 命令行执行: defaults delete com.apple.appstore.commerce Storefront 然后重启机器, ...