在网站开发的登录页面中，经常会需要使用到图形验证码来验证。在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. Anaconda3使用

    1.使用conda安装各种包到指定路径下的环境, conda install --prefix=/home/xxx/PycharmProjects/project_01/env numpy 2.安装指 ...

  2. 1.Python网络编程_UDP(简略版)

    # -*- coding: utf-8 -*- #2019-11-24 import socket def recv(): udp_socket=socket.socket(socket.AF_INE ...

  3. 【bzoj4559】[JLoi2016]成绩比较（dp+拉格朗日插值）

    bzoj 题意: 有\(n\)位同学,\(m\)门课. 一位同学在第\(i\)门课上面获得的分数上限为\(u_i\). 定义同学\(A\)碾压同学\(B\)为每一课\(A\)同学的成绩都不低于\(B\ ...

  4. 初学JavaScript正则表达式(二)

    正则表达式的实例化与标识符 字面量: var reg = /\bis\b/g // \b--字符边界 g全文搜索 查找单词为is的字符 He is a boy. IS He? 构造函数: var re ...

  5. day79_10_28git使用基础

    一.git与svn比较. git就是版本控制器,控制的对象是开发的项目代码. 可以根具时间轴进行回滚代码,改变代码版本. svn的特点就是服务版与用户版分离,当开发这需要进行开发时,需要先在代码仓库中 ...

  6. SQL Server 修改数据库

    1. 可视化界面修改数据库 (1)右击数据库,然后选择属性. (2)在工具选项卡中,选择[文件]页,可以更改所有者,文件大小,自增量等参数. 2.  使用ALTER Database修改数据库 (1) ...

  7. DRF--介绍和安装

    前后端不分离 在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高.这种应用模式比较适合纯网页应用,但是当后端对接 ...

  8. [转]python 中的[:-1]和[::-1]

    转自:https://blog.csdn.net/mingyuli/article/details/81604795 1.案例解释a='python'b=a[::-1]print(b) #nohtyp ...

  9. 小明工具箱<Excel 插件><VSTO 插件>

    当前版本:1.0.42.7118(更新日期:2019年6月28日) 下载地址:点击下载 功能和简介: 本程序为 Excel 2010 版本以上的插件,含以下功能: 拆分工作簿:将一个或多个工作簿中的每 ...

  10. Nginx+Tomcat+Memcache 实现session共享

    Nginx + Tomcat + Memcache 实现session共享 1. Nginx 部署 1.上传源码包到服务器,解压安装 下载地址:http://nginx.org/en/download ...