使用python实现滑动验证码功能

时间：2021-05-22

首先安装一个需要用到的模块

pip install social-auth-app-django

安装完后在终端输入pip list会看到

social-auth-app-django 3.1.0social-auth-core 3.0.0

然后可以来我的github，下载关于滑动验证码的这个demo：https://github.com/Edward66/slide_auth_code

下载完后启动项目

python manage.py runserver

启动这个项目后，在主页就能看到示例

前端部分

随便选择一个（最下面的是移动端，不做移动端不要选）把html和js代码复制过来，我选择的是弹出式的。这里面要注意他的ajax请求发送的网址，你可以把这个网址改成自己视图函数对应的网址，自己写里面的逻辑，比如我是为了做用户登陆验证，所以我是写的逻辑是拿用户输入的账号、密码和数据库里的做匹配。

login.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登陆页面</title> <link rel="stylesheet" href="/static/blog/css/slide_auth_code.css" rel="external nofollow" > <link rel="stylesheet" href="/static/blog/bs/css/bootstrap.css" rel="external nofollow" ></head><body><h3>登陆页面</h3><div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="popup"> <form id="fm"> {% csrf_token %} <div class="form-group"> <label for="id_user">用户名：</label> <input name="user" id="id_user" class="form-control" type="text"> </div> <div class="form-group"> <label for="id_pwd">密码：</label> <input name="pwd" id="id_pwd" class="form-control" type="password"> </div> <input class="btn btn-default" id="popup-submit" type="button" value="提交"> <span id="error-info"></span> <a href="{% url 'blog:register' %}" rel="external nofollow" class="btn btn-success pull-right">注册</a> </form> <div id="popup-captcha"></div> </div> </div> </div></div><script src="/static/blog/js/jquery-3.3.1.js"></script><script src="/static/blog/js/gt.js"></script><script src="/static/blog/js/slide_auth_code.js"></script>

login.js

let handlerPopup = function (captchaObj) { // 成功的回调 captchaObj.onSuccess(function () { let validate = captchaObj.getValidate(); $.ajax({ url: "", // 进行二次验证 type: "post", dataType: "json", data: $('#fm').serialize(), success: function (data) { if (data.user) { location.href = '/index/' } else { $('#error-info').text(data.msg).css({'color': 'red', 'margin-left': '10px'}); setTimeout(function () { $('#error-info').text(''); }, 3000) } } }); }); $("#popup-submit").click(function () { captchaObj.show(); }); // 将验证码加到id为captcha的元素里 captchaObj.appendTo("#popup-captcha"); // 更多接口参考：http:///install/sections/idx-client-sdk.html#config }, handlerPopup); }});

views.py

根据需求自己写逻辑

总结：滑动验证主要用到的是js部分，只需修改ajax里传递的值就好，后台逻辑自己写。

以上所述是小编给大家介绍的使用python实现滑动验证码功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章