【Django】使用geetest实现滑动验证

需导入模块social-auth-app-django 和geetest 提前去官网下载gt.js或者引入http://static.geetest.com/static/tools/gt.js

效果图：

【Django】使用geetest实现滑动验证

html:

    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-default login">
                    <div class="panel-heading">
                        <p class="h3">登录&nbsp;&nbsp;Rango博客账号</p>
                        <p>请在下面的输入框中输入您的用户名和密码</p>
                    </div>
                    <div class="panel-body">
                        <div>
                            {% csrf_token %}
                            <div class="form-group">
                                <input type="text" class="form-control input-lg" name="user" placeholder="用户名">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control input-lg" name="pwd" placeholder="密码">
                            </div>
                            <div class="form-group popup-div">
                                <!-- 放置极验的滑动验证码 -->
                                <span >验证码加载中...</span>
                                <div ></div>

                            </div>
                            <div class="form-group">
                                <button class="btn btn-block btn-primary btn-lg" >登录</button>
                            </div>
                            <a href="/register/">注册</a>
                            |
                            <a href="">找回密码</a>
                            <strong ></strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>


<!-- geetest -->
{#    <script src="http://static.geetest.com/static/tools/gt.js"></script>#}
    <script src="/static/js/gt.js"></script>
    <script src="/static/js/login.js"></script>

js:


// 极验滑动验证码
var handlerPopup = function (captchaObj) {
    // appendTo方法用于将验证按钮插到宿主页面，使其显示在页面上。
    captchaObj.appendTo('#popup-captcha');
    // onReady监听验证按钮的 DOM 生成完毕事件
    captchaObj.onReady(function () {
        $("#wait").attr('class', 'hidden');
    });

    // onSuccess:监听验证成功事件，进行二次验证
    captchaObj.onSuccess(function () {
        $("#login-button").removeAttr('disabled');
        $("#login-button").removeAttr('title');
    });

    $("#login-button").click(function () {
        // getValidate:获取用户进行成功验证(onSuccess)所得到的结果，该结果用于进行服务端 SDK 进行二次验证。
        var validate = captchaObj.getValidate();
        if (!validate) {
            return 0;
        } else {
            $.ajax({
                url: "/login/", // 进行二次验证
                type: "post",
                dataType: "json",
                data: {
                    username: $('input[name="user"]').val(),
                    password: $('input[name="pwd"]').val(),
                    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),

                    geetest_challenge: validate.geetest_challenge,
                    geetest_validate: validate.geetest_validate,
                    geetest_seccode: validate.geetest_seccode,
                },
                success: function (data) {
                    if (data.status) {
                        $('#error').text(data.msg);
                        captchaObj.reset();  // 让验证回到初始状态
                    } else {
                        location.href = data.msg;
                    }
                },
            });
        }
    });
};

// 当input框获取焦点时将之前的错误清空
$('input[name="user"],input[name="pwd"]').focus(function () {
    // 将之前的错误清空
    $('#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,  // 验证 id，极验后台申请得到
            challenge: data.challenge,  // 验证流水号，后服务端 SDK 向极验服务器申请得到
            product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
            offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
            width: '100%',  // 设置按钮的长度
            // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
        }, handlerPopup);
    },
});

views:

from django.shortcuts import render, HttpResponse
from django.http import JsonResponse
from django.contrib import auth

from geetest import GeetestLib

# 请在官网申请ID使用
pc_geetest_id = "xxxxxxxxxxxxxxxxxxx"
pc_geetest_key = "xxxxxxxxxxxxxxxxxxx"


def login(request):
	if request.method == "POST":

		ret = {
			'status': None,
			'msg': '',
		}

		username = request.POST.get("username")
		password = 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=password)
			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")


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

urls:


urlpatterns = [
	path('admin/', admin.site.urls),
	path('login/', views.login),  # 登录视图
	path('register/', views.register),  # 注册视图
	path('index/', views.index),  # 首页
	re_path(r'^$', views.index),  # 首页

	url(r'^pc-geetest/register', views.get_geetest),
]

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：【Django】使用geetest实现滑动验证 - Python技术站