3分钟 读懂验证码的那些事

服部
4,132 阅读5分钟

验证码简介

验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试）的缩写，是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试，实际上用验证码是现在很多网站通行的方式，我们利用比较简易的方式实现了这个功能。这个问题可以由计算机生成并评判，但是必须只有人类才能解答。由于计算机无法解答CAPTCHA的问题，所以回答出问题的用户就可以被认为是人类。

使用验证码背景

  • 当今互联网中，大量诸如垃圾注册、刷库撞库、薅羊毛等严重影响企业正常业务运作的恶意风险背后都离不开机器自动化脚本。

验证码的作用

  • 为了区别用户是真人还是程序，人机验证服务在保障用户极致体验的同时有效拦截机器风险，提供安全可靠的业务环境。

应用场景

  • 人机验证服务适用于登录、注册、活动、论坛、短信等高风险业务场景。

1. 随机字符验证码

  • 随机字符验证码，就是随机生成由大写字母或小写字母或数字或汉字组成的字符串
  • 生成优点：生成方便，生成难度可调节
  • 缺点：识别度不好，识别度搞容易被程序识别，识别度底用户体验较差

1.1 识别流程

1. 在用户访问页面时，随机生成一张图片，图片的内容通常是数字、字母、或汉字的随机组合
2. 访问者识别出图片中的内容并填写到表单中进行提交
3. 服务器端将接收访问者提交的验证码与session范围内保存的验证码进行比较，进行合法性判断

1.2 实现原理和步骤

1. 创建画板
2. 使用画笔绘制随机内容
3. 将画板存为图片

1.3 使用java实现随机字符串验证码

  • 一、创建画板： new BufferedImage()
  • 二、创建画笔: 画板.getGraphics()
  • 三、随机生成内容：不同颜色的字符
  • 四、绘制内容：画笔.drawString()
    • 设置绘制区域
    • 设置字体（宽度，高度，字体大小）
    • 按顺序逐个绘制字符
    • 绘制噪音线
  • 五、存为图片发送：ImageIO.wrire(画板,图片类型，输出流)

2. 算数验证码

2.1 算数验证码和字符串验证码的区别

- 需要用户对显示表达式进行计算，将结果填写文本框
- 并非直接的验证文字识别，验证难度要高些吧
- 识别难度的提升，也降低的用户的体验度
- 目前市面上见到的不多了，不大建议使用

2.2 实现算数验证码

- 将“随机生成的字符”步骤替换为“随机生成两个整数和一个运算符（+ - *）”

2.3 javascript 实现验证码

  • 前端也可以使用Canvas 实现
  • 生成逻辑暴露在客户端，存在安全问题
  • Canvas 是 HTML5 新属性，浏览器兼容性不完美

3. kaptcha框架验证码

3.1 为什么使用框架验证码？

  • 优点：实用，根据帮助文档进行配置即可，不用考虑实现细节

3.2 使用kaptcha实现验证码功能

  • 一、下载驱动jar包，放到项目lib目录
  • 二、在web.xml中配置Servlet(设置字体、颜色等)
  • 三、编写验证类
  • 四、前台验证调用并验证

3.3 使用代码方式实现kaptcha验证码

  • 设置属性集
  • 创建kaptcha对象
  • 生成验证码并保存到Session
  • 生成图片
  • 返回图片
public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//设置属性集
		Properties pros = new Properties();
		pros.put("kaptcha.border", "no");
		pros.put("kaptcha.textproducer.font.color", "red");
		pros.put("kaptcha.image.width", "80");
		pros.put("kaptcha.image.height", "30");
		pros.put("kaptcha.textproducer.char.string", "0123456789");
		pros.put("kaptcha.textproducer.char.length", "4");
		pros.put("kaptcha.textproducer.char.space", "5");
		pros.put("kaptcha.textproducer.font.size", "24");
		pros.put("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");
		pros.put("kaptcha.obscurificator.impl", "com.google.code.kaptcha.impl.ShadowGimpy");
		Config config = new Config(pros);
		//创建kaptcha对象
		DefaultKaptcha kaptcha = new DefaultKaptcha();
		kaptcha.setConfig(config);
		//生成验证码并保存到Session
		String code = kaptcha.createText();
		request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, code);
		//生成图片
		BufferedImage img = kaptcha.createImage(code);
		//返回图片
		ServletOutputStream sos = response.getOutputStream();
		ImageIO.write(img, "png", sos);
		sos.flush();
		sos.close();
	}

