1 安装requests
pip install requests
2 拷贝你在网站上下载好的软件包下面的sdk下面的geetest文件到你的项目utils目录下面
3 拷贝代码到views.py
from utils.geetest import GeetestLib # 导入滑动验证码的模块#请在官网申请ID使用,示例ID不可使用pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"
def pcgetcaptcha(request): user_id = 'test'gt = GeetestLib(pc_geetest_id, pc_geetest_key) status = gt.pre_process(user_id) request.session[gt.GT_STATUS_SESSION_KEY] = status request.session["user_id"] = user_id response_str = gt.get_response_str()return HttpResponse(response_str)
4 把二次验证的ap12放到登录函数的里面
1 class LoginView(views.View): 2 def get(self, request): 3 return render(request, "login.html") 4 5 def post(self, request): 6 next_url = request.GET.get("next","/index/") 7 username = request.POST.get("username") 8 pwd = request.POST.get("password") 9 # v_code=request.POST.get("vcode","").upper() #如果用户不写验证码就是空10 # 滑动验证码开始11 gt = GeetestLib(pc_geetest_id, pc_geetest_key)12 challenge = request.POST.get(gt.FN_CHALLENGE, '')13 validate = request.POST.get(gt.FN_VALIDATE, '')14 seccode = request.POST.get(gt.FN_SECCODE, '')15 status = request.session[gt.GT_STATUS_SESSION_KEY]16 user_id = request.session["user_id"]17 if status:18 result = gt.success_validate(challenge, validate, seccode, user_id)19 else:20 result = gt.failback_validate(challenge, validate, seccode)21 #滑动验证码结束22 23 24 # if v_code==request.session.get("v_code"):25 if result:26 27 user_obj = auth.authenticate(username=username, password=pwd)28 if user_obj:29 auth.login(request, user_obj) # auth认证登录30 return redirect(next_url)31 else:32 return render(request, "login.html", {"error_msg": "用户名或密码错误"})33 else:34 return render(request, "login.html", {"error_msg": "验证码错误"})
View Code
5 urls里面添加url
这个路径是上面api1的路径
url(r'^ooxx/$', views.pcgetcaptcha),
6 修改login登录页面代码
<script src="/static/plugins/jquery-3.3.1.min.js"></script>{#<script src="/static/js/login.js"></script>#}<!-- 引入封装了failback的接口--initGeetest --> <script src="http://static.geetest.com/static/tools/gt.js"></script> <!--滑动验证码的ajax操作--> <script>var handlerEmbed = function (captchaObj) { $("#login-button").click(function (e) { var validate = captchaObj.getValidate();if (!validate) { $("#notice")[0].className = "show"; setTimeout(function () { $("#notice")[0].className = "hide"; }, 2000); e.preventDefault(); } });// 将验证码加到id为captcha的元素里,同时会有三个input的值:geetest_challenge, geetest_validate, geetest_seccode captchaObj.appendTo("#embed-captcha"); captchaObj.onReady(function () { $("#wait")[0].className = "hide"; });// 更多接口参考:http://www.geetest.com/install/sections/idx-client-sdk.html }; $.ajax({// 获取id,challenge,success(是否启用failback) url: "/ooxx/?t=" + (new Date()).getTime(), // 加随机数防止缓存 type: "get", dataType: "json", success: function (data) {// 使用initGeetest接口// 参数1:配置参数// 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件 initGeetest({ gt: data.gt, challenge: data.challenge, product: "embed", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效 offline: !data.success // 表示用户后台检测极验服务器是否宕机,一般不需要关注// 更多配置参数请参见:http://www.geetest.com/install/sections/idx-client-sdk.html#config }, handlerEmbed); } });</script>
View Code
7 修改存放验证码的div的id和button按钮的id,都要跟上面的js里面的一致
<div class="form-group" id="embed-captcha"><p id="wait" class="show">正在加载验证码......</p><p id="notice" class="hide">请先拖动验证码到相应位置</p> </div> button按钮增加一个id名字跟上面的一致<button type="submit" class="btn btn-success" id="login-button">登陆</button>