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

宙哈哈

背景

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

验证行式

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

嵌入式

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

下面是前端调用代码：

[HTML] 纯文本查看 复制代码

<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>

触发式

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

鼠标悬停显示验证码：

[HTML] 纯文本查看 复制代码

/* 触发式 */
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.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);
}

弹窗式

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

创建弹窗并显示/隐藏：

[HTML] 纯文本查看 复制代码

/* 触发式 */
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.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);
}

总结

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

宙哈哈

jundao333 发表于 2023-3-9 17:53
这是什么编程写的？

这个用python开发的

jundao333

这是什么编程写的？