图形验证码

于 2017-07-04 18:01:28 发布
阅读量1.4k 收藏
点赞数
分类专栏： web前端 文章标签： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liona_koukou/article/details/74348043
版权

/*====================来自网络=====================*/

图形验证码

验证码的功能一般是防止使用程序恶意注册、暴力破解或批量发帖而设置的。所谓验证码，就是将一串随机产生的数字或符号，生成一幅图片，图片里加上一些干扰像素（防止OCR），由用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。

最常见的验证码主要有以下几种：

1、四位数字，随机的数字字符串，最原始的验证码，验证作用几乎为零。

2、随机数字图片验证码。图片上的字符比较中规中矩，有的可能加一些随机干扰素，还有一些是随机字符颜色，验证作用比上一个好。没有基本图形图像学知识的人，不可破

3、各种图片格式的随机数+随机大写英文字符+随机干扰像素+随机位置。

4、汉字是注册目前最新的验证码，随机生成，打起来更难了，影响用户体验，所以，一般应用的比较少。

对于识别验证码的程序来说，最难的部分是验证字符的切割和特征码的建立，而国内很多程序员制作验证码时，总是喜欢在验证码加很多干扰素，干扰线，影响效果不说，还达不到很好的效果；所以，要想使自己验证码难于被识别，只做下面两点就够了

1、字符粘连，最好所有的字符都有粘连的部分；

2、不要使用规格字符，验证码的各个部分使用不同比例的缩放或者旋转。

只要做到这两点，或者这两点的变形，识别程序就很难识别。

/*====================来自网络=====================*/

效果截图：

实现代码：

来自网络加上个人修改

实现页面：

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="vCode.js"></script>
    <script>
        onload = function () {
            var container2 = document.getElementById("vCode2");
            var code2 = new vCode(container2, {
                len: 4,
                bgColor: "#444444",
                colors: [
                    "#DDDDDD",
                    "#DDFF77",
                    "#77DDFF",
                    "#99BBFF",
                    //"#7700BB",
                    "#EEEE00"
                ]
            });
            document.getElementById("btn2").addEventListener("click", function () {
                alert(code2.verify(document.getElementById("code2").value));
            }, false);
        };
    </script>
    <style>
        *{margin:0;padding:0;}
        .codeBox{height:40px;margin:100px auto;width:400px;position:relative;}
        #code2{text-indent:10px;height:40px;line-height:40px;display:inline-block;position:relative;top:-15px;}
        #btn2{width:100px;height:40px;line-height:40px;background:#5a935e;color:#fff;display:inline-block;text-align:center;border:1px solid #5a935e;position:relative;top:-15px;cursor:pointer;}
    </style>
</head>
<body>
<div class="codeBox">
    <input type="text" id="code2" placeholder="请输入验证码" value=""/>
    <div id="vCode2" style="width:70px; height: 40px; border: 1px solid #ccc; display: inline-block;"></div>
    <a id="btn2">验证</a>
</div>


</body>
</html>

 

 

 

方法封装js即vCode.js

 

