django使用captcha完成图片验证码_django captcha

使用captcha

1:需要下载包:

pip install  django-simple-captcha
1

2: 然后在settings的INSTALLED_APPS添加:

'captcha'
1
'
运行
运行

3: 需要生成数据库表

python manage.py migrate
1

4: 然后在urls中注册路由:

from captcha.views import captcha_refresh
from django.conf.urls import url,include

url("^captcha/",include('captcha.urls'))
url:地址是可以进行正则表达式的
1
2
3
4
5

5.在相应的app下创建一个forms文件:

from django import forms
from captcha.fields import CaptchaField     
class DynamicLoginForm(forms.Form):
    captcha=CaptchaField()
1
2
3
4

6:在返回登陆页面的view类:
导入刚刚创建的forms类
并返回实例化的form类

from apps.users.forms import LoginForm,DynamicLoginForm
login_form=DynamicLoginForm()
        return render(request,"html/login.html",{
            "login_form":login_form
        })
1
2
3
4
5

7: 在HTML中配置

{{ login_form.captcha }}
1

:8:效果

{{ login_form.captcha }}
1

换图片验证码

看看刚刚配置好的图片验证码,需要将这些数据也提交,而且用户点击换一张验证码,这些数据也必须要跟着变

在JS配置：

//向服务器发送验证码请求，并将前端验证码框的参数进行替换
function refresh_captcha(event){
    $.get("/captcha/refresh/?"+Math.random(), function(result){
        $('#jsRefreshCode img.captcha').attr("src",result.image_url);
        $('#id_captcha_0').attr("value",result.key);
    });
    return false;
}
$(function() {
	//当用户点击换验证码调用发送验证码请求
	$('#jsRefreshCode img.captcha').on('click', function(){
	    refresh_captcha();
	});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

提交图片验证码

提交图片验证码需要这两个参数一并提交所以得用Ajax提交


JS:

$(function() {
    // 发送手机验证码
    $('#jsSendCode').on('click',function(){
        send_sms_code(this,$('#jsMobileTips'));
    });
    //发送手机验证码
    function send_sms_code(sendBtn,tipsId){
        var $sendBtn = $(sendBtn),
            $tipsId = $(tipsId),
            $inpRegMobile = $("#jsRegMobile"),
            $inpRegCaptcha = $('#id_captcha_1'),
            verify = verifyDialogSubmit(
                [
                    {id: '#jsRegMobile', tips: Dml.Msg.epPhone, errorTips: Dml.Msg.erPhone, regName: 'phone', require: true},
                    {id: '#id_captcha_1', tips: Dml.Msg.epVerifyCode, errorTips: Dml.Msg.erVerifyCode, regName: 'verifyCode', require: true}
                ]
            );
        if(!verify){
            return;
        }
        $.ajax({
            cache: false,
            type: 'post',
            dataType:'json',
            url:"/send_sms/",
            data:{
                mobile:$inpRegMobile.val(),
                "captcha_1":$inpRegCaptcha.val(),
                "captcha_0":$('#id_captcha_0').val(),
            },
            async: true,
            beforeSend:function(XMLHttpRequest){
                $sendBtn.val("发送中...");
                $sendBtn.attr("disabled","disabled");
            },
            success: function(data){
                $sendBtn.removeAttr("disabled");
                $sendBtn.val("发送验证码");
                if(data.mobile){
                    Dml.fun.showValidateError($inpRegMobile, data.mobile);
                    refresh_captcha({"data":{"form_id":"jsRefreshCode"}});
                }else if(data.captcha){
                    Dml.fun.showValidateError($inpRegCaptcha, data.captcha);
                    refresh_captcha({"data":{"form_id":"jsRefreshCode"}});
                }else if(data.msg){
                    Dml.fun.showValidateError($inpRegMobile, data.msg);
                    $sendBtn.val("重新发送");
                    refresh_captcha({"data":{"form_id":"jsRefreshCode"}});
                }else if(data.status == 'success'){
                    Dml.fun.showErrorTips($tipsId, "短信验证码已发送");
                    $sendBtn.attr("disabled","disabled");
                    show_send_sms(60);
                }
            }
        });
    }
});	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

这样提交后会出现关于scrf的相关问题,直接在后端使用send_sms取消csrf验证

from django.views.decorators.csrf import csrf_exempt

from apps.users.views import LoginView, LogoutView, SendSmsView
import xadmin

urlpatterns = [
    # path('admin/', admin.site.urls),
    path('xadmin/', xadmin.site.urls),
    path('', TemplateView.as_view(template_name="html/index.html"),name='index'),
    # 登陆
    path('login/', LoginView.as_view(),name='login'),
    # 退出
    path('logout/', LogoutView.as_view(),name='logout'),
    # 图片验证码
    url("^captcha/",include('captcha.urls')),
    # 发送手机短信验证码
    url("^send_sms/",csrf_exempt(SendSmsView.as_view())),
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18