前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaEE中,实现登录时进行校验验证码的功能

JavaEE中,实现登录时进行校验验证码的功能

作者头像
时间静止不是简史
发布2020-07-26 00:06:08
1K0
发布2020-07-26 00:06:08
举报
文章被收录于专栏:Java探索之路Java探索之路

验证码功能实现步骤
  • 1、导入写好的servlet程序
  • 2、在web.xml中配置servlet程序的访问路径
  • 3、在jsp页面中定位到需要书写验证码的地方,调用相关servlet程序
  • 4、在js代码快中创建点击验证码图片,自动刷新的函数
  • 5、在验证码的输入框添加name属性,在所在无序列表加入class属性,方便调整大小
  • 6、在登陆的方法中比对验证码
  • 7、效果

1、导入写好的servlet程序

代码语言:javascript
复制
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;



public class RandomServlet extends HttpServlet {

	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		// 在内存中创建图象,width,height:控制图片的宽和高
		int width = 111, height = 45;
		BufferedImage image = new BufferedImage(width, height,
				BufferedImage.TYPE_INT_RGB);
		// 获取图形上下文
		Graphics g = image.getGraphics();
		// 生成随机类
		Random random = new Random();
		// 设定背景色
		g.setColor(getRandColor(200, 250));
		g.fillRect(0, 0, width, height);
		// 设定字体
		g.setFont(new Font("Times New Roman", Font.PLAIN, 20));
		// 随机产生155条干扰线,使图象中的认证码不易被其它程序探测到
		g.setColor(getRandColor(160, 200));
		for (int i = 0; i < 155; i++) {
			int x = random.nextInt(width);
			int y = random.nextInt(height);
			int xl = random.nextInt(12);
			int yl = random.nextInt(12);
			g.drawLine(x, y, x + xl, y + yl);
		}
		// 取随机产生的认证码(6位数字)
		String sRand = "";
		for (int i = 0; i < 6; i++) {
			String rand = String.valueOf(random.nextInt(10));
			sRand += rand;
			// 将认证码显示到图象中
			g.setColor(new Color(20 + random.nextInt(110), 20 + random
					.nextInt(110), 20 + random.nextInt(110)));
			// 调用函数出来的颜色相同,可能是因为种子太接近,所以只能直接生成
			g.drawString(rand, 13 * i + 6, 30);//控制六个验证码数字在图中的位置
		}
		// 图象生效
		g.dispose();
		
		try {
			ImageIO.write(image, "JPEG", response.getOutputStream());
		} catch (Exception e) {
			System.out.println("验证码图片产生出现错误:" + e.toString());
		}
		//保存验证码到Session
		request.getSession().setAttribute("randStr", sRand);
		
	}


	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		this.doGet(request, response);
	}
	/*
	 * 给定范围获得随机颜色
	 */
	private Color getRandColor(int fc, int bc) {
		Random random = new Random();
		if (fc > 255)
			fc = 255;
		if (bc > 255)
			bc = 255;
		int r = fc + random.nextInt(bc - fc);
		int g = fc + random.nextInt(bc - fc);
		int b = fc + random.nextInt(bc - fc);
		return new Color(r, g, b);
	}
}

2、在web.xml中配置servlet程序的访问路径

在这里插入图片描述
在这里插入图片描述

3、在jsp页面中定位到需要书写验证码的地方,调用相关servlet程序

在这里插入图片描述
在这里插入图片描述

4、在js代码快中创建点击验证码图片,自动刷新的函数

在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
function changeYZM(){

	//获取图片,修改图片的地址
	$("#YZM").attr("src","random.jpg?time="+new Date().toLocaleString());
	}

5、在验证码的输入框添加name属性,在所在无序列表加入class属性,方便调整大小

在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
 <li class="yzm">
	    <span><input name="YZM" type="text" value="请输入验证码" /></span>
	    <cite><img alt="" id="YZM" onclick="changeYZM()" src="random.jpg"></cite> 
</li>

6、在登陆的方法中比对验证码

在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
		//获取输入的验证码
		String YZM=request.getParameter("YZM");//自己输入的验证码
		String randStr=(String) request.getSession().getAttribute("randStr");//随机生成的验证码
		if (YZM==null || !YZM.equals(randStr)) {//进行比对
			request.setAttribute("error", "验证码错误");
			request.getRequestDispatcher("/login.jsp").forward(request, response);
			return;//跳出该程序,不执行下面的代码
		}

7、效果

在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-05-18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 验证码功能实现步骤
  • 1、导入写好的servlet程序
  • 2、在web.xml中配置servlet程序的访问路径
  • 3、在jsp页面中定位到需要书写验证码的地方,调用相关servlet程序
  • 4、在js代码快中创建点击验证码图片,自动刷新的函数
  • 5、在验证码的输入框添加name属性,在所在无序列表加入class属性,方便调整大小
  • 6、在登陆的方法中比对验证码
  • 7、效果
相关产品与服务
验证码
腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档