行为式验证码

整体概述

关键字：交互验证码、图形验证码、互动验证码、行为式验证码
相关算法：相似度算法、
代码框架
- java后台：api及交互方式代码分类，高度扩展，
- 前台交互：通过js闭包方式对框架进行处理，核心代码和交互插件分类、通过webpack方法打包
- Demo 地址

TODO

[√] 拼图验证

[√] 顺序点击验证

[ ] 语义验证

[ ] 图片旋转验证

调用方式

后端调用

maven引用

<dependencies>
        <dependency>
            <artifactId>captcha-api</artifactId>
            <groupId>com.jsonljd</groupId>
            <version>${当前版本}</version>
        </dependency>
        <dependency>
            <artifactId>captcha-core</artifactId>
            <groupId>com.jsonljd</groupId>
            <version>${当前版本}</version>
        </dependency>
<dependencies>

web使用

    @Autowired
    private DefaultHttpServletBuildFactory httpServletBuildFactory;


    /**
    * 生产验证码类型
    **/
    @RequestMapping("/captcha")
    @ResponseBody
    public String captcha(HttpServletRequest request, String handler) {
        WebBizMakeImageHandler webBizMakeImageHandler = new WebBizMakeImageHandler();
        Map<String, Object> params = new HashMap<>();
        params.put("HANDLER_TYPE", "puzzle".equalsIgnoreCase(handler) ? ConstUtil.CONS_PUZZLE_HANDLER : ConstUtil.CONS_POINT_CLICK_HANDLER);
        //params.put(ConstUtil.KEY_IMG_BG_HEIGHT, 130); //设置背景图高[选项]  默认 130
        
        //params.put(ConstUtil.KEY_IMG_BG_WIDTH, 300);  //设置背景图宽[选项]  默认 300

        //params.put(ConstUtil.CON_BG_HANDLER,new SelfBgHandler()); //设置背景图选择接口[选项]  默认内置随机图

        //params.put(ConstUtil.KEY_POINT_DIS_RADIUS,60D); //设置点击距离半径范围[选项]  默认 60D

        //params.put(ConstUtil.KEY_IMG_PUZZLE_RADIUS, 10F);//设置拼图圆半径[选项]  默认 10F

        //params.put(ConstUtil.KEY_IMG_PUZZLE_SPLIT_LINE, 30F);//设置拼图直线长度[选项]  默认 30F

        webBizMakeImageHandler.setParams(params);
        httpServletBuildFactory.buildCaptcha(webBizMakeImageHandler);
        HttpSession session = request.getSession();
        session.setAttribute(CAPTCHA_KEY, webBizMakeImageHandler.getStoreForVerifyStr());
        return webBizMakeImageHandler.getOutputForViewStr();
    }

    /**
    * 校验验证码
    **/
    @RequestMapping(value = "/verifiCode", method = RequestMethod.POST)
    @ResponseBody
    public String verifiCode(HttpServletRequest request, @RequestBody String iptData) {
        WebBizVerifiCodeHandler webBizMakeImageHandler = new WebBizVerifiCodeHandler();
        HttpSession session = request.getSession();
        webBizMakeImageHandler.setOrgData(session.getAttribute(CAPTCHA_KEY).toString());
        webBizMakeImageHandler.setIptData(iptData);
        Boolean verifiResult = httpServletBuildFactory.verifiCode(webBizMakeImageHandler);
        return verifiResult.toString();
    }

前端引用

<script src="jquery-3.4.1.min.js"></script>
<script src="/js/captcha.js"></script>


<script type="application/javascript">
    var conf = {'content':'can'};

    var callback = function(data,postStatus){
        $.ajax({
            url : "<%=request.getContextPath()%>/verifiCode",
            type : "POST",
            dataType: 'text',
            contentType:'application/json;charset=UTF-8',
            data:data,
            success : function(result) {
                if(result=="false") {
                    postStatus(false,function(){
                        init();
                    });

                }else{
                    postStatus(true,function(){
                        alert("success");
                        init();
                    });
                }
            }
        });
    }

    var init = function(){
        $.ajax({
            url : "<%=request.getContextPath()%>/captcha?handler="+$('input:radio:checked').val(),
            success : function(result) {
                fastCaptcha.captcha(conf).build(result,callback);
            }
        });
    }

    $(function(){
        init();
    });

    $('input:radio').change(function(){
        init();
    });
</script>

前端概述

设计原则

基础代码和扩展代码分类
不同行为通过插件方式嵌入
可通过打包工具进行代码编译及发布，合理的管理代码

架构设计

概述

通过webpack工具进行打包、压缩、混淆。核心代码与可扩展行为交互代码分开关联。最后打包成最后文件。

文件说明

/core.js 核心基础文件

/plugin/jigsaw.js 拼图交互文件

/plugin/point-click.js 点击方式交互文件

方法调用

    var conf = {'content':'can'}; //设置参数

    var callback = function(data){  //创建回调函数 进行验证
        $.ajax({
            url : "/verifiCode",
            type : "POST",
            dataType: 'text',
            contentType:'application/json;charset=UTF-8',
            data:data,
            success : function(result) {
                if(result=="false") {
                    init();
                }else{
                    alert("success");
                    init();
                }
            }
        });
    }

    var init = function(){
        $.ajax({
            url : "/captcha?handler="+$('input:radio:checked').val(),
            success : function(result) {
                jsonljd.captcha(conf).build(result,callback);   //调用验证创建函数，并渲染数据，传入回调方法。
            }
        });
    }

    $(function(){
        init();
    });

    $('input:radio').change(function(){
        init();
    });

扩展考虑

交互方式通过插件的方式进行，通过调用核心类中的plugin方法把，交互方式加入到框架当中。

    var 插件对象 = {
        name:"插件名称",
        build:function(
        
        /*
        配置对细节
        conf.unit //核对代码中的方法对象
        conf.captchaData.params  //交互的验证数据对象参数
        conf.bgWidth    验证图的背景宽
        conf.bgHight    验证图的背景高
        */
        conf ,
        
         /*交互结束后的回调函数*/
        callbak){
        }
    };

jsonljd.plugin(插件对象); //调用插件方法，把插件对象加入框架中。

实例：

var pulgin_demo = {
    name:'demo',
    build:function(conf,callbak){
        var obj = {};
        callbak(obj);
    }
}
    jsonljd.plugin(pulgin_demo);

打包方式

#   npm run build  //构建

jsonljd / captcha Goto Github PK

captcha's Introduction

行为式验证码

整体概述

调用方式

后端调用

maven引用

web使用

前端引用

前端概述

设计原则

架构设计

概述

文件说明

方法调用

扩展考虑

打包方式

后端概述

设计原则

架构设计

整体说明

架构图

接口说明

主要方法

核心方法

扩展设计

调用方法

特别说明

captcha's People

Contributors

Stargazers

Watchers

Forkers

captcha's Issues

Recommend Projects

Recommend Topics

Recommend Org