在网站开发的登录页面中，经常会需要使用到图形验证码来验证。在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. fetchone函数和fetchall函数返回值的区别

     fetchone函数和fetchall函数返回值的区别 1.fetchone() 返回单个的元组,也就是一条记录(row),如果没有结果,则python返回 None 有结果时,如图: 没结果时,如 ...

  2. XposedInstaller 是如何安装的

    Launcher 如何通过startActivity 传送一个 intent 到 zygote 如何 接收到它并且 fork出该app的进程的? 安装框架的时候会现有各种检查,比如当前系统版本等 下载 ...

  3. 6.1 Spark SQL

    一.从shark到Spark SQL Hive能够把SQL程序转换成map-reduce程序   可以把Hadoop中的Hive看作是一个接口,主要起到了转换的功能,并没有实际存储数据. Shark即 ...

  4. Go命令行库Cobra的核心文件root.go

    因为docker及Kubernetes都在用cobra库,所以记录一下. 自定义的地方,高红标出. root.go /* Copyright © 2019 NAME HERE <EMAIL AD ...

  5. ACM-求质因数

    求输入数字的所有质因数,并将所有质因数进行排序,并以质因数+空格的形式输出 #include <iostream> #include <string> #include < ...

  6. c# 第29节 类

    本节内容: 1:类是什么 2:声明类 3:类的使用 1:类是什么 2:声明类 在生产上的声明:如下操作   或者快捷操作 ctrl+shift+a 键 出现如下界面: 3:类的使用 using Sys ...

  7. oracle 数据库下所有表结构、数据量及缺失值统计

    表结构 SELECT t1.TABLE_NAME, t1.COLUMN_NAME, t1.DATA_TYPE || '(' || t1.DATA_LENGTH || ')', t2.COMMENTS ...

  8. 01_javaSE面试题:自增变量

    开启刷面试题,都是根据视频进行刷面试题的 自增变量,只要记住两点 i++ 是先赋值后计算 ++i 是先计算后赋值 看下面的代码 int i = 1; i = i++; int j = i++; int ...

  9. 补充： Nginx

    1. 定义: Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器: 特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现 ...

  10. stm32按键配置

    前言:我们都知道开发板上除了有经典的流水灯之外,还有一个必备的练习硬件--按键(key),下面继续来完成按键的配置. 1.通过查看原理图,找出按键(key)的管脚名字和对应芯片上的I/O口,四个I/O ...