JavaWeb实现登录验证码

article/2025/10/13 3:24:21

在登录界面中使用图片验证码, 对于现在的web应用到处可见.

话不多说, 开始写代码了!
首先, 新建一个JSP, 表示登录界面:
login3.jsp文件:

<%--User: menglanyingfeiDate: 2018/1/12Time: 16:16
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>登录界面</title>
</head>
<body>
<%// 获取浏览器发送过来的cookie, 获取用户信息Cookie[] cookies = request.getCookies();String username = "";if (cookies != null) {for (Cookie cookie : cookies) {if ("username".equals(cookie.getName())) {username = cookie.getValue();}}}
%>
<font color="red">${requestScope.message}</font>
<form action="/day_1_12/LoginServlet3" method="post">用户名:<input type="text" name="username" value="<%= username%>"><font color="red">${requestScope.error}</font><br>密码:<input type="password" name="password"><br>验证码:<input type="text" name="image"><img src="/day_1_12/VerifyCodeServlet"><input type="button" value="看不清? 换一张." id="btn"><font color="red">${requestScope.imageMess}</font><br><input type="submit" value="登录">
</form>
<script type="text/javascript">document.getElementById("btn").onclick = function () {// 获取img元素// 为了让浏览器发送请求到servlet, 所以一定要改变srcdocument.getElementsByTagName("img")[0].src ="/day_1_12/VerifyCodeServlet?time=" + new Date().getTime();};
</script></body>
</html>

界面就是这样, 当然, 你肯定现在出来不了这个效果! 没事, 接着往下看吧!
登录界面.png

然后, 新建一个Servlet:
VerifyCodeServlet.java文件, 因为这里配置了@WebServlet注解, 所以无需在web.xml中配置!

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 java.awt.image.BufferedImage;
import java.io.IOException;/*** 用来生成图片验证码* Created by menglanyingfei on 2018/1/12.*/
@WebServlet(name = "VerifyCodeServlet", value = "/VerifyCodeServlet")
public class VerifyCodeServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//创建对象VerifyCode vc = new VerifyCode();//获取图片对象BufferedImage bi = vc.getImage();//获得图片的文本内容String text = vc.getText();// 将系统生成的文本内容保存到session中request.getSession().setAttribute("text", text);//向浏览器输出图片vc.output(bi, response.getOutputStream());}
}

在同一包下, 新建一个Java文件VerifyCode.java(具体的代码意思, 可以看注释, 已经写得非常清楚了!):

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;import javax.imageio.ImageIO;public class VerifyCode {private int w = 70;private int h = 35;private Random r = new Random();// {"宋体", "华文楷体", "黑体", "华文新魏", "华文隶书", "微软雅黑", "楷体_GB2312"}private String[] fontNames  = {"宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312"};// 可选字符private String codes  = "0123456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";// 背景色private Color bgColor  = new Color(255, 255, 255);// 验证码上的文本private String text ;// 生成随机的颜色private Color randomColor () {int red = r.nextInt(150);int green = r.nextInt(150);int blue = r.nextInt(150);return new Color(red, green, blue);}// 生成随机的字体private Font randomFont () {int index = r.nextInt(fontNames.length);String fontName = fontNames[index];//生成随机的字体名称int style = r.nextInt(4);//生成随机的样式, 0(无样式), 1(粗体), 2(斜体), 3(粗体+斜体)int size = r.nextInt(5) + 24; //生成随机字号, 24 ~ 28return new Font(fontName, style, size);}// 画干扰线private void drawLine (BufferedImage image) {int num  = 3;//一共画3条Graphics2D g2 = (Graphics2D)image.getGraphics();for(int i = 0; i < num; i++) {//生成两个点的坐标，即4个值int x1 = r.nextInt(w);int y1 = r.nextInt(h);int x2 = r.nextInt(w);int y2 = r.nextInt(h); g2.setStroke(new BasicStroke(1.5F)); g2.setColor(Color.BLUE); //干扰线是蓝色g2.drawLine(x1, y1, x2, y2);//画线}}// 随机生成一个字符private char randomChar () {int index = r.nextInt(codes.length());return codes.charAt(index);}// 创建BufferedImageprivate BufferedImage createImage () {BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB); Graphics2D g2 = (Graphics2D)image.getGraphics(); g2.setColor(this.bgColor);g2.fillRect(0, 0, w, h);return image;}// 调用这个方法得到验证码public BufferedImage getImage () {BufferedImage image = createImage();//创建图片缓冲区 Graphics2D g2 = (Graphics2D)image.getGraphics();//得到绘制环境StringBuilder sb = new StringBuilder();//用来装载生成的验证码文本// 向图片中画4个字符for(int i = 0; i < 4; i++)  {//循环四次，每次生成一个字符String s = randomChar() + "";//随机生成一个字母 sb.append(s); //把字母添加到sb中float x = i * 1.0F * w / 4; //设置当前字符的x轴坐标g2.setFont(randomFont()); //设置随机字体g2.setColor(randomColor()); //设置随机颜色g2.drawString(s, x, h-5); //画图}this.text = sb.toString(); //把生成的字符串赋给了this.textdrawLine(image); //添加干扰线return image;       }// 返回验证码图片上的文本public String getText () {return text;}// 保存图片到指定的输出流public static void output (BufferedImage image, OutputStream out) throws IOException {ImageIO.write(image, "JPEG", out);}
}