4. 滑块验证码

  • 滑动验证（No-Captcha，简称NC）
  • 一次便捷的滑动，即可安全验证，在保障用户极致体验的同时，抵御机器风险 阿里云滑动验证-帮助文档

4.1 滑块验证码的实现原理

  • 根据用户滑块滑动的响应时间，拖动速度等数据来验证
  • 优点：显著提高用户体验

4.2 jQuery 验证码插件实现滑块验证码

    1. 下载插件文件，放到项目素材（js、css、img）目录（也可以使用cdn）
    1. 按照插件文档以及自身需求调用验证码
    1. 自行扩展服务器端验证码
    1. 前端调用验证
    <form method="post" action="index.jsp">
    	<div><label>验证：</label><div id="slider"></div></div>
    	<div><input type="submit" value="登录" id="btnOK" disabled="disabled" /></div>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/verify.js" type="text/javascript" charset="utf-8"></script>
	    <script type="text/javascript">
        	$('#slider').slideVerify({
        		type : 1, //类型
        		vOffset : 5, //误差量，根据需求自行调整
        		barSize : {
            		width : '300px',
            		height : '40px',
        		},
        		ready : function() {},
        		success : function() {
            		$("#btnOK").prop("disabled", "");
            		$("#btnOK").css("background-color", "#008cba");
        		},
        		error : function() {
        		    // alert('验证失败！');
        		}
        	});
    	</script>
    </form>

4.3 webAPI 实现滑块验证码

  • 登录阿里云，打开云盾 -> 数据风控
  • 新建验证码配置
    • 超时时间，尝试次数，语言类型等
    • 验证成功失败的回调
  • 根据接入文档，编写调用代码
  • 前台页面调用并验证

5. 图形验证码

5.1 图形验证码实现原理

  • 在图片上随机生成坐标，拖动滑块或点击鼠标到指定坐标处，即完成验证
  • 优点：增加破解难度

5.2 jQuery 实现图形验证码

关于jQuery验证码插件链接点击

<link rel="stylesheet" type="text/css" href="css/verify.css"/>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/verify.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		#btnOK {
			border: none;
			color: white;
			text-align: center;
			padding: 5px 10px;
			display: inline-block;
			font-size: 16px;
		}
	</style>
	<form method="post" action="index.jsp">
		<div><label>验证：</label><div id="sliderImg"></div></div>
		<div><input type="submit" value="登录" id="btnOK" disabled="disabled"/></div>
		<script type="text/javascript">
			$("#sliderImg").slideVerify({
				type: 2, //类型
				vOffset: 5, 	//误差量
				vSpace: 5, 	//间隔
				imgName: ['1.png', '2.png', '3.png'],
				imgSize: {
					width: '400px',
					height: '200px',
				},
				blockSize: {
					width: '40px',
					height: '40px',
				},
				barSize: {
					width: '400px',
					height: '40px',
				},
				ready: function () {},
				success: function () {
					$("#btnOK").prop("disabled", "");
					$("#btnOK").css("background-color", "#008cba");
				},
				error: function () {}
			});
		</script>
	</form>

5.3 腾讯云Web API 实现图形验证码

6. 手机短信验证码 （国内、国际）

  • 优点：增加破解难度
  • 缺点： 需要支付费用
    • 缺点优点是如此明显

6.1 调用网络服务上服务API的步骤

  • 一、配置APPID 和 APIKEY
  • 二、生成随机验证码
  • 三、发送短信
  • 四、用户提交手机接收验证码
  • 五、验证用户提交数据

7. 其他

  • 除以上之外还有些其他的验证码
    • 语音验证码、智能验证码...
    • 人脸识别、声音识别、指纹识别、虹膜识别等
    • 通过生物特征判定操作计算机的是人还是机器，从而取代传统的验证方式。

特别提醒

文章参考 慕课网 十方上下老师 常用验证码功能实现大全

多多点赞会变好看，多多留言会变有钱~~

avatar
文章
阅读
粉丝