前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >验证码

验证码

作者头像
微醺
发布2019-01-17 13:13:51
1.7K0
发布2019-01-17 13:13:51
举报

生成随机验证码

验证码,就是后端随机生成的一串字符串,然后拼接成一个图片,返回给前端的一个过程。怎么生成一串随机的字符串,怎么创建一个图片?

生成随机字符串,创建图片

代码语言:javascript
复制
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.util.concurrent.ThreadLocalRandom;

    public class ValidationNumber {
	// 声明一个String 字符串
	String valid = "0123456789abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ";
	// 随机生成字符串
	public String getStr() {
		// 1.初始化一个可变字符串
		StringBuilder sb = new StringBuilder();
		// 2.通过随机函数获取 字符串的字符
		ThreadLocalRandom random = ThreadLocalRandom.current();
		for (int i = 0; i < 4; i++) {
			// 生成随机数据 0-valid.length-1
			int num = random.nextInt(0, valid.length());// 通过string字符串随机生成一个数
			char c = valid.charAt(num);// 通过随机数截取字符串
			// 追加字符串
			sb.append(c);
		}
		return sb.toString();// 返回验证码字符串
	}  	
	// 通过验证码 创建一张图片
	public BufferedImage creatImage(String str) {
		int width = 100;// 初始换宽
		int height = 33;// 初始化高
		// 创建一张图片
		BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		// 获取当前图片的上下文
		Graphics g = img.getGraphics();
		// 设置图片的背景颜色
		g.setColor(Color.WHITE);
		g.fillRect(0, 0, width, height);
		// 绘制文字
        Random random=new Random();
    	for (int i = 0; i < str.length(); i++) {//依次给每个验证码附上颜色
	   g.setColor(new Color(random.nextInt(256),random.nextInt(256),random.nextInt(256)));//随机生成颜色
       g.setFont(new Font("宋体", Font.CENTER_BASELINE, 30));//设置,字体样式,大小
  	   g.drawString(str.charAt(i)+"",16+(i*18),26);//在宽,高一定,每隔18px间距设置字体
}
	return img;//返回一个图片
}
}

创建servlet,给前端进行返回信息

代码语言:javascript
复制
import java.awt.image.BufferedImage;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.tf.management.util.ValidationNumber;

@WebServlet("/validation.do")
public class ValidationServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
 
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//处理数据
		//生成随机字符串
		ValidationNumber va = new ValidationNumber();
		String num = va.getStr();
		//将验证码存放在session中
		HttpSession session = req.getSession(true);
		//赋值
		session.setAttribute("vacode",num);
		//通过字符串生成图片
		BufferedImage img = va.creatImage(num);
		//3.数据响应给客户端
		ImageIO.write(img,"JPEG",resp.getOutputStream());
	}
}

前端代码

这是前端的部分代码

代码语言:javascript
复制
 <div class="form-group">
 <div class="field">
 <input type="text" class="input input-big code" name="code" placeholder="填写右侧的验证码" data-validate="required:请填写右侧的验证码" />
 <img src="validation.do" alt="点击刷新" width="100" height="32" class="passcode" style="height:43px;cursor:pointer;" onclick="change(this)">                                                 
    </div>
    </div>
<script type="text/javascript">
var num = 1;
function change(img){//每次点击图片,重新刷新,获取不同验证码
	img.setAttribute("src","validation.do?"+num++);
}
</script>

总结

在某个范围内生成随机数,取到字符串的长度,这样就可以随机取到几个验证码,然后把它绘制到img上,返回给前端。通过点击事件,让它的src一直改变就可以实现点击图片实现刷新的效果。验证码可以放在session中,每一次操作在session中取出验证码,跟你前端页面输入的提交到servlet的进行比较。这样就能实现验证码的功能。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年11月05日,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 生成随机验证码
    • 生成随机字符串,创建图片
    • 创建servlet,给前端进行返回信息
    • 前端代码
    • 总结
    相关产品与服务
    验证码
    腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档