图形验证码+短信验证码【Java应用实例】

本文详细介绍了如何在Java中实现图形验证码和短信验证码。图形验证码通过生成验证码字符并存入session,然后与前端提交的字符进行比对来防止机器人攻击。短信验证码则结合第三方接口,生成验证码存入session,通过用户输入的验证码与session中的验证码对比进行身份验证。文章还提供了具体的代码实现和对接第三方短信服务的步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、图形验证码的实现

1.1 简介

常在网上晃悠的人,对下面这张图都不会陌生。特别是在注册新账号、确认交易时,它们都会频繁出现,要求我们输入正确的验证码,那这些看上去跟我们要做的事情完全无关的验证码到底有何作用呢?

其实,验证码的校验即是一个直接的图灵测试,简单的逻辑是:服务提供者向用户方提出一个较为复杂的问题,能正确回答的即是人类,回答不出的即是机器或者程序代码。这个概念基于这样一个重要假设:提出的问题要容易被人类解答,并且让机器无法解答。在当前的条件下,准确识别扭曲的图形,对于机器来说还是一个比较艰难的任务,而对于人来说,则相对可以接受。yahoo则在自己的邮箱登过程中全世界首创的应用了图形化验证码这个产品,很快解决了yahoo邮箱上的垃圾邮件问题,从此图形类验证码开始在互联网世界无处不在。

1.2 图形验证码实现

图形验证码前后台交互流程比较简单,主要分为以下三步:

  • 客户端请求到页面的同时,向服务端发起请求,服务端生成验证码将验证码字符,存入到session中以备客户端的校验。与此同时,服务端将生成的验证码图形给到前端;
  • 前端获取到验证码图形,渲染展示到页面。用户识别图形验证码后,提交验证码的字符到服务端;
  • 服务端接收到验证码校验的请求,将接收到的字符与session中存储的验证码字符进行比对,并将比对结果返回到前端。

大致流程如下图所示:

实现流程如下:

1.展示验证码已经提交验证码字符的页面简单结构

<html>
 <head></head>
 <body>
  <div class="form-group col-lg-6"> 
   <label for="id" class="col-sm-4 control-label"> 验证码: </label> 
   <div class="col-sm-8"> 
    <input type="text" id="code" name="code" class="form-control" style="width:250px;" /> 
    <img id="imgObj" alt="验证码" src="/article/getValidateCode" onclick="changeImg()" /> 
    <a href="#" onclick="changeImg()">换一张</a> 
   </div> 
  </div> 
 </body>
</html>

2.前端请求获取验证码图片的js逻辑

< script type = "text/javascript" >
// 刷新图片 
function changeImg() {
	var imgSrc = $("#imgObj");
	var src = imgSrc.attr("src");
	imgSrc.attr("src", changeUrl(src));
}
//为了使每次生成图片不一致,即不让浏览器读缓存,所以需要加上时间戳 
function changeUrl(url) {
	var timestamp = (new Date()).valueOf();
	var index = url.indexOf("?", url);
	if (index > 0) {
		url = url.substring(0, url.indexOf(url, "?"));
	}
	if ((url.indexOf("&") >= 0)) {
		url = url + "×tamp=" + timestamp;
	} else {
		url = url + "?timestamp=" + timestamp;
	}
	return url;
} 
< /script>

3.后端接收前端获取验证码图片的请求,生成验证码并响应到前端

/**
   * 响应验证码页面
   * 
   * @author https://www.veesing.com
   */
  @RequestMapping(value = "/getValidateCode")
  public String getValidateCode(HttpServletRequest request, HttpServletResponse response) throws Exception {
    // 设置响应的类型格式为图片格式
    response.setContentType("image/jpeg");
    // 禁止图像缓存。
    response.setHeader("Pragma", "no-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setDateHeader("Expires", 0);

    HttpSession session = request.getSession();

    ValidateCodeUtils vCode = n
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值