Django-实现登录图文验证

• 图文验证码组件

pip install django-simple-captch

• 官网
  https://django-simple-captcha.readthedocs.io/en/latest/usage.html
• 参考网站:
  • https://my.oschina.net/hellotest/blog/1623597
  • https://blog.****.net/ros_donggua/article/details/81024634

第一步: 安装图文验证组件

pip install django-simple-captch

第二步: 图文插件配置

1. 导入图文插件App

# 第1 导入App
INSTALLED_APPS = [
...
'captcha',
]

2. 导入图文插件url

path('captcha/', include('captcha.urls')),

3. 迁移生成数据库

# 自动生成admin系列表, 和 图文验证码captcha表
python manage.py makemigrations
python manage.py migrate

第三步: 添加form表单类

forms.py

#一般将一些表单类写到同一个forms.py文件里
from captcha.fields import CaptchaField
from django import forms
class RegisterForm(forms.Form):
	#为生成的验证码图片，以及输入框.
	#captcha = CaptchaField(error_messages={'invalid': '验证码输入有误'})
	captcha = CaptchaField()

第四步: 页面初始化时生成验证码表单项

#跳转到首页时自动生成
def index(request):
	#生成验证码表单
	register_form = RegisterForm()
	return render(request, 'index.html', {'register_form': register_form})

第五步: 前端使用

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
验证码:{{ register_form.captcha }}
</div>

此时网页渲染时会自动生成表单验证

<img src="/captcha/image/2f3f82e5f7a054bf5caa93b9b0bb6cc308fb7011/" alt="captcha"
class="captcha" />
<input id="id_captcha_0" name="captcha_0" type="hidden"
value="2f3f82e5f7a054bf5caa93b9b0bb6cc308fb7011" />
<input autocomplete="off" id="id_captcha_1" name="captcha_1" type="text" />

第六步: 刷新和验证

views

# 验证码刷新
def img_refresh(request):
    if not request.is_ajax():
        return HttpResponse('不是Ajax请求')
    new_key = CaptchaStore.generate_key()
    to_json_response = {
        'hashkey': new_key,
        'image_url': captcha_image_url(new_key),
    }
    return HttpResponse(json.dumps(to_json_response))


# 验证
def img_check(request):
    print('验证用户输入的图片验证码...')
    if request.is_ajax():
        cs = CaptchaStore.objects.filter(response=request.GET.get('code'),
                                         hashkey=request.GET.get('hashkey'))
        print(cs)
        if cs:
            json_data = {'status': 1}
        else:
            json_data = {'status': 0}
        return JsonResponse(json_data)
    else:
        # raise Http404
        json_data = {'status': 0}
        return JsonResponse(json_data)

这个app功能比较强大,它会自动提取 用户提交的验证码并与数据库进行比对,不需要开发人员进行操作比对

第七步: 前端刷新和验证Ajax

 <script>
             //刷新图片验证码
            $(function(){
            //刷新
                    $('.captcha').click(function(){
                    $.getJSON("/user/img_refresh/",function(result){
                    $('.captcha').attr('src', result['image_url']);
                    $('#id_captcha_0').val(result['hashkey'])
                    });
                    return false;
                    })
                    //验证
                    $('#id_captcha_1').blur(function(){
                    console.log('用户输入的:'+$('#id_captcha_1').val())
                    // 获取输入框和隐藏字段id_captcha_0的数值
                    code= $('#id_captcha_1').val();
                    hashkey=$('#id_captcha_0').val();
                    $.getJSON('/user/img_check',
                    {'code':code,'hashkey':hashkey},function(res){
                    //1 验证码正确,0验证码错误
                    alert('验证判断结果...:'+res)
                    if(res.status){
                        $("#msg").html('验证码正确')
                    }else{
                        $("#msg").html('验证码错误')
                    }
                })
                })
            })
        </script>

第八步: 精细化setting配置

# django_simple_captcha 验证码配置其他配置项查看文档
# 默认格式
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', # 点
)
# 图片中的文字为随机英文字母，如 mdsh
CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.random_char_challenge'
# 图片中的文字为数字表达式，如2+2=
#CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.math_challenge'
# 超时(minutes)
CAPTCHA_TIMEOUT = 1