(function(){
    var randstr = function(length){
        var key = {

            str : [
                'a','b','c','d','e','f','g','h','i','j','k','l','m',
                'o','p','q','r','s','t','x','u','v','y','z','w','n',
                '0','1','2','3','4','5','6','7','8','9'
            ],

            randint : function(n,m){
                var c = m-n+1;
                var num = Math.random() * c + n;
                return  Math.floor(num);
            },

            randStr : function(){
                var _this = this;
                var leng = _this.str.length - 1;
                var randkey = _this.randint(0, leng);
                return _this.str[randkey];
            },

            create : function(len){
                var _this = this;
                var l = len || 10;
                var str = '';

                for(var i = 0 ; i<l ; i++){
                    str += _this.randStr();
                }

                return str;
            }

        };

        length = length ? length : 10;

        return key.create(length);
    };

    var randint = function(n,m){
        var c = m-n+1;
        var num = Math.random() * c + n;
        return  Math.floor(num);
    };

    var vCode = function(dom, options){
        this.codeDoms = [];
        this.lineDoms = [];
        this.initOptions(options);
        this.dom = dom;
        this.init();
        this.addEvent();
        this.update();
        this.mask();
    };

    vCode.prototype.init = function(){
        this.dom.style.position = "relative";
        this.dom.style.overflow = "hidden";
        this.dom.style.cursor = "pointer";
        this.dom.title = "点击更换验证码";
        this.dom.style.background = this.options.bgColor;
        this.w = this.dom.clientWidth;
        this.h = this.dom.clientHeight;
        this.uW = this.w / this.options.len;
    };

    vCode.prototype.mask = function(){
        var dom = document.createElement("div");
        dom.style.cssText = [
            "width: 100%",
            "height: 100%",
            "left: 0",
            "top: 0",
            "position: absolute",
            "cursor: pointer",
            "z-index: 9999999"
        ].join(";");

        dom.title = "点击更换验证码";

        this.dom.appendChild(dom);
    };

    vCode.prototype.addEvent = function(){
        var _this = this;
        _this.dom.addEventListener("click", function(){
            _this.update.call(_this);
        });
    };

    vCode.prototype.initOptions = function(options){

        var f = function(){
            this.len = 4;
            this.fontSizeMin = 20;
            this.fontSizeMax = 30;
            this.colors = [
                "green",
                "red",
                "blue",
                "#53da33",
                "#AA0000",
                "#FFBB00"
            ];
            this.bgColor = "#FFF";
            this.fonts = [
                "Times New Roman",
                "Georgia",
                "Serif",
                "sans-serif",
                "arial",
                "tahoma",
                "Hiragino Sans GB"
            ];
            this.lines = 4;
            this.lineColors = [
                "#888888",
                "#FF7744",
                "#888800",
                "#008888"
            ];

            this.lineHeightMin = 1;
            this.lineHeightMax = 3;
            this.lineWidthMin = 1;
            this.lineWidthMax = 60;
        };

        this.options = new f();

        if(typeof options === "object"){
            for(i in options){
                this.options[i] = options[i];
            }
        }
    };

    vCode.prototype.update = function(){
        for(var i=0; i<this.codeDoms.length; i++){
            this.dom.removeChild(this.codeDoms[i]);
        }
        for(var i=0; i<this.lineDoms.length; i++){
            this.dom.removeChild(this.lineDoms[i]);
        }
        this.createCode();
        this.draw();
    };

    vCode.prototype.createCode = function(){
        this.code = randstr(this.options.len);
    };

    vCode.prototype.verify = function(code){
        return this.code === code;
    };

    vCode.prototype.draw = function(){
        this.codeDoms = [];
        for(var i=0; i<this.code.length; i++){
            this.codeDoms.push(this.drawCode(this.code[i], i));
        }

        this.drawLines();
    };

    vCode.prototype.drawCode = function(code, index){
        var dom = document.createElement("span");

        dom.style.cssText = [
            "font-size:" + randint(this.options.fontSizeMin, this.options.fontSizeMax) + "px",
            "color:" + this.options.colors[randint(0,  this.options.colors.length - 1)],
            "position: absolute",
            "left:" + randint(this.uW * index, this.uW * index + this.uW - 15) + "px",
            "top:" + randint(0, this.h - 30) + "px",
            "transform:rotate(" + randint(-30, 30) + "deg)",
            "-ms-transform:rotate(" + randint(-30, 30) + "deg)",
            "-moz-transform:rotate(" + randint(-30, 30) + "deg)",
            "-webkit-transform:rotate(" + randint(-30, 30) + "deg)",
            "-o-transform:rotate(" + randint(-30, 30) + "deg)",
            "font-family:" + this.options.fonts[randint(0, this.options.fonts.length - 1)],
            "font-weight:" + randint(400, 900)
        ].join(";");

        dom.innerHTML = code;
        this.dom.appendChild(dom);

        return dom;
    };

    vCode.prototype.drawLines = function(){
        this.lineDoms = [];
        for(var i=0; i<this.options.lines; i++){
            var dom = document.createElement("div");

            dom.style.cssText = [
                "position: absolute",
                "opacity: " + randint(3, 8) / 10,
                "width:" + randint(this.options.lineWidthMin, this.options.lineWidthMax) + "px",
                "height:" + randint(this.options.lineHeightMin, this.options.lineHeightMax) + "px",
                "background: " + this.options.lineColors[randint(0, this.options.lineColors.length - 1)],
                "left:" + randint(0, this.w - 20) + "px",
                "top:" + randint(0, this.h) + "px",
                "transform:rotate(" + randint(-30, 30) + "deg)",
                "-ms-transform:rotate(" + randint(-30, 30) + "deg)",
                "-moz-transform:rotate(" + randint(-30, 30) + "deg)",
                "-webkit-transform:rotate(" + randint(-30, 30) + "deg)",
                "-o-transform:rotate(" + randint(-30, 30) + "deg)",
                "font-family:" + this.options.fonts[randint(0, this.options.fonts.length - 1)],
                "font-weight:" + randint(400, 900)
            ].join(";");
            this.dom.appendChild(dom);

            this.lineDoms.push(dom);
        }
    };

    this.vCode = vCode;

}).call(this);

 

 

 

 