处理登录逻辑的Servlet(LoginServlet3.java):

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** Created by menglanyingfei on 2018/1/12.*/
@WebServlet(name = "LoginServlet3", value = "/LoginServlet3")
public class LoginServlet3 extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 编码request.setCharacterEncoding("utf-8");// 获取请求参数/*拿到页面传过来的手动输入的验证码, 该验证码要和生成图片上的文本验证码比较, 如果相同, 验证码输入成功!*/String imageText = request.getParameter("image");// 图片的验证码String text = (String) request.getSession().getAttribute("text");if (!text.equalsIgnoreCase(imageText)) {request.setAttribute("imageMess", "验证码输入错误!");request.getRequestDispatcher("/jsp/login3.jsp").forward(request, response);}// 获取用户名和密码String username = request.getParameter("username");String password = request.getParameter("password");if ("haha".equals(username) && "123".equals(password)) {// 将用户信息保存到session中request.getSession().setAttribute("username", username);// 使用cookie实现回写用户名Cookie cookie = new Cookie("username", username);cookie.setMaxAge(60 * 60);// 通过响应头发送cookieresponse.addCookie(cookie);// 重定向登录成功界面response.sendRedirect(request.getContextPath() + "/jsp/success2.jsp");} else {request.setAttribute("error", "用户名或密码错误!");request.getRequestDispatcher("/jsp/login3.jsp").forward(request, response);}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}
}

登录成功后的界面:(success2.jsp)

<%--User: menglanyingfeiDate: 2018/1/12Time: 16:44
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>成功登录</title>
</head>
<body>
<%// 获取用户信息String username = (String) session.getAttribute("username");if (username == null) {// 保存错误信息到request中, 然后转发到login3.jsp中, 提醒登录request.setAttribute("message", "请登录!");// 转发到登录页面request.getRequestDispatcher("/jsp/login3.jsp").forward(request, response);}
%>
<h2>欢迎登录:${sessionScope.username}!!!</h2>
</body>
</html>

最后, 演示登录:
因为, 用户名haha和密码123已经写死在代码里了!
登录.png
成功.png

完整代码地址

https://github.com/menglanyingfei/Java/tree/master/JavaWebTrain/day_1_12


http://chatgpt.dhexx.cn/article/LCdQp8AS.shtml

相关文章

验证码登录如何实现？

验证码登录如何实现？

手机验证码登录 1、需求分析2、数据模型3、代码开发-交互过程4、代码开发-准备工作5、代码开发-修改LoginCheckFilter6、代码开发-接口开发7、前端代码介绍8、启动测试 1、需求分析 为了方便用户登录&#xff0c;移动端通常都会提供通过手机验证码登录的功能。 手机验证码登录…
阅读更多...
登录验证

