图形验证码验证行式的笔记-阿里云开发者社区

图形验证码验证行式的笔记

2023-03-07 109

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 最近在做关于验证码项目的时候，从交互的角度梳理了验证码的验证行式，今天总结一下验证码在产品中出现的验证行式。

背景

最近在做关于验证码项目的时候，从交互的角度梳理了验证码的验证行式，今天总结一下验证码在产品中出现的验证行式。

验证行式

图形验证码通过用户的操作来完成验证，常见的验证行式有嵌入式、触发式、弹窗式。

嵌入式

验证码直接完整嵌入网页，清晰直观，便于用户使用和广告宣传。

下面是前端调用代码：

<scriptsrc="https://cdn8.kgcaptcha.com/captcha.js?appid=94dATYQa"></script><script>kg.captcha({
// 绑定元素，验证框显示区域bind: "#captchaBox",
// 验证成功事务处理success: function(e) {
console.log(e);
    },
// 验证失败事务处理failure: function(e) {
console.log(e);
    },
// 点击刷新按钮时触发refresh: function(e) {
console.log(e);
    }
});
</script><divid="captchaBox">载入中 ...</div>

触发式

默认只显示滑动条，鼠标悬停互动显示验证图片，广泛用于任何场景，不影响网站的排版和美观。

鼠标悬停显示验证码：

/*触发式*/if(kgConfig["type"] ===2){
/*点击区域外隐藏伸缩框*/document.addEventListener("mousedown", function(e){
varstr=e.target.childNodes;
if(e.target.id){
outside=e.target.id!=="KgBasemap";
        } else {
varoutside=true;  /*是否为外部点击*/for (vari=0; i<str.length; i++) {
if (str[i].id==="KgBasemap") {
outside=false;
                }
            }
if (str.length===0){
outside=false;
            }
        }
if (outside) {
/*隐藏拼图区域*/kg.show(kg.$(param["bind"] +" #KgBasemap"), 0);
        }
    });
}
/*触发式(向上/下)显示拼图区域*/if(kgConfig["type"] ===2){
if (param["float"] ==="down"){
kg.$(param["bind"] +" #KgBasemap").className="KgBasemapDown";
    }
kg.show(kg.$(param["bind"] +" #KgBasemap"), 1);
}

弹窗式

默认不显示验证码，点击提交、确定、发送等触发验证。体验相对来说会更加友好，适用场景也更广泛。

创建弹窗并显示/隐藏：

/*弹出式拼图*/if(kgConfig["type"] ===3){
varpopupButton=kg.default(param["button"], "#captchaButton");  /*弹出式按钮id*/param["bind"] =kg.popupAddId;  /*创建新弹窗ID*//*刷新时，删除上次创建的弹出窗口DIV，重新创建*/if(kg.$(param["bind"])){kg.$(param["bind"]).parentNode.removeChild(kg.$(param["bind"]));}
/*在Button前创建一个DIV并输出弹窗模板*/varadd_div=document.createElement("div");
add_div.id=kg.popupAddId.substring(1);  /*去除# */add_div.innerHTML=kgConfig["styleTpl"];
/*创建弹窗*//*1、body开始创建*/kg.$("body").insertBefore(add_div, kg.$("body").childNodes[0]);
/*2、当前按钮前创建kg.$(popupButton).parentNode.insertBefore(add_div, kg.$(popupButton)); *//*弹出事件绑定*/kg.$(popupButton).onclick=function(e){
popup(1);
    }
/*关闭按钮事件绑定*/kg.$(param["bind"] +" #KgPuzzleTitle ol:nth-child(2) img").onclick=function(e){
popup(0);
    }
kg.$(param["bind"] +" #KgPuzzleBody").onclick=function(e){
popup(0);
    }
}
/*设置元素为显示/隐藏状态，获取元素显示/隐藏状态*//*target: 需要设置/获取的元素对象，kg.$("#div"); *//*state: [0|1] 0设置为隐藏状态、1设置为显示状态、忽略该参数为获取display状态*/show: function (target, state) {
if (state===undefined) {
returntarget.style.display;
    } else {
if (state===0) {
target.style.display="none";
        } else {
target.style.display="block";
        }
    }
}