网站安全之为Web项目添加验证码功能(一)
1.需求说明
首先,读者先来说明验证码的作用。对于安全性要求比较高的系统来说,添加下验证码的功能是必不可少的。有主要是为是防止黑客的入侵。有些黑客为了故意攻击一个系统,可能会使用攻击工具,连续不断地重试用户名或密码登录系统。如果我们不加入验证码,那么就有可能会被破解用户名和密码的。所以加入验证码是非常有必要的。
2.开发思路
对于这样的需求是小功能,我想实现的话是不难的,主要看你要怎样来实现生成验证这个功能了。我们可以使用js来生成验证码,也可以使用java来实现。笔者将会分为两篇的博客来说明,这一篇主要是说明使用js来实现。
3.代码实现
1) 创建登录页面,页面我们需要输入用户和验证码。所以需要两个文件框,同时还需要生成验证码图片的。大概登录的页面login.jsp的代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>验证码测试</title><script type="text/javascript">/* 刷新验证码 */function change_yanzhengma() {document.getElementById("checkcode_img").src = "checkcode.jsp?" + new Date().getTime();}function checkLoginInfo() {if (form1.userName.value == "" || form1.userName.value == null) {alert("用户名不能为空");form1.userName.focus();return false;} else if (form1.userCode.value == "" || form1.userCode.value == null){alert("验证码不能为空");form1.yanzhengma.focus();return false;}return true;}
</script></head><body><center><form action="loginCheck" method="post" name="form1"><br/><br/><br/><br/><br/><br/>请输入用户名:<input type="text" name="userName" id="userName"/><br/><br/><img alt="点击刷新" src="checkcode.jsp" border="0" id="checkcode_img" onClick="change_yanzhengma();" /><br/>请输入验证码:<input type="text" name="userCode" id="userCode"/><br/><br/><input type="submit" value="确认登录"><br/><br/><!-- 保存登录失败时显示给用户的提示信息 --><font color="red">${sessionScope.loginError } <%session.removeAttribute("loginError"); %></font></form></center></body>
</html>
2) 细心的读者已经发现了,上面的代码已经的checkcode.jsp的字段,这个页面就是生成验证码的文件,代码的逻辑就不多说了,在代码已经的注释了,读者可以自己看。
<%@ page import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" pageEncoding="gbk"%>
<%@ page import="java.io.OutputStream"%><%-- 采用JPG格式的图片验证码 --%><%!Color getRandColor(int fc, int bc) //随机生成图片中rgb的值{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);}
%><%try{response.setHeader("Pragma", "No-cache");response.setHeader("Cache-Control", "no-cache");response.setDateHeader("Expires", 0);int width = 60, height = 20;BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);OutputStream os = response.getOutputStream();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, 18));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);}String sRand = "";//生成4为随机的、有彩色值得验证码for (int i = 0; i < 4; 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, 16);}session.setAttribute("checkcode_inSession", sRand);g.dispose();//生成JPEG格式的图片验证码ImageIO.write(image, "gif", os);os.flush();os.close();os = null;// 用来将缓冲区的数据立即输出到浏览器当中response.flushBuffer();/* 两句关键代码 */out.clear();out = pageContext.pushBody();} catch (IllegalStateException e){System.out.println(e.getMessage());e.printStackTrace();}
%>
3) 加入了验证码之后,我们会把生产的验证码放入到session中,以便后端可以拿到并且验证用户输入的验证码是还有问题。所以CheckCodeServlet.java的后端逻辑处理的类的代码如下。主要实现的是,验证用户输入的用户名是否正确还有就是验证码是否正确。
@SuppressWarnings("serial")
public class CheckCodeServlet extends HttpServlet
{public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{response.setContentType("text/html;charset=UTF-8");HttpSession session = request.getSession();String userName = request.getParameter("userName"); // 账号String userCode = request.getParameter("userCode"); // 输入的验证码/* 获取系统生成的验证码,同时移除掉 */String verificationCode = (String) session.getAttribute("checkcode_inSession");session.removeAttribute("checkcode_inSession");/* 验证码正确才进行账户信息检查 */// 验证码错误if (!userCode.equals(verificationCode)){session.setAttribute("loginError", "验证码错误");response.sendRedirect("login.jsp");} else{ // 账号存在,此处也可以通过js进行合法性检查if (userName!=null && userName!=""){// 登录成功if (userName.equals("admin")){//把登录成功的用户信息存放在session中session.setAttribute("UserInfoSession", userName);response.sendRedirect("main.jsp");}// 登录失败,账号信息有误else{session.setAttribute("loginError", "账号信息有误");response.sendRedirect("login.jsp");} }}}
}
4) 当然要想前端与后端可以关联起来,我们还还需要在Web.xml中配置上我们定义的CheckCodeServlet.java.
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><servlet><description>This is the description of my J2EE component</description><display-name>This is the display name of my J2EE component</display-name><servlet-name>CheckCodeServlet</servlet-name><servlet-class>com.owen.checkcode.servlet.CheckCodeServlet</servlet-class></servlet><servlet-mapping><servlet-name>CheckCodeServlet</servlet-name><url-pattern>/checkCodeServlet</url-pattern></servlet-mapping><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list>
</web-app>
5) 最后,当用户登录成功后,我们给个简单的页面main.jsp。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>登录成功</title></head><body>欢迎你:<%=session.getAttribute("UserInfoSession") %></body>
</html>
6) 说明:项目可能用到的jar有:javax.servlet-5.1.12.jar、jstl-1.2.jar
4.实现功能
1) 登录页面。
2) 登录成功。
5.项目结构
网站安全之为Web项目添加验证码功能(一)相关推荐
- maven 如何给web项目添加jar包依赖
maven 如何给web项目添加jar包依赖 CreateTime--2018年4月19日19:06:21 Author:Marydon 开发工具:eclipse 1.打开pom.xml文件--> ...
- Myeclipse2015把web项目添加至tomcat中,添加列表中却没有想要添加的项目
Myeclipse2015把web项目添加至tomcat中,添加列表中却没有想要添加的项目?? 解决方法: 项目-右键-Properties-Myeclipse-Project Factes - D ...
- element-plus+vite+guiplan注册页面添加验证码功能
element-plus+vite+guiplan注册页面添加验证码功能 element-plus+vite+guiplan注册页面添加验证码功能 介绍 步骤 总结 element-plus+vite ...
- idea为web项目添加tomcat并配置Artifacts
背景 有一天聪明的小峰从网上找了一个web项目,但是只有代码没有启动步骤,作为小白的我解决这个问题也不太顺利特此记录一下. 主要解决的问题: 为项目添加tomact 配置Artifacts 引入 ja ...
- Java web项目添加Struts2支持的步骤
今天开始学习Struts2了,Struts2使用了MVC的设计模式,使Java web应用层次更分明,是非常流行的一种框架,下面我记录在Java web应用中添加Struts2支持的几个步骤: 一.在 ...
- ipv6服务器搭建网站,IPV6地址访问web项目网站配置
本示例在win10环境下 1,打开命令窗口,输入ipconfig命令 如红色箭头所示为ipv6的地址,但是发现地址中含有%百分号,查了相关文档,这个标识符通常指网络接口,并且通过一个百分号(%)被附加 ...
- Spring Boot项目邮箱验证码功能的实现(以QQ邮箱为例)
既然前两天翻出我大学时期做的一个项目,那正好顺手将其中的邮箱验证码功能也分享记录一下. 开启QQ邮箱传输协议服务 进入QQ邮箱界面,点击设置--账户--开启以下两个服务,当开启IMAP/SMTP会有一 ...
- html表单输入框添加验证码,织梦Dedecms为自定义表单添加验证码功能
使用织梦Dedecms自定义表单的时候,即使你做了字段的验证,也很有可能被人刷很多垃圾的内容,更加安全的一个方法是为自定义表单添加上验证码功能.今天我就来为大家分享一下怎样给自定义表单添加验证码! 一 ...
- 为WebApi项目添加注册功能:问题与解决的思维流程
为WebApi项目增加用户注册功能 创建时间:2012年10月31日(星期三) 凌晨3:26 | 分类:Web演练 | 字数:3438 | 发送到我的Qzone | 另存为... | 打印 | 添加 ...
- php防止恶意注册,WordPress防恶意注册-添加验证码功能 | 逗哥-架构师之路
WordPress注册用户添加验证码,我这种小博客基本很少用到给网友注册用户的,登录后台添加验证码,找回密码添加验证码文章都写了,拽立网,也不差这个注册用户添加验证码文章了,大概差不多只需要一串代码就 ...
最新文章
- C#获取邮件客户端保存的邮箱密码
- 管家病毒查杀模块逆向分析
- 【NLP】业界总结 | BERT的花式玩法
- 接口测试之HTTP协议详解
- Java中String相关类型的区别
- Knative 驾驭篇:带你 '纵横驰骋' Knative 自动扩缩容实现
- 一个程序员的一些想法(一)
- 经典面试题(13):如何理解和应用JavaScript闭包?
- mysql三高讲解(二):2.8 mysql视图相关概念
- c语言输出教学日历表 节假日突出,[蓝桥杯][算法提高VIP]任意年月日历输出 (C语言代码)...
- 【机器学习】Pima数据集的可视化
- mapbox 加载json数据 和数据中颜色 和高度 并根据数值加载颜色
- Form Follows Function – 绚丽的 HTML5 互动体验网站
- 软考中级网络工程师备考详细资料
- 两个rsa密文相乘还能解密吗_RSA加密算法 | BitOL|比特在线-关注区块链技术动态的区块链导航...
- 亚洲杯:国足告别阿联酋
- 5-3 jmu-java-m05-使用Comparator接口排序 (10分)
- 解决Nmap扫描出现的延时
- 徐无忌MySQL笔记:索引的使用规则
- JDK有BUG!!!