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

举报
yd_281370284 发表于 2023/03/09 10:53:26 2023/03/09
【摘要】 最近在做关于验证码项目的时候,从交互的角度梳理了验证码的验证行式,今天总结一下验证码在产品中出现的验证行式。

背景

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

验证行式

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

嵌入式

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

下面是前端调用代码:

<script src="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>
<div id="captchaBox">载入中 ...</div>

触发式

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

鼠标悬停显示验证码:

/* 触发式 */
if(kgConfig["type"] === 2){
    /* 点击区域外隐藏伸缩框 */
    document.addEventListener("mousedown", function(e){
        var str = e.target.childNodes;
        if(e.target.id){
            outside = e.target.id !== "KgBasemap";
        } else {
            var outside = true;  /* 是否为外部点击 */
            for (var i = 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){
    var popupButton = 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并输出弹窗模板 */
    var add_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) {
        return target.style.display;
    } else {
        if (state === 0) {
            target.style.display = "none";
        } else {
            target.style.display = "block";
        }
    }
}

总结

以上就是文章的全部内容,下面附上示例代码一份:https://github.com/KgCaptcha,和示例体验地址:https://www.kgcaptcha.com/demo/,2023年在这新的一年里,加油吧!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。