登录验证

登录验证理解&#xff1a;指的是进入一个页面或者是系统之前检验用户是否有权限进入 登录验证的步骤&#xff1a; ①　获取页面用户输入的数据&#xff0c;然后通过提交传递到控制器 ②　在控制器中对页面传过来的数据进行验证&#xff0c;检查数据数据是否为空&#xff0c;密码…
阅读更多...
网页登录时验证码功能的实现

网页登录时验证码功能的实现

网页登录时验证码功能的实现 在我们日常上网时&#xff0c;经常会遇到要登录的界面&#xff0c;我们会发现他会让你输入账号&#xff0c;密码外&#xff0c;还需要输入随机生成的验证码。 作用&#xff1a; 不少网站为了防止用户利用机器人自动注册、登录、灌水&#xff0c;都…
阅读更多...
登录验证码(前后端分离、不分离)

登录验证码(前后端分离、不分离)

1.简介  Java图形验证码&#xff0c;支持gif、中文、算术等类型&#xff0c;可用于Java Web、JavaSE等项目。 2.效果展示 3.导入项目 3.1.gradle方式的引入 dependencies {compile com.github.whvcse:easy-captcha:1.6.2 }3.2.maven方式引入 <dependencies><dep…
阅读更多...
JavaScript入门一（JS基础知识）

JavaScript入门一（JS基础知识）

文章目录 一、JavaScript是什么二、网页组成三、什么是JS引擎四、JavaScript特点五、JavaScript的组成六、JavaScript的引用方式1、行内嵌入式2、页内嵌入式3、外部式&#xff08;外链式&#xff09; 七、变量1、什么是变量2、变量的命名规则3、变量的定义方式4、变量的使用 八…
阅读更多...
JS逆向需要掌握的JS基础知识与前端知识

JS逆向需要掌握的JS基础知识与前端知识

本文将会把我平时在JS逆向中遇到的一些JS基础知识和遇到的问题写在这里。&#xff08;比较杂&#xff09; JS逆向需要掌握JS基础知识 nodejs和v8引擎的关系NodeJS环境和浏览器环境执行JS代码区别 webpackJS逆向中常见的window.webpackJsonp分析 JS基础语法声明时用"var&qu…
阅读更多...
Vue.js基础知识点总结

Vue.js基础知识点总结

Vue基础总结 邂逅Vuejs 1.认识Vuejs Vue是一个渐进式框架, 什么是渐进式的呢? 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建渐进式意味着你可以将Vue作为你应用的一部分嵌入其中&#xff0c;带来更丰富的交互体验。 Vue有很多特点和Web开发中常见的高级功能…
阅读更多...
JavaScript基础知识总结笔记

JavaScript基础知识总结笔记

一、js的两种引入方式 1.<script type"text/javascript"> 自己编写的js代码 </script> 将上面的代码放在<head></head>或者<body></body>之间 2.直接保存为js文件&#xff0c;然后外部调用<script type"text/java…
阅读更多...
JavaScript 基础知识总结（一）

JavaScript 基础知识总结（一）

这是近期学习JavaScript基础知识的学习笔记 目前在学习Web API&#xff0c;学习途中有时间的话也会发一发自己的心得吧 一.Java Script简介 JS分为三部分&#xff1a; 而学习的java script基本语法属于ECMAScript 二.书写位置 与CSS相同&#xff0c;JS的书写位置也有如下…
阅读更多...
JavaScript基础知识总结(1)

JavaScript基础知识总结(1)

hello小伙伴们&#xff0c;本期来更新一下JavaScript基础知识&#xff0c;当做对JS的复习。 之前更新的有CSS复习和HTML复习&#xff0c;在这里放上链接 前端大厂面试笔记&#xff08;二&#xff09;&#xff08;持续更~~&#xff09;_Ss、、帅海的博客-CSDN博客 正文开始 1…
阅读更多...
JS 基础知识

JS 基础知识

