JavaWeb 实现验证码功能(demo)的代码详情
在 WEB-APP 中一般应用于：登录、注册、买某票、秒杀等场景，大家都接触过这个验证码操作，今天小编通过实例代码给大家讲解javaweb实现验证码功能，需要的朋友参考下
验证码不用多说，在 WEB-APP 中一般应用于：登录、注册、买某票、秒杀等场景。大家都接触过~可以说是千奇百怪，各式各样。
DEMO 目标功能
验证码页面输入。
页面更换验证码（异步实现）。
后台验证并返回验证结果。
开工
页面：demo1.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>验证示例</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
img {
width: 87px;
height: 33px;
border: 1px solid gray;
}
#msg {color: red;} /* 后台返回的验证信息显示为红色 */
</style>
</head>
<body>
<form action="${pageContext.request.contextPath}/check" method="post" enctype="application/x-www-form-urlencoded">
验证码：<input type="text" name="code" size="4" maxlength="4" id="code" />
<img id="code-img" src="" alt="验证码" style="display: none;"/>
<a href="javascript:void(0)" rel="external nofollow" id="changeCode">看不清？换一张</a> <br/><br/>
<input type="submit" value="验证"/> <span id="msg">${msg}</span>
</form>
</body>
</html>说明：
"看不清？换一张" 的 href 属性写成 javascript:void(0) 是为了防止页面刷新，这里的更换功能交给 AJAX 异步完成。
JavaScript 工具：util.js（为啥用原生 JS？任性呗~哈）
/**
* 获取 XMLHttpRequest Object
* @returns XMLHttpRequest Object
*/
function getXHR() {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) { // Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Sorry, 您的浏览器不支持 AJAX！");
return false;
}
}
}
return xmlHttp;
}页面中的 JavaScript 代码
<script type="text/javascript" src="${pageContext.request.contextPath}/js/util.js"></script>
<script type="text/javascript">
var xhr = getXHR(); // 获得 XMLHttpRequest 对象
// 页面加载时加载验证码，但验证码初始为隐藏状态
window.onload=function() {
// 为 onreadystatechange 事件注册回调函数。由于 xhr 为全局变量，所以注册后就不用管啦
xhr.onreadystatechange=function() {
if(xhr.readyState==4 && xhr.status==200) {
document.getElementById('code-img').src="data:image/png;base64,"+xhr.responseText;
}
}
xhr.open("GET","${pageContext.request.contextPath}/captcha/code",true);
xhr.send(null);
}
// 验证码输入框获得焦点时，验证码状态更改为显示
document.getElementById('code').onfocus=function() {
document.getElementById('code-img').style.display="inline";
}
// 异步请求，更换验证码
document.getElementById('changeCode').onclick=function() {
xhr.open("GET","${pageContext.request.contextPath}/captcha/code",true);
xhr.send(null);
}
</script>生成验证码的 CaptchaCodeServlet.java
package com.leo.web.captcha;
import java.io.IOException;
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 com.leo.util.ImageUtil;
import cn.dsna.util.images.ValidateCode;
@WebServlet("/captcha/code")
public class CaptchaCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
// 生成验证码（构造参数分别代表：宽度,高度,字符数,干扰线条数）
ValidateCode code = new ValidateCode(87, 33, 4, 23);
// 将验证码保存到 session 中，用于验证
request.getSession().setAttribute("code", code.getCode());
// 响应返回验证码图片 base64 编码后的数据给浏览器
response.getWriter().write(ImageUtil.encodeImg2Base64(code.getBuffImg(), "png"));
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
this.doGet(request, response);
}
}说明：
这里使用了 Servlet3.0 的新特性-用注解配置 url-pattern（用起来挺爽的），也就是说简单的项目不再需要 web.xml 了，但是 Tomcat 需要 7.0+。
其次生成验证码我用了一个小工具：ValidateCode.jar。工具十分简单，不合心意完全可以自己写。但也就是因为功能太少，所以我又写了一个 ImageUtil。我也有打算自己开源一个验证码工具出来。
ImageUtil.java
package com.leo.util;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import javax.imageio.ImageIO;
import sun.misc.BASE64Encoder;
public class ImageUtil {
/**
* 将图片二进制数据进行 base64 编码
* @param bufImg
* @return base64 编码后的字符串
*/
public static String encodeImg2Base64(BufferedImage bufImg, String formatName) {
ByteArrayOutputStream outputStream = null;
try {
outputStream = new ByteArrayOutputStream();
ImageIO.write(bufImg, formatName, outputStream);
} catch (IOException e) {
throw new RuntimeException("Base64 编码失败！"+e.getMessage());
}
BASE64Encoder encoder = new BASE64Encoder();
return encoder.encode(outputStream.toByteArray());
}
private ImageUtil() {} // 工具类私有化构造方法是常见的做法
}说明：
为什么要把图片二进制数据进行 Base64编码 呢？因为<img/>标签虽然可以直接设置 src 属性值为${pageContext.request.contextPath}/captcha/code请求相应的 Servlet 来得到二进制数据直接显示，但在 AJAX 异步请求中响应返回的是 xhr.responseText 。当把数据直接给 img 标签的 src 属性时，用 Chrome-tool 查看只会是一堆二进制当作文本解析的乱码字符，所以才要多这一步。
或许我作为萌新不知道一些其它的方便技巧。但若不想使用异步，那直接 img src 设置为请求地址将是最简单的选择，更换验证码无非是监听事件 img src 重新设置为该地址（再来一次请求）。
详细的资料：JS在浏览器中解析Base64编码图像
Base64图片编码解析及浏览器的兼容性处理
后台验证验证码：CheckServlet.jave
package com.leo.web.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/check")
public class CheckServlet extends HttpServlet {
private static final long serialVersionUID = -6588625852621588221L;
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
String encoding = "UTF-8";
request.setCharacterEncoding(encoding);
response.setContentType("text/html;charset="+encoding);
/* 验证码验证 */
String inputCode = request.getParameter("code");
// 获得 session 中的正确验证码
String realCode = (String) request.getSession().getAttribute("code");
System.out.println("input: "+inputCode+"\nreal: "+realCode); // 用于 Debug
if(!(inputCode!=null && realCode!=null &&
inputCode.equalsIgnoreCase(realCode))) {
// 若验证码不正确：回到页面并提示错误
request.setAttribute("msg", "验证码错误!请重新输入");
request.getRequestDispatcher("/demo1.jsp").forward(request, response);
return;
}
// 验证码正确，响应一句话表示 OK
response.getWriter().write("验证成功！");
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
doGet(request, response);
}
}说明：
doGet() 方法一开始是对中文乱码进行处理，编码统一设为 UTF-8。在实际项目中，编码问题通常交给一个 Filter 完成，达到一劳永逸的效果。
效果
警告！警告！！颜控请速速撤离！！！
写在最后
以上就是 JavaWeb 验证码小 DEMO 的全部内容啦，最好是把验证提交也搞成异步的，这里就不整了。WEB 项目中还没尝试过添加验证码功能的小伙伴可以动手搞起来啦！实际项目中利用 JQuery 等框架处理 AJAX，再配上一个漂亮的前端页面就完美啦。
以上是JavaWeb 实现验证码功能(demo)的代码详情的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
谷歌浏览器不显示验证码图片怎么办?chrome浏览器不显示验证码?
Mar 13, 2024 pm 08:55 PM
谷歌浏览器不显示验证码图片怎么办？在使用谷歌浏览器登录网页有时候需要验证码验证。部分用户在使用图片验证码的时候发现谷歌浏览器无法正常显示图片的内容。这应该怎么办呢？下面小编带来谷歌浏览器验证码不显示处理方法介绍，希望对大家有所帮助！ 方法介绍 1、进入软件，点击右上角的“更多”按钮，选择下方选项列表中的“设置”进入。 2、进入新界面后，点击左侧的“隐私设置和安全性”选项。 3、接着点击右侧中的“网站设置&rdquo
如何分析Java Web安全中的代码审计
May 16, 2023 am 08:04 AM
一、JavaWeb安全基础1.何为代码审计?通俗的说Java代码审计就是通过审计Java代码来发现Java应用程序自身中存在的安全问题，由于Java本身是编译型语言，所以即便只有class文件的情况下我们依然可以对Java代码进行审计。对于未编译的Java源代码文件我们可以直接阅读其源码，而对于已编译的class或者jar文件我们就需要进行反编译了。Java代码审计其本身并无多大难度，只要熟练掌握审计流程和常见的漏洞审计技巧就可比较轻松的完成代码审计工作了。但是Java代码审计的方式绝不仅仅是使
手机为什么收不到验证码
Aug 17, 2023 pm 02:49 PM
手机收不到验证码是网络问题、手机设置问题、手机运营商问题和个人设置问题导致的。详情介绍：1、网络问题，手机所处的网络环境不稳定或者信号弱，就有可能导致验证码无法及时送达；2、手机设置问题，不小心将手机的短信或语音功能关闭，或者将验证码的发送号码加入到黑名单中，从而导致验证码无法正常收到；3、手机运营商问题，手机运营商可能会出现故障或者维护，导致验证码无法及时送达等等。
虚拟号码可以接收验证码吗
Jan 02, 2024 am 10:22 AM
虚拟号码可以接收验证码，只要注册时填写的手机号码符合规定，并且能够正常接通手机号，就可以收到短信验证码。不过，使用虚拟手机号需要注意，部分网站不支持虚拟手机号注册，因此需要选择正规的虚拟手机号服务商。
PHP开发指南：实现验证码登录
Jul 01, 2023 am 09:27 AM
随着互联网的发展和智能手机的普及，验证码登录功能被越来越多的网站和应用程序采用。验证码登录是一种通过输入正确的验证码来验证用户身份的登录方式，以提高安全性和防止恶意攻击。在PHP开发中，实现简单的验证码登录功能并不复杂，可以通过以下步骤来完成。创建数据库表首先，我们需要在数据库中创建一个用于存储验证码信息的表。表结构可以包含以下字段：id:自增主键phon
PHP图片处理案例：如何实现图片的验证码功能
Aug 17, 2023 pm 12:09 PM
PHP图片处理案例：如何实现图片的验证码功能随着互联网的快速发展，验证码成为了保护网站安全的重要手段之一。验证码是一种通过图像识别技术来确定用户是否为真实用户的验证方式。本文将介绍如何使用PHP来实现图片的验证码功能，并附带代码示例。简介验证码是一张包含随机字符的图片，用户需要输入图片中的字符才能通过验证。实现验证码的主要过程包括生成随机字符、绘制字符到图片
验证码拦不住机器人了！谷歌AI已能精准识别模糊文字，GPT-4则装瞎求人帮忙
Apr 12, 2023 am 09:46 AM
“最烦登网站时各种奇奇怪怪（甚至变态）的验证码了。”现在，有一个好消息和一个坏消息。好消息就是：AI可以帮你代劳这件事了。不信你瞧，以下是三张识别难度依次递增的真实案例：而这些是一个名为“Pix2Struct”的模型给出的答案：全部准确无误、一字不差有没有？有网友感叹：确定，准确性比我强。所以可不可以做成浏览器插件？？不错，有人表示：别看这几个案例相比还算简单，但凡微调一下，我都不敢想象其效果有多厉害了。所以，坏消息就是——验证码马上就要拦不住机器人了！（危险危险危险……）如何做到？Pix2St
如何使用PHP创建验证码图片？
Sep 13, 2023 am 11:40 AM
如何使用PHP创建验证码图片？验证码（CAPTCHA）是一种常用的验证用户是否为人而不是机器的方法。在网站上，我们经常会看到验证码图片，要求用户输入图片上显示的随机字符或数字，以完成登录、注册、评论等操作。本文将介绍如何使用PHP创建验证码图片，并提供具体的代码示例。一、PHPGD库要创建验证码图片，我们需要使用PHP的GD库。GD库是一个用于处理图像的扩
