博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
厉害了我滴哥,原来验证码是这么造出来的!
阅读量:4292 次
发布时间:2019-05-27

本文共 1228 字,大约阅读时间需要 4 分钟。

验证码是如何生成呢,为什么几乎每个登录过程都需要输入烦人的验证码呢?虽然很多人每天都接触到验证码,但大多数人肯定不知道它为何而来,更不知道它是如何生成的。今天小编就带领大家来解开萦绕于心头多年的谜团。

经常购买火车票的人的肯定知道12306网站那坑人的验证码,尤其是在春运时节抢票高峰期,抢票的关键时刻,不知道有多少英雄好汉败在了那恼人验证码之下,眼看着抢不到票了,可就是输不正确验证码!于是很多人就发恼骚,不就是买个票嘛,至于用那破玩意来考验我的智商吗?

厉害了我滴哥,原来验证码是这么造出来的!

12306坑人的验证码

这么不招人待见,那12306为什么在我们抢票的时候给我们出这么大难题呢?其实那并不是他们吃饱了撑着,考验你的智商,而是另有原因。

二维码的作用是什么?对计算机稍有了解的人都知道,他的主要作用是防止用户暴力访问服务器,如果在很短的时间,对服务器访问超过了一定的次数之后,服务器就会挂掉。这个道理就跟有很多人同时跟你打电话一样,一个两个还行,再多了你怎么应付?

厉害了我滴哥,原来验证码是这么造出来的!

我国人口普查数据

我国的人口你也是知道的,在2014年普查的时候就逼近14亿了,春运人口更是惊人,那么庞大数量的用户,几乎在同一时间内抢票,在加上黄牛用机器刷票,如果没有验证码这一屏障,售票网站的服务器肯定会瘫痪掉。这也就是12306频繁出大招,搞出些阴阳怪气的验证码出来考验你智商了的真正原因了。

厉害了我滴哥,原来验证码是这么造出来的!

2015年春运人口

现在知道了验证码是干什么了,那验证码到底是如何生成的呢?那这个就需要用代码来实现了。

厉害了我滴哥,原来验证码是这么造出来的!

生成验证码1

厉害了我滴哥,原来验证码是这么造出来的!

生成验证码2

生成验证码第一步:随机生成四个字母或数字,然后让他们用随机的字体和随机颜色显示。

第二步:画噪线,画噪点,也就是制作干扰成分,主要是让验证码歪七扭八,且有很多干扰点附着在上面。

厉害了我滴哥,原来验证码是这么造出来的!

生成验证码3

厉害了我滴哥,原来验证码是这么造出来的!

生成验证码4

第三步:将生成的验证码字符串转成base64格式,用于前端页面的显示,也就是你看到的效果。

上面就是后台代码生成验证码大概的全过程了,接下来的事情就是把他显示在前端页面。

厉害了我滴哥,原来验证码是这么造出来的!

获取验证码

当需要将验证码显示在前端页面上的时候,你必须给后台发个请求,意思就是你需要验证码的时候到了,快给我发来。后台成功返回给前端数据之后,你就需要把它显示在页面上了。那如何将后台返回的数据显示在页面上呢?

首先,你得知道他给你返回的东西是什么样子的,看下面。

厉害了我滴哥,原来验证码是这么造出来的!

返回base64

来一睹他的全貌。

厉害了我滴哥,原来验证码是这么造出来的!

base64全貌

上面的这一大串字符串,就是后台给你返回的数据的全貌了。这其实就是你看到验证码的本质,它就是这么一长串字符串。接下来就是将它变成我们通常看到的验证码的样子。

很简单,只需把盛装它的img元素的src属性设置成那段字符串即可,看下面代码。

厉害了我滴哥,原来验证码是这么造出来的!

一看庐山真面目。

厉害了我滴哥,原来验证码是这么造出来的!

庐山真面目

至于售票网站现在把二维码从数字,字母形式,变成了更难辨别的图形样式,主要是为了应对黄牛,原理其实都是一样的。

欢迎转载,抄袭必究

本文为头条号作者原创。未经授权,不得转载。

你可能感兴趣的文章
javascript原型对象存在的问题(3)
查看>>
javascript原型继承(1)
查看>>
javascript原型继承-实现extjs底层继承(2)
查看>>
javascript设计模式-建立接口的方式(1)
查看>>
javascript设计模式-单体singleton模式(2)
查看>>
javascript设计模式-链式编程(3)
查看>>
大型高并发与高可用缓存架构总结
查看>>
javascript设计模式-工厂模式(4)
查看>>
javascript设计模式-组合模式(6)
查看>>
javascript设计模式-门面模式(7)
查看>>
javascript设计模式-享元模式(10)
查看>>
javascript设计模式-代理模式(11)
查看>>
Executor相关源码分析
查看>>
react之setState解析
查看>>
elasticsearch7.3版本已经不需要额外安装中文分词插件了
查看>>
【重大好消息】elasticsearch 7.3版本已经可以免费使用x-pack就可以设置账号和密码了,让你的数据不再裸奔
查看>>
解决使用logstash中jdbc导入mysql中的数据到elasticsearch中tinyint类型被转成布尔型的问题的方法
查看>>
elasticsearch7.3版本环境搭建(一)elasticsearch安装和配置
查看>>
SEO基本功:站内优化的一些基本手段
查看>>
centos6系列和7系列如何对外开放80,3306端口号或者其他端口号
查看>>