博客-1-登录

最新推荐文章于 2020-04-22 21:22:58 发布

冥想10分钟大师

最新推荐文章于 2020-04-22 21:22:58 发布

阅读量205

点赞数

分类专栏： Django

本文链接：https://blog.csdn.net/qq_31235811/article/details/90611724

版权

Django 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>欢迎登录</title>
	<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="/static/mystyle.css">
</head>
<body>

<div class="container">
	<div class="row">
		<form class="form-horizontal col-md-6 col-md-offset-3 login-form">
			{% csrf_token %}
			<div class="form-group">
				<label for="username" class="col-sm-2 control-label">用户名</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="username" name="username" placeholder="用户名">
				</div>
			</div>
			<div class="form-group">
				<label for="password" class="col-sm-2 control-label">密码</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" id="password" name="password" placeholder="密码">
				</div>
			</div>
			<div class="form-group">
				<!-- 放置极验的滑动验证码 -->
				<div id="popup-captcha"></div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="button" class="btn btn-default" id="login-button">登录</button>
					<span class="login-error"></span>
				</div>
			</div>
		</form>
	</div>
</div>

<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- 引入封装了failback的接口--initGeetest -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<script>

	// 极验 发送登录数据的
	var handlerPopup = function (captchaObj) {
		// 成功的回调
		captchaObj.onSuccess(function () {
			var validate = captchaObj.getValidate();
			// 1. 取到用户填写的用户名和密码 -> 取input框的值
			var username = $("#username").val();
			var password = $("#password").val();
			$.ajax({
				url: "/login/", // 进行二次验证
				type: "post",
				dataType: "json",
				data: {
					username: username,
					password: password,
					csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
					geetest_challenge: validate.geetest_challenge,
					geetest_validate: validate.geetest_validate,
					geetest_seccode: validate.geetest_seccode
				},
				success: function (data) {
					console.log(data);
					if (data.status) {
						// 有错误，在页面上提示
						$(".login-error").text(data.msg);
					} else {
						// 登陆成功
						location.href = data.msg;
					}
				}
			});
		});

		 $("#login-button").click(function () {
			captchaObj.show();
		});
		// 将验证码加到id为captcha的元素里
		captchaObj.appendTo("#popup-captcha");
		// 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
	};
	// 当input框获取焦点时将之前的错误清空
	$("#username,#password").focus(function () {
		// 将之前的错误清空
		$(".login-error").text("");
	});

	// 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）
	$.ajax({
		url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
		type: "get",
		dataType: "json",
		success: function (data) {
			// 使用initGeetest接口
			// 参数1：配置参数
			// 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
			initGeetest({
				gt: data.gt,
				challenge: data.challenge,
				product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
				offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
				// 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
			}, handlerPopup);
		}
	})
</script>
</body>
</html>

路由函数

from blog import views
urlpatterns = [
	url(r'^login/', views.login),
	# 极验滑动验证码 获取验证码的url
	url(r'^pc-geetest/register', views.get_geetest),
]

视图函数

#登录视图
def login(request):
	if request.method == "POST":
		# 初始化一个给AJAX返回的数据
		ret = {"status": 0, "msg": ""}
		# 从提交过来的数据中 取到用户名和密码
		username = request.POST.get("username")
		pwd = request.POST.get("password")
		# 获取极验 滑动验证码相关的参数
		gt = GeetestLib(pc_geetest_id, pc_geetest_key)
		challenge = request.POST.get(gt.FN_CHALLENGE, '')
		validate = request.POST.get(gt.FN_VALIDATE, '')
		seccode = request.POST.get(gt.FN_SECCODE, '')
		status = request.session[gt.GT_STATUS_SESSION_KEY]
		user_id = request.session["user_id"]

		if status:
			result = gt.success_validate(challenge, validate, seccode, user_id)
		else:
			result = gt.failback_validate(challenge, validate, seccode)
		if result:
			# 验证码正确
			# 利用auth模块做用户名和密码的校验
			user = auth.authenticate(username=username, password=pwd)
			if user:
				# 用户名密码正确
				# 给用户做登录
				auth.login(request, user)  # 将登录用户赋值给 request.user
				ret["msg"] = "/index/"
			else:
				# 用户名密码错误
				ret["status"] = 1
				ret["msg"] = "用户名或密码错误！"
		else:
			ret["status"] = 1
			ret["msg"] = "验证码错误"

		return JsonResponse(ret)
	return render(request, "login.html")
	
# 请在官网申请ID使用，示例ID不可使用
pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"
pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"

# 处理极验 获取验证码的视图
def get_geetest(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)