多种页面验证码方式

最新推荐文章于 2024-06-16 23:04:02 发布
最新推荐文章于 2024-06-16 23:04:02 发布
阅读量671 收藏
点赞数
分类专栏： java工作中常用类整理 文章标签： random image string html input 图形

一.js实现验证码：


第一步：建一个login.htm，一个code.js文件，一个code.css文件，准备一张图片code.jpg

第二步：编写login.htm文件，内容为：

[html] view plain copy
  1. <html>  
  2. <head>  
  3. <script language = "javascript" src = "code.js"></script>  
  4. <link rel="stylesheet" type="text/css" href="code.css">  
  5. </head>  
  6. <body onload="createCode();">  
  7. <form>  
  8.  <center>验证码：<input type="text" id="input1" />  
  9. <input type="text" id="checkCode" class="code" style="width: 55px" /> <a href="#" onclick="createCode()">看不清楚</a>  
  10. <input id="Button1" onclick="validate();" type="button" value="确定" /></center>  
  11. </form>  
  12. </body>  
  13. </html>  


第三步：编写code.css文件，内容为：

[html] view plain copy
  1. .code{  
  2. background-image:url(code.jpg);  
  3. font-family:Arial;  
  4. font-style:italic;  
  5. color:Red;  
  6. border:0;  
  7. padding:2px 3px;  
  8. letter-spacing:3px;  
  9. font-weight:bolder;  
  10. }  


第四步：编写code.js文件，内容为：

[html] view plain copy
  1. var code ; //在全局 定义验证码  
  2. function createCode(){   
  3. code = "";  
  4. var codeLength = 4;//验证码的长度  
  5. var checkCode = document.getElementById("checkCode");  
  6. checkCode.value = "";  
  7.   
  8.   
  9. var selectChar = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');  
  10.   
  11.   
  12. for(var i=0;i<codeLength;i++) {  
  13.    var charIndex = Math.floor(Math.random()*32);  
  14.    code +=selectChar[charIndex];  
  15. }  
  16. if(code.length != codeLength){  
  17.    createCode();  
  18. }  
  19. checkCode.value = code;  
  20. }  
  21.   
  22.   
  23. function validate () {  
  24. var inputCode = document.getElementById("input1").value.toUpperCase();  
  25.   
  26.   
  27. if(inputCode.length <=0) {  
  28.    alert("请输入验证码！");  
  29.    return false;  
  30. }  
  31. else if(inputCode != code ){  
  32.    alert("验证码输入错误！");  
  33.    createCode();  
  34.    return false;  
  35. }  
  36. else {  
  37.    alert("OK");  
  38.    return true;  
  39. }  
  40.   
  41.   
  42. }  


第五步：把四个文件放到一个文件夹中，运行login.htm文件，显示结果为：

二.servlet实现验证码：

1.servlet内容

package com.yeshun.servlet;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class RandCodeServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = -7297771418249306891L;

	public RandCodeServlet() {
		super();
	}
	
	public void init() throws ServletException {
		// Put your code here
	}
	public void destroy() {
		super.destroy();
	}


//数字验证码(4位)
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws
    ServletException, IOException {
  //设置页面不缓存
  response.setHeader("Pragma", "No-cache");
  response.setHeader("Cache-Control", "no-cache");   
  response.setDateHeader("Expires", 0);
  response.setContentType("image/jpg");
  
  // 在内存中创建图象
  int width = 60, height = 20;
  BufferedImage image = new BufferedImage(width, height,
                            BufferedImage.TYPE_INT_RGB);

  // 获取图形上下文
  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(new Color(33,66,99));
  g.drawRect(0,0,width-1,height-1);

  // 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
  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);
  }

  // 取随机产生的认证码(4位数字)
  String sRand = "";
  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

  request.getSession().setAttribute("randCode", sRand);
  // 图象生效
  g.dispose();

  // 输出图象到页面
  ImageIO.write(image, "JPEG", response.getOutputStream());
}

public void doPost(HttpServletRequest request, HttpServletResponse response) throws
    ServletException, IOException {
  doGet(request, response);
}