JS 基础知识 JS简介 JavaScript是一种基于对象和事件驱动并具有安全性能的解释型脚本&#xff0c;在Web应用中得到了非常广泛的应用。它不需要编译&#xff0c;而是直接嵌入在HTTP页面中&#xff0c;把静态页面转变成支持用户交互并响应应用的动态页面。在JavaWeb程序中&#x…
阅读更多...
网页游戏开发基础——JavaScript基础知识

网页游戏开发基础——JavaScript基础知识

对于初学编程的朋友来说&#xff0c;这篇文章有点长&#xff0c;而且会有点难懂。但是请不要放弃&#xff0c;我尽量以通俗的语言解释相关的编程概念&#xff0c;这里只讲解编写一个游戏需要的相关编程概念&#xff08;如需要会在后面的文章中随时补充相关概念&#xff09;&…
阅读更多...
js基础知识

js基础知识

1、JS的组成 JS由 ECMAscript BOM DOM组成 ECMAscript是JS基础规范、定义了JS基础语法 BOM浏览器对象模型 DOM文档对象模型 2、JS数据类型 基本数据类型&#xff1a;string number boolean undefined null symbol biginit 引用数据类型&#xff1a;object function ar…
阅读更多...
Node.js基础知识

Node.js基础知识

目录 1、为什么浏览器和Node.js都可以运行JavaScript 2、浏览器中运行JavaScript和Node.js中运行JavaScript有什么区别 3、为什么在浏览器中JavaScript不能控制系统级别的API 4、Node.js能做什么 5、全局对象-Node.js和浏览器 6、模块系统 7、Node.js是如何实现模块的&…
阅读更多...
JavaScript的基础知识

JavaScript的基础知识

1.JavaScript简介 以下注解可作为拓展材料&#xff1a; 1、脚本语言又被称为扩建的语言&#xff0c;或者动态语言&#xff0c;是一种编程语言&#xff0c;用来控制软件应用程序&#xff0c;脚本通常以文本&#xff08;如ASCII)保存&#xff0c;只在被调用时进行解释或编译。 …
阅读更多...
Javascript 基础知识学习

Javascript 基础知识学习

Javascript 基础知识学习 参考自&#xff1a;https://www.w3cschool.cn/javascript/ javascript 简介 JavaScript 是互联网上最流行的脚本语言&#xff0c;这门语言可用于 HTML 和 web&#xff0c;更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScri…
阅读更多...
JavaScript基础知识总结

JavaScript基础知识总结

一、基本语法&#xff08;数量&#xff0c;数据类型和运算符&#xff09; 1.变量&#xff1a;指的是在数据中心保存数据的容器 变量是计算机内存中存储数据的标识符&#xff0c;根据变量名称可以获取到内存中存储的数据 也就是说&#xff0c;我们向内存中存储了一个数据&…
阅读更多...
JS基础知识总结 （一）

JS基础知识总结 （一）

一、JS简介 JavaScript是一种运行在客户端的脚本语言&#xff0c;最早是在HTML&#xff08;标准通用标记语言下的一个应用&#xff09;网页上使用&#xff0c;用来给HTML网页增加动态功能。 浏览器就是一种运行JavaScript脚本语言的客户端&#xff0c;JavaScript的解释器被称为…
阅读更多...
最新Javascript 基础知识全总结(持续更新)

最新Javascript 基础知识全总结(持续更新)

目录 一,JavaScript 是什么 1, JavaScript 是什么 2, 作用 3, JavaScript的组成 二, JavaScript 书写位置 1,内部 JavaScript 2, 外部 JavaScript 3, 内联 JavaScript 三, JavaScript 的注释 1, 单行注释 2, 多行注释 四, JavaScript的结束符 五, 输入和输出语法 …
阅读更多...
JS入门基础知识

JS入门基础知识

一、JS是什么 1、JS概述 JavaScript是一个轻量级的语句&#xff0c;他是单线程的语言&#xff08;一个线程解析&#xff09;。他是一个弱语言&#xff08;他没有固定 的类型划分 你给定的值是什么类型 他就是什么类型&#xff09;他还是一个脚本语言&#xff08;侵入 实现xss攻…
阅读更多...
推荐文章

Copyright @ 2022~2023