实现登录等通用验证码功能

本是古典何须时尚 2022-12-21 00:47 407阅读 0赞

Java代码：

//后台生成随机数
        @GetMapping("/randomNum")
        @ResponseBody
        public void findRandom (HttpServletResponse response) throws IOException{
            // 验证码字符个数
            int codeCount = 4;
            char[] codeSequence = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };
            // 创建一个随机数生成器类
            Random random = new Random();
            // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。
            StringBuffer randomCode = new StringBuffer();
            //获取到数组的长度
            int aLength = codeSequence.length;
            for (int i = 0; i < codeCount; i++) {
                // 得到随机产生的验证码数字。
                String strRand = String.valueOf(codeSequence[random.nextInt(aLength)]);
                // 将产生的四个随机数组合在一起。
                randomCode.append(strRand).append(",");
            }
            PrintWriter out = response.getWriter();
            out.print(randomCode);
        }

Html代码：

<div class="form-group">
    	<div class="col-lg-12">
    		<input class="layui-input" id="checkCodeYZM"  name="checkCode" placeholder="验证码" lay-verify="myRequired" type="text" autocomplete="off">
    		<canvas id="canvas"  class="canvasCode"></canvas>
    	</div>
    </div>

JS代码：

<script>
    var show_num = [];//将要生成的随机验证码
    	drawshow_num(show_num);
    
    	/**点击验证码重新生成*/
    	$("#canvas").on('click', function () {
    		drawshow_num(show_num);
    	});
    	function drawshow_num(show_num) {
    		$.ajax({
    			cache : true,
    			type : "GET",
    			url : "/randomNum",
    			async : false,
    			success : function(k) {
    				draw(show_num,k);
    			}
    		});
    	}
    	function randomColor() {//得到随机的颜色值==>把颜色设置为黑色，看的清楚
    		var r = Math.floor(0);
    		var g = Math.floor(0);
    		var b = Math.floor(0);
    		return "rgb(" + r + "," + g + "," + b + ")";
    	}
    	function draw(show_num,sCode) {
    		var canvas_width=100;
    		var canvas_height=36;
    		var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
    		var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
    		canvas.width = canvas_width;
    		canvas.height = canvas_height;
    		var aCode = sCode.split(",");
    		for (var i = 0; i <= 3; i++) {
    			var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
    			var txt = aCode[i];//得到随机的一个内容
    			show_num[i] = txt.toLowerCase();
    			var x = 10 + i * 20;//文字在canvas上的x坐标
    			var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
    			context.font = "bold 26px 楷体";
    			context.translate(x, y);
    			context.rotate(deg);
    			context.fillStyle = randomColor();
    			context.fillText(txt, 0, 0);
    			context.rotate(-deg);
    			context.translate(-x, -y);
    		}
    
    		for (var i = 0; i <= 5; i++) { //验证码上显示线条
    			context.strokeStyle = randomColor();
    			context.beginPath();
    			context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
    			context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
    			context.stroke();
    		}
    		for (var i = 0; i <= 30; i++) { //验证码上显示小点
    			context.strokeStyle = randomColor();
    			context.beginPath();
    			var x = Math.random() * canvas_width;
    			var y = Math.random() * canvas_height;
    			context.moveTo(x, y);
    			context.lineTo(x + 1, y + 1);
    			context.stroke();
    		}
    		//为了测试方便不用每次都输入验证码
    		//$("#checkCodeYZM").val(show_num.join(""));
    	}
    </script>

验证码效果(点击图片验证码可刷新)：

![2020111311331669.png][]

[2020111311331669.png]: /images/20221120/251494f1a2574d3a84acefc8d6d5bf72.png

发表评论取消回复

表情：

评论列表（有 0 条评论，407人围观）

还没有评论，来说两句吧...

相关阅读

相关 ②手机验证码登录功能：Redis实现session共享

- 当注册完成后，用户输入手机号与验证码点击登录，后端会校验用户提交的手机号和验证码，是否一致;- 如果一致，则根据手机号查询用户信息，不存在则新建，最后将用户数据保存到...

你的名字/ 2024年04月17日 10:18/ 0 赞/ 143 阅读

相关 html页面实现登录验证码功能（纯前端）

html+css+javascript简易实现注册或登录时实现验证码功能：原文链接：https://blog.csdn.net/weixin\_41472431/artic

阳光穿透心脏的1/2处/ 2023年09月28日 10:13/ 0 赞/ 115 阅读

相关验证码功能实现

本案例使用线程池实现定时任务,并修改数据库. 1.首先得到用户id和验证码code,并存入数据库(这里使用的hibnate框架) baseDao.executeBy

比眉伴天荒/ 2023年09月24日 15:56/ 0 赞/ 248 阅读

相关 SpringBoot登录验证码实现

今天记录一下验证码的实现，希望能够帮助到大家！首先我们看一下实现的效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

旧城等待，/ 2023年05月29日 05:09/ 0 赞/ 216 阅读

相关登录中的图片验证码功能实现

添加kaptcha依赖 <dependency> <groupId>com.github.axet</groupId> <artifactId>k

旧城等待，/ 2022年12月27日 07:56/ 0 赞/ 297 阅读

相关实现登录等通用验证码功能

Java代码： //后台生成随机数 @GetMapping("/randomNum") @ResponseBody p

本是古典何须时尚/ 2022年12月21日 00:47/ 0 赞/ 408 阅读

相关【途牛旅游项目】02 - 登录功能实现 - 验证码功能 - ajax实现登录

文章目录登录功能分析图解最终实现截图实现登录功能 1. 创建测试类 2. 创建业务

傷城~/ 2022年12月12日 12:29/ 0 赞/ 314 阅读

相关 java实现登录页面的验证码功能

我们访问电商网站，登录账号时。都需要验证码的输入。那么在java中，我们是如何实现验证码的呢？这里，我用servelet做个demo。代码清单： package

落日映苍穹つ/ 2022年06月07日 03:16/ 0 赞/ 357 阅读

相关登录验证码的实现

前言：验证码，是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的

左手的ㄟ右手/ 2022年05月17日 03:04/ 0 赞/ 457 阅读

相关 java语言实现登录验证码功能

先上效果。 ![70][] 生成验证码后端逻辑 import java.awt.Color; import java.awt.Font;

雨点打透心脏的1/2处/ 2022年05月10日 14:04/ 0 赞/ 388 阅读