//给定范围获得随机颜色
private Color getRandColor(int fc, int bc) {
  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);
}

	
/*
 //	验证码1(6位带字母)
 public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
		// 在内存中创建图象
		int width = 90, height = 20;
		BufferedImage image = new BufferedImage(width, height,
				BufferedImage.TYPE_INT_RGB);
		// 获取图形上下文
		Graphics g = image.getGraphics();
		// 生成随机类
		Random random = new Random();
		// 设定背景色
		g.setColor(Color.WHITE);
		g.fillRect(0, 0, width, height);
		// 设定字体
		g.setFont(new Font("Arial", Font.BOLD, 19));
		// 画边框
		// g.setColor(getRandColor(100, 250));
		// g.drawRect(0, 0, width - 1, height - 1);
		// 随机产生200条干扰线，使图象中的认证码不易被其它程序探测到
		for (int i = 0; i < 5; i++) {
			g.setColor(getRandColor(100, 200));
			int x = random.nextInt(width);
			int y = random.nextInt(height);
			int xl = random.nextInt(5);
			int yl = random.nextInt(5);
			g.drawLine(x, y, x + xl, y + yl);
			g.draw3DRect(x, y, xl, yl, false);
		}
		// 取随机产生的认证码(6位数字)
		String sRand = "";
		for (int i = 0; i < 6; i++) {
			char rand = getRandomStr(random);
			sRand += rand;
			// 将认证码显示到图象中
			g.setColor(new Color(20 + random.nextInt(110), 20 + random
					.nextInt(110), 20 + random.nextInt(110)));
			g.drawString(rand + "".toUpperCase(), 14 * i + 7, 16);
		}
		// 将认证码存入SESSION
		request.getSession().setAttribute("randCode", sRand);
		// 图象生效
		g.dispose();
		// 输出图象到页面
		ImageIO.write(image, "JPEG", response.getOutputStream());
	}

	private char getRandomStr(Random random) {
		char letters[] = "0123456789AaBbCcDdEeFfGgHhJjKkLMmNnOoPpQqRrSsTtUuVvWwXxYyZz"
				.toCharArray();
		return letters[random.nextInt(36)];
	}

	private Color getRandColor(int fc, int bc) {// 给定范围获得随机颜色
		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);
	}
*/
	
/*
	//验证码2（6位含字母）
	public void doGet(HttpServletRequest request, HttpServletResponse response)
	throws ServletException, IOException {
	doPost(request, response);
	}

public void doPost(HttpServletRequest request, HttpServletResponse response)
	throws ServletException, IOException {
	response.setHeader("Pragma","No-cache");  
    response.setHeader("Cache-Control","no-cache");  
    response.setDateHeader("Expires", 0);  
    response.setContentType("image/jpeg");  
      
    int width=100, height=18;  
    BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);  
      
    Graphics g = image.getGraphics();  
    Random random = new Random();  
    g.setColor(getRandColor(200,250));  
    g.fillRect(1, 1, width-1, height-1);  
    g.setColor(new Color(102,102,102));  
    g.drawRect(0, 0, width-1, height-1);  
    g.setFont(new Font("Arial Black", Font.PLAIN, 16));  

    g.setColor(getRandColor(160,200));  
    for (int i=0;i<155;i++)  
    {  
        int x = random.nextInt(width - 1);  
        int y = random.nextInt(height - 1);  
        int xl = random.nextInt(6) + 1;  
        int yl = random.nextInt(12) + 1;  
        g.drawLine(x,y,x + xl,y + yl);  
    }  
    for (int i = 0;i < 70;i++)  
    {  
        int x = random.nextInt(width - 1);  
        int y = random.nextInt(height - 1);  
        int xl = random.nextInt(12) + 1;  
        int yl = random.nextInt(6) + 1;  
        g.drawLine(x,y,x - xl,y - yl);  
    }  

    String sRand="";  
    for (int i=0;i<6;i++)  
    {  
    	String tmp = getRandomChar();  
        sRand += tmp;  
        g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));  
     g.drawString(tmp,15*i+10,15);  
    }  
    request.getSession().setAttribute("rand",sRand); 
    System.out.println(sRand);
    g.dispose();  
    ImageIO.write(image, "JPEG", response.getOutputStream());  
}
	private Color getRandColor(int fc,int bc)  
    {  
        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);  
    } 
	private String getRandomChar()  
    {  
	  int rand = (int)Math.round(Math.random() * 2);  
	  long itmp = 0;  
	  char ctmp = '\u0000';  
	  switch (rand)  
	  {  
	   case 1:  
	    itmp = Math.round(Math.random() * 25 + 65);  
	    ctmp = (char)itmp;  
	    return String.valueOf(ctmp);  
	   case 2:  
	    itmp = Math.round(Math.random() * 25 + 97);  
	    ctmp = (char)itmp;  
	    return String.valueOf(ctmp);  
	   default :  
	    itmp = Math.round(Math.random() * 9);  
	    return String.valueOf(itmp);  
	  }  
    }  
*/

}

2 编写login.jsp文件，内容为： 

<script>  
   function refresh()  
   {  
    document.getElementById("authImg").src='servlet/randCode?now=' + new Date();  
   }  
  </script>  
  <body>
  <img src="servlet/randCode" id="authImg" width="60" height="20">看不清？<a href="" onClick="refresh()">单击此处刷新</a> <br/>
  
  </body>

3 在web.xml文件中配置代码，内容为： 

