Web网页实现登录验证码功能

三部分内容

1、在登录页面生成验证码图片

2、点击图片更换新的验证码图片

3、点击登录，判定输入验证码与实际验证码是否一致

1、如何生成一个验证码图片，放置在登录页面？

servlet：

package com.zs.ssh.yzmServlet;import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;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;/*** Servlet implementation class yzmServlet*/
@WebServlet("/yzmServlet")
public class yzmServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public yzmServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 首先设置浏览器不缓存response.setHeader("cache-control", "no-cache");response.setHeader("Expire", "-1"); // >0为缓存response.setHeader("pragma", "no-cache");// 存储正确的验证码String vali_code = "";String Vali_str = "abcdefghijklmnopqrstuvwsyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ";Color[] colors ={ Color.BLACK, Color.RED, Color.BLUE };// 1.创建图像int width = 110, height = 40;int x_offset = 5, y_offset = 28;BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_3BYTE_BGR);// 2.创建画布Graphics2D g = img.createGraphics();// 3.为画布添加背景颜色为亮灰色g.setColor(Color.LIGHT_GRAY);g.fillRect(0, 0, width, height);//fillRect是包括矩形框内部// 4.为画布添加边框g.setColor(Color.BLUE);g.drawRect(0, 0, width - 1, height - 1);//drawRect是绘制矩形边框// 5.绘制干扰线for (int i = 0; i < 10; i++){g.setColor(new Color(randNum(0, 255), randNum(0, 255), randNum(0, 255)));g.drawLine(randNum(0, width), randNum(0, height), randNum(0, width), randNum(0, height));}g.setFont(new Font("黑体", Font.BOLD, 20));for (int i = 0; i < 4; i++){int r = randNum(-180, 180);String code = Vali_str.charAt(randNum(0, Vali_str.length() - 1)) + "";g.rotate(r / 180 * Math.PI);g.setColor(colors[randNum(0, colors.length)]);g.drawString(code, x_offset + i * 30, y_offset);g.rotate(-r / 180 * Math.PI);vali_code += code;}//将验证码的内容存储在HttpSession中HttpSession session = request.getSession();session.setAttribute("Valicode", vali_code);// 通过response的输出流打给浏览器ImageIO.write(img, "jpg", response.getOutputStream());}private Random random = new Random();//随机生成begin和end之间的一个int值private int randNum(int begin, int end){return random.nextInt(end - begin) + begin;}
}

html页面：

<input type="text" placeholder="用户名" /><!-- 用户名 -->
<input type="password"  id="password"/><!-- 密码 -->
<img src="/ZXTM/yzmServlet" οnclick="changeValiImage(this)" /><!-- 验证码图片 -->
<input type="text" placeholder="输入验证码" name="ValiImage" /><!-- 输入验证码文本 -->
<button οnclick="doLogin()" >登录</button>

2、如何切换验证图片？

<!-- 验证码图片点击切换 -->
<!-- 通过Date来改变每次访问的url不同 -->
<script type="text/javascript">function changeValiImage(img){img.src = "/ZXTM/yzmServlet?time=" + new Date().getTime();}
</script>

2、如何判定验证码的一致性？

在 doLogin() 登录的方法里面：

获取网页文本信息

再获取getSession().getAttribute("Valicode")里面保存的生成的验证码信息

String vali_user = getRequest().getParameter("ValiImage");
String vali_sys = getSession().getAttribute("Valicode").toString();

Web网页实现登录验证码功能相关推荐

网页实现登录验证码功能
步骤1:在登录页面生成验证码图片 src/main/java/top/qiudb/controller/util/UtilController.java 步骤2:点击图片更换新的验证码图片步骤3:点 ...
Django前后端分离实现登录验证码功能
Django前后端分离实现登录验证码功能当下最流行最热门的开发方式当属前后端分离开发,分工也更加明确与专注,前端也是越来越难,几天不学习就跟不上节奏,一个月不学习可以好不夸张的说,你已经不适合这个行 ...
php登录调用验证码,PHP编写登录验证码功能附调用方法
本文实例为大家分享了一个PHP写的登录验证码功能,供大家参考,具体内容如下 ShowKey.php<?php session_start(); //设置COOKIE或Session functi ...
web网页中的验证码实现
前言技巧点总结非常重要,等到在自己做项目中突然想用到了,可以来看看自己的博客,算是积累自己代码库的一种方式.下面小编对于牛腩新闻系统中的"验证码功能"方法做一下总结. 一.代码段 ...
php实现登录验证码_PHP实现登录验证码功能
本篇文章主要介绍PHP如何编写登录验证码的功能,感兴趣的朋友参考下,希望对大家有所帮助. 在最顶端声明函数 session_start(); 告诉服务器我们要用这个函数的功能.session_star ...
html页面实现登录验证码功能（纯前端）
html+css+javascript简易实现注册或登录时实现验证码功能: 原文链接:https://blog.csdn.net/weixin_41472431/article/details/907 ...
【Web开发】登录注册功能实现
登录注册是网站的常用功能,本篇根据黑马程序员的教程来实现此功能的小demo. 参考:https://www.bilibili.com/video/BV1Qf4y1T7Hx?p=109 maven文件下 ...
JavaWeb实现登录验证码功能
先在Web目录下的lib目录中导入jar包:ValidateCode.jar 然后创建一个Servlet类来创建验证码:ValidateCodeServlet.java 创建验证码将验证码存储到se ...
微博网页端登录验证码处理
当微博账号出现异地登录时,就会要求输入验证码,那么怎么判断微博的登录是否会出现验证码呢, 对不同的账号进行抓包分析可以查看到.当用户输入完账号时,就会向服务器发送请求,将用户输入的账号进行验证,根据返 ...