登录滑块验证

GEETEST

文档：http://docs.geetest.com/sensebot/apirefer/api/web#onSuccess-callback

背景

实习期间，安全部门提出后台管理系统的登录页面有隐患，要求在发送验证码前加入滑块验证。

实现

主要流程

<div id="captcha-box">
    <div id="loading-tip">加载中，请稍后...</div>
</div>

initGeetest({
	// 省略必须的配置参数

	product: 'float'
}, function (captchaObj) {
	captchaObj.appendTo("#captchaBox"); //将验证按钮插入到宿主页面中captchaBox元素内
	captchaObj.onReady(function(){
        // DOM 准备好后，隐藏 #loading-tip 元素
        // 仅作示例用，用您适合的方式隐藏即可
		document.getElementById('loading-tip').style.display = 'none';
	}).onSuccess(function(){
		const result = captchaObj.getValidate();

        // ajax 伪代码
        ajax('/api/gt-validate', {
            geetest_challenge: result.geetest_challenge,
            geetest_validate: result.geetest_validate,
            geetest_seccode: result.geetest_seccode,

            // 其他服务端需要的数据，比如登录时的用户名和密码
        }, function (data) {
            // 根据服务端二次验证的结果进行跳转等操作
            if (data.status === 'fail') {
                alert('用户名或密码错误，请重新输入并完成验证');
                captchaObj.reset(); // 调用该接口进行重置
            }else if(data.status === 'success'){
                // 结合业务逻辑，判断是否需要移除验证
                captchaObj.destroy();
            }
        });
	}).onError(function(){
		// 出错啦，可以提醒用户稍后进行重试
        // error 包含error_code、msg
	}).onClose(function () {
        // 用户把验证关闭了，这时你可以提示用户需要把验证通过后才能进行后续流程
    });
});