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

本是古典何须时尚 2022-12-21 00:47 256阅读 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 条评论，256人围观）

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

相关阅读

相关验证码功能实现

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

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

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

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

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

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

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

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

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

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

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

相关 PHP实现验证码功能

//先做个记录,功能还不完善,界面还太丑画图的时候要安装扩展库gd2,我安装的命令是sudo apt-get install php-gd,加上php版本号之后说找不到包,

不念不忘少年蓝@/ 2022年06月08日 09:10/ 0 赞/ 328 阅读

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

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

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

相关登录验证码的实现

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

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

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

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

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

相关 javascript实现验证码功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

以你之姓@/ 2022年03月26日 01:06/ 0 赞/ 380 阅读

相关邮箱验证码功能实现

在进行实际项目的开发过程中，我们可能会遇到需要需要对用户账号密码进行找回，这时就需要我们通过邮件进行验证，从而对用户信息进行修改，下面我就将自己开发过程中的邮件发送功能简单描述

╰半夏微凉°/ 2021年09月26日 05:46/ 0 赞/ 938 阅读