<!-- 图片验证码 -->
 	<servlet>
		<servlet-name>randCode</servlet-name>
		<servlet-class>
			com.yeshun.servlet.RandCodeServlet
		</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>randCode</servlet-name>
		<url-pattern>/servlet/randCode</url-pattern>
	</servlet-mapping>



brianyeye
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端做登录验证码功能的理解
m0_48940868的博客
11-14 2382
前言 前端小白一名，记录日常学习生活点滴【第二周】 一、关于 前端做登录验证码功能的个人理解 做这个功能之前一定要搞清楚它的作用是什么： 【用它来确定正在访问网站的用户是人而不是一个程序】 原因：不管是何种验证码方式，都是要让程序难以判断，而让人好判断的原则设计的。 【防止用户利用机器人自动注册、登录、灌水】 原因：安全角度出发，随着网络速度的提高，如果没有一种防御机制的话，那么攻击者完全可以通过疯狂猜测尝试来获得用户的密码，还可以利用机器人自动注册、登录、灌水。想想多可怕。 一般来说，前端做登录验证就大
双登录页面验证码问题(bug记录)
一只蜗牛的博客
06-17 761
一开始觉得两个验证码刷新时会造成存入session的验证码字符串不同(因为验证码图片的src是controller动态生成图片的地址,担心生成一个图片就访问一次controller),所以做的是在验证码controller中生成两个验证码分别存放在不同名字的session属性中. 这样就产生了一个奇怪的bug,每次登出执行session.invalidate();之后session被销毁.跳转到...
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 登录注册表单自带自定（超实用）轻松搞定登录功能：完整源代码与详细教程（新手必看）轻松入门登录表单自带自定义验证码
最新发布
南北极之间
06-16 1079
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
网站中常见的验证码方式总结
Jessie_804的博客
03-28 2179
目前网站中常见的验证码方式总结：一、随机数字图片验证码特点：输入图片中的英文或数字来验证作用：识别人机；防止用户重复注册、登录、灌水（每次识别、输入验证码，哪有那么多耐心）二、滑动拼图验证作用：采用高精度人机行为识别技术，用户只需向右滑动拼图，补齐缺块儿，即可完成验证。拦截机器恶意注册、登录等行为。三、手机验证码验证特点：以手机标识身份，输入手机收到的验证码来验证作用：应该是为了验证是不是本尊吧，...
多页面验证码冲突的解决办法
weixin_30730151的博客
05-22 125
"多页面验证码冲突的解决办法" 转载于:https://www.cnblogs.com/mspeer/p/3744942.html
登录验证码（前端）
Caiabcd的博客
07-21 374
html <canvas id="randomCode" width="120" height="50" style="border:1px solid #bbbbbb;cursor: pointer;" title="点击更换验证码"> </canvas> js function randomStr(canvasId){ var c=document.getElementById(canvasId); var w=c.offsetWidth; va
jsp页面验证码完整实例
10-19
JSP页面验证码的实现方式 在JSP页面中实现验证码有多种方式，包括但不限于： - 文字图片验证码：用户输入显示在图片上的文字。 - 点选式验证码：用户需要选择图片中符合要求的对象。 - 数学题或逻辑题式验证码：...
ASP20多种验证码
01-22
在给定的压缩包文件中，"ASP20多种验证码" 提供了20多种不同的验证码实现，涵盖数字、算术和文字等多种类型。验证码是网络应用中常见的安全机制，用于防止自动机器人和恶意攻击，确保用户是真实的人而非自动化程序。...
注册页面用的验证码demo
07-05
然而，随着技术的发展，简单的文本验证码已经不能满足安全性需求，因此出现了多种验证码形式，如图像验证码、滑动验证码、点击验证码等。 在这个“注册页面用的验证码demo”中，我们可以推测它可能采用了一种现代且...
页面验证码例子
03-19
在IT行业中，页面验证码是一种广泛应用于网站安全性的重要技术，它主要用于防止自动化的机器人或恶意脚本进行非法操作，如批量注册、刷票等。验证码的主要目的是确保操作是由真实的人完成的，而不是由计算机程序。本...
jQuery多种验证码插件verify.js.zip
11-06
jQuery的verify.js插件是为了解决网页验证问题而设计的，它提供了多种验证码生成方式，包括图片验证码、滑动验证码、点击验证等，以满足不同场景下的安全需求。该插件的亮点在于其灵活性和易用性，开发者可以根据...
Java Web开发过程中登陆模块的验证码的实现方式总结
12-25
验证码及它的作用 验证码为全自动区分计算机和人类的图灵测试的缩写,是一种区分用户是计算机的公共全自动程序,这个问题可以由计算机生成并评判,但是必须只有人类才能解答.可以防止恶意破解密码、刷票、论坛灌水、有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录。 图文验证码的原理 在servlet中随机生成一个指定位置的验证码,一般为四位,然后把该验证码保存到session中.在通过Java的绘图类以图片的形式输出该验证码。为了增加验证码的安全级别,可以输出图片的同时输出干扰线,最后在用户提交数据的时候,在服务器端将用户提交的验证码和Session保存的验证码进行比较。 实现方式
前端常见的【手机验证码】【图片验证码】功能实现-前后端配合实现
Sabrina_cc的博客
11-02 8330
人们总喜欢”甜“，而忘记”先苦后甜“ 一般在系统的注册、登录、反馈等页面需要验证用户个人身份信息，就需要用到【手机验证码】和【图片验证码】功能。 目录 一. 手机验证码功能 1. 实现思路 2. 后端接口 3. 前端实现 二、图片验证码功能 1. 实现思路 2. 后端接口 3. 前端实现 一. 手机验证码功能 1. 实现思路 页面需要实现找回密码功能，点击”获取验证码“,调用后端提供的接口，在60秒内提交找回密码请求，将数据表单和验证码发送给后端，后端校验是否为最新的验证码...
前端登录验证
weixin_43727458的博客
08-18 1727
随着技术发展，前端登录验证也是层出不穷，今天主要介绍一下主流的滑块认证和验证码认证 滑块认证 滑块认证属于行为认证，主要通过用户的操作行为来区分机器模拟行为。实现如下，这里使用vue搭建的系统。 系统界面： <!-- 先在页面上设置两个容器，用于存放滑块图片和验证结果 --> <div ref="captcha" id="captcha"></div> <div id="msg"></div> <sc
Web应用登录验证的几种方式
Zero摄氏度的博客
08-25 4640
1、HTTP 是无状态的，为了维持前后请求，需要前端存储标记-----cookie 2、cookie 是一种完善的标记方式，通过 HTTP 头或 js 操作，有对应的安全策略，是大多数状态管理方案的基石 3、session 是一种状态管理方案，前端通过 cookie 存储 id，后端存储数据，但后端要处理分布式问题 4、token 是另一种状态管理方案，token 的编码技术，通常基于 base64，或增加加密算法防篡改；jwt 是一种成熟的编码方案，并且JWT实现了无状态登录，相较于传统的有状态登录
常见的登录验证方式
qq_53207874的博客
04-15 1563
当用户要访问B系统时，B系统将它重定向到SSO，已经登录了，所以SSO直接颁发可以访问B系统的ticket，客户端带着这个ticket就可以访问B系统了。这样就实现了一处登录，全线使用。当用户点击链接时，浏览器会自动发送包含用户认证信息的请求，从而执行攻击者指定的操作。Token 机制是无状态的，服务器不需要保存用户的会话状态，因此可以降低服务器的负载，特别适用于分布式系统和微服务架构。当业务线越来也多，就会有更多业务系统分散到不同域名下（不同的系统），就需要（一次登录，全线通用）的能力，这就是单点登录。
前端 登录方案
weixin_43294560的博客
12-15 5822
账号密码登录 收集用户输入的用户名和密码，发送给后端和数据库比对验证，用户是否存在，密码是否正确，都OK就返回登录成功和用户信息等 有的会加一个图形验证码之类的，就是调接口，然后后端随机生成图形验证码，并存到 session 或者 token (取决于你项目采用的登录验证方式，在本文下一章节)，然后发送给前端展示 前端点登录的时候收集用户输入的验证码，和后端比对，都OK就返回登录成功和用户信息等 手机验证码登录、邮箱登录 比如手机验证码登录 前端点击发送验证码，把手机号传给后端，后端生成随机数，然后把号码和
史上最简便的可以直接用的登录验证码攻略（前后端都有）
qq_52357485的博客
07-09 2414
史上最好用的可以直接复制粘贴的验证码实现攻略
进网页需要验证码？不好意思，Python从来不惧各种验证码！
轻松学python的博客
11-11 354
今天 要来说说滑动验证码了 大家应该都很熟悉 点击滑块然后移动到图片缺口进行验证 现在越来越多的网站使用这样的验证方式 为的是增加验证码识别的难度 那么，对于这种验证码应该怎么破呢 接下来就是见证神奇的时刻 打开 b 站的登录页面 可以看到登录的时候需要进行滑块验证 按下 F12，进入 Network，看下我们将滑块移到缺口松开之后做了什么提交 可以看到是...
jQuery网页：实战多种类型验证码插件代码实例
本资源是一份关于多种类型jQuery网页验证码插件的代码实例文档，主要展示了如何在HTML页面上实现数字字母、算数、滑动、拼图和点选等多种形式的验证码功能。文档以HTML5结构为基础，包含HTML头部元数据设置、CSS链接...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值