辣姐什么鬼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
图形验证码安全
谢公子的博客
01-04 1万+
目录 图形验证码 图形验证码的作用和原理 图形验证码的分类 图形验证码的验证过程 图形验证码的安全问题 静态图形验证码的破解 利用Python脚本破解静态图形验证码 图形验证码 我们经常在登录app或者网页的时候，都会需要我们输入图形验证码上的内容，以验证登录。有些是纯数字的图形验证码，有些是字母和数字，有些是图案，有些是数学表达式......不同的网站，采用的图形验证码的形式也...
JavaWeb——图形验证码
qwLily的博客
11-02 4407
图形验证码（Graphic Verification Code）是一种常用于网络注册、登录等场景下的验证码方式。它通常由一张随机生成的图片组成，图片中包含数字、字母或其他随机组合，用户需要正确识别并输入其中的字符或数字才能完成验证。图形验证码是为了防止机器人程序自动化攻击，保障网络安全的一种防范措施。它具有一定的复杂度和难度，通常比普通的文字验证码更难被自动化程序破解。
vue+uniapp实现图形验证码功能-插件（附源码）
最新发布
03-06
vue+uniapp实现图形验证码功能-插件（附源码） 在登录系统时，除了密码登录，还需要提供验证码登录。 涉及验证码，为了安全，一般会加入图形验证码，然后再发短信验证码。 一般是前端请求，通过服务后台生成图形码流...
图形验证码成功之后实现用户登录功能.zip
06-04
在IT行业中，图形验证码是一种广泛应用于网络安全的重要技术，它的主要目的是防止自动化的恶意软件或机器人进行非法操作，如批量注册、频繁登录等。本项目"图形验证码成功之后实现用户登录功能.zip"着重于构建一个...
beego框架图形验证码实现
03-22
【beego框架图形验证码实现】是使用Go语言开发的一个高效且功能丰富的图形验证码库，它为Web应用提供了安全的验证码生成服务。这个库的核心目的是为了防止自动化程序（如机器人）进行非法操作，如批量注册、恶意登录...
SpringBoot整合Kaptcha（图形验证码）
08-18
在本文中，我们将深入探讨如何将Kaptcha与Spring Boot整合以实现图形验证码的功能。Kaptcha是一个开源项目，用于生成各种类型的验证码，以防止自动化程序（如机器人）进行恶意操作。而Spring Boot是Java开发中的一个...
图形验证码.html
06-05
该代码为前端使用canvas生成的图形验证码，虽然相对安全问题比较低级，但是对一些没有太大安全要求网站比较实用，可以缓解部分服务器压力。
图形信息校验码识别程序
05-16
一个图形信息校验码识别程序,类似很多网站上的验证码功能,可以指定验证码信息类型,如大小写英文,数字,随机混杂等,可以指定验证码长度,指定背景图片,最强的是可以像GG的弯曲不规则文字显示,总之是一个不错的演示程序
【纯前端】微信小程序验证码
10-11
预览https://blog.csdn.net/SangHongxv/article/details/82977874
JavaScript图形验证码的实现
11-27
JavaScript验证码的简单实现，有简单的随机数字，也有较复杂的图形验证码， 这种图形验证码很高效简洁，使用爬虫是有较大难度的爬取网站信息的。 而且这种图形验证码的应用场景非常广，可用在登录注册等等需要上传...
uniapp图形验证码登录
09-29
uniapp图形验证码登录是通过在uniapp中使用图形验证码来进行登录验证的一种方式。使用图形验证码可以增加登录的安全性，防止恶意攻击和机器人登录。 在uniapp中实现图形验证码登录，可以按照以下步骤进行操作： 1. 在代码部分设置对应的数据变量和相关方法。可以使用第二个引用中提供的代码示例作为参考。 2. 引用图形验证码的工具类文件，可以参考第三个引用中的代码示例。 3. 在mounted或onReady生命周期钩子函数中，初始化图形验证码组件。可以使用Fcaptcha类来生成图形验证码，设置对应的参数和方法。 4. 在页面中添加一个canvas元素，用于显示图形验证码。 5. 根据需要，可以添加刷新验证码的功能，通过调用refresh方法来刷新验证码。 6. 在提交登录前，进行图形验证码的校验。可以通过调用validate方法来判断用户输入的验证码是否正确。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

辣姐什么鬼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值