登录校验,生成随机图形验证码
package com.env.util;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class RandomValidateCode {
public static final String RANDOMCODEKEY = "RANDOMVALIDATECODEKEY";//放到session 中的key
private Random random = new Random();
private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生的字符串
private int width = 80;//图片宽
private int height = 26;//图片高
private int lineSize = 40;//干扰线数量
private int stringNum = 4;//随机产生字符数量
/*
* 获得字体
*/
private Font getFont(){
return new Font("Fixedsys",Font.CENTER_BASELINE,18);
}
/*
* 获得颜色
*/
private Color getRandColor(int fc,int bc){
if(fc > 255)
fc = 255;
if(bc > 255)
bc = 255;
int r = fc + random.nextInt(bc-fc-16);
int g = fc + random.nextInt(bc-fc-14);
int b = fc + random.nextInt(bc-fc-18);
return new Color(r,g,b);
}
/**
* 生成随机图片
*/
public void getRandcode(HttpServletRequest request,
HttpServletResponse response) {
HttpSession session = request.getSession();
//BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_BGR);
Graphics g = image.getGraphics();//产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作
g.fillRect(0, 0, width, height);
g.setFont(new Font("Times New Roman",Font.ROMAN_BASELINE,18));
g.setColor(getRandColor(110, 133));
//绘制干扰线
for(int i=0;i<=lineSize;i++){
drowLine(g);
}
//绘制随机字符
String randomString = "";
for(int i=1;i<=stringNum;i++){
randomString=drowString(g,randomString,i);
}
session.removeAttribute(RANDOMCODEKEY);
session.setAttribute(RANDOMCODEKEY, randomString);
System.out.println(randomString);
g.dispose();
try {
ImageIO.write(image, "JPEG", response.getOutputStream());//将内存中的图片通过流动形式输出到客户端
} catch (Exception e) {
e.printStackTrace();
}
}
/*
* 绘制字符串
*/
private String drowString(Graphics g,String randomString,int i){
g.setFont(getFont());
g.setColor(new Color(random.nextInt(101),random.nextInt(111),random.nextInt(121)));
String rand = String.valueOf(getRandomString(random.nextInt(randString.length())));
randomString +=rand;
g.translate(random.nextInt(3), random.nextInt(3));
g.drawString(rand, 13*i, 16);
return randomString;
}
/*
* 绘制干扰线
*/
private void drowLine(Graphics g){
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(13);
int yl = random.nextInt(15);
g.drawLine(x, y, x+xl, y+yl);
}
/*
* 获取随机的字符
*/
public String getRandomString(int num){
return String.valueOf(randString.charAt(num));
}
}。
拖动图片验证码 原理
拖动图片验证码原理
拖动图片验证码是一种常见的验证方式，用于确认用户的人类身份以防止自动化程序的恶意登录或注册。
该验证码的原理是将一张图片分割成若干部分，并将其位置随机打乱，使得图片呈现出错位的状态。
用户需要通过拖动图片块的方式，将其恢复到正确的位置，以完成验证。
这种验证方式的目的是利用人类的视觉和交互能力来完成任务。
正常的人类用户可以通过观察图片中的元素、分析它们的关系和位置来辨认图片的正确排列顺序，并进行相应的拖动操作。
同时，拖动图片验证码还可以应对自动化程序对验证码的识别。
由于图片的位置和排列是动态生成的，并且要求用户进行交互操作，自动化程序很难正确地解决这个任务。
为了提高难度和安全性，拖动图片验证码还可能包含其他的干扰元素，例如噪点、模糊效果、干扰线等。
这些干扰元素会增加用户的视觉判断难度，同时使自动化程序更难以识别和攻破验证码。
总之，拖动图片验证码利用人类的感知和交互能力，通过要求用户拖动图片块恢复正确排列顺序来完成验证，从而有效防止自动化程序的恶意行为。
注册登陆界面验证码的作用及代码实现
注册登陆界⾯验证码的作⽤及代码实现简介：验证码的作⽤：主要是为了有效防⽌机器恶意注册，对某⼀个特定已注册⽤户⽤特定程序暴⼒破解⽅式进⾏不断的登陆尝试。
验证码是现在很多⽹站注册/登录时必填的，虽然对⽤户可能有点⿇烦，但是对⽹站/社区来说这个功能还是很有必要，也很重要，不少⽹站为了防⽌⽤户利⽤机器⼈⾃动注册、登录、灌⽔，都采⽤了验证码技术。
所谓验证码，就是将⼀串随机产⽣的数字或符号，⽣成⼀幅图⽚，图⽚⾥加上⼀些⼲扰象素（防⽌OCR），由⽤户⾁眼识别其中的验证码信息，输⼊表单提交⽹站验证，验证成功后才能使⽤某项功能。
在这⾥想要提醒⼤家要保护⾃⼰的密码，尽量使⽤混杂了数字、字母、符号在内的6位以上密码，不要使⽤诸如1234之类的简单密码或者与⽤户名相同、类似的密码。
任何时候在任何地⽅都不要随意设置密码，保护你⾃⼰的密码也是保护你⾃⼰，免得你的账号给⼈盗⽤给⾃⼰带来不必要的⿇烦。
常见的验证码：1.四位数字，随机的⼀数字字符串，最原始的验证码，验证作⽤⼏乎为零。
2.⽹站⽤户登录⽤的是GIF格式，⽬前常⽤的随机数字图⽚验证码。
图⽚上的字符⽐较中规中矩，验证作⽤⽐上⼀个好。
没有基本图形图像学知识的⼈，不可破！可惜读取它的程序，在CSDN使⽤它的第⼀天，好像就在论坛⾥发布了。
3.QQ⽹站⽤户登录⽤的是PNG格式，图⽚⽤的随机数字+随机⼤写英⽂字母，整个构图有点张扬,每刷新⼀次,每个字符还会变位置呢!有时候出来的图⽚,⼈眼都识别不了,厉害啊…4.MS的申请时候的是, 随机数字+随机⼤写英⽂字母+随机⼲扰像素+随机位置。
5.的Gmail注册时候的是JPG格式，随机英⽂字母+随机颜⾊+随机位置+随机长度。
6，其他各⼤论坛的是XBM格式，内容随机。
实现代码：⽣成验证码图⽚（dlimage.jsp）：1 <%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" pageEncoding="UTF-8" %>2 2 <%!Color getRandColor(int fc, int bc) {//给定范围获得随机颜⾊3 3 Random random = new Random();4 4 if (fc > 255)5 5 fc = 255;6 6 if (bc > 255)7 7 bc = 255;8 8 int r = fc + random.nextInt(bc - fc);9 9 int g = fc + random.nextInt(bc - fc);10 10 int b = fc + random.nextInt(bc - fc);11 11 return new Color(r, g, b);12 12 }%>13 13 <%14 14 //设置页⾯不缓存15 15 response.setHeader("Pragma", "No-cache");16 16 response.setHeader("Cache-Control", "no-cache");17 17 response.setDateHeader("Expires", 0);18 1819 19 // 在内存中创建图象20 20 int width = 75, height = 32;21 21 BufferedImage image = new BufferedImage(width, height,22 22 BufferedImage.TYPE_INT_RGB);23 2324 24 // 获取图形上下⽂25 25 Graphics g = image.getGraphics();26 2627 27 //⽣成随机类28 28 Random random = new Random();29 2930 30 // 设定背景⾊31 31 g.setColor(getRandColor(200, 250));32 32 g.fillRect(0, 0, width, height);33 3334 34 //设定字体35 35 g.setFont(new Font("Times New Roman", Font.BOLD, 18));//18是设置的字体⼤⼩36 3637 37 //画边框38 38 g.setColor(new Color(0, 0, 0));39 39 g.drawRect(0, 0, width - 1, height -1);// 细线围成的边框范围40 4041 41 // 随机产⽣155条⼲扰线，使图象中的认证码不易被其它程序探测到42 42 g.setColor(getRandColor(160, 200));43 43 for (int i = 0; i < 155; i++) {44 44 int x = random.nextInt(width);45 45 int y = random.nextInt(height);46 46 int xl = random.nextInt(12);47 47 int yl = random.nextInt(12);48 48 g.drawLine(x, y, x + xl, y + yl);49 49 }50 5051 51 // 取随机产⽣的认证码(4位数字)52 52 String sRand = "";53 53 for (int i = 0; i < 4; i++) {54 54 String rand = null;55 55 //随机⽣成数字或者字母56 56 if (random.nextInt(10) > 5) {57 57 rand = String.valueOf((char)(random58 58 .nextInt(10) + 48));59 59 } else {60 60 rand = String.valueOf((char)(random61 61 .nextInt(26) + 65));62 62 }63 63 sRand += rand;64 64 // 将认证码显⽰到图象中65 65 g.setColor(new Color(random.nextInt(80), random66 66 .nextInt(80), random.nextInt(80)));67 67 //调⽤函数出来的颜⾊相同，可能是因为种⼦太接近，所以只能直接⽣成68 68 g.drawString(rand, 15 * i + 10, 16);69 69 }70 7071 71 // 将认证码存⼊SESSION72 72 session.setAttribute("rand", sRand);73 7374 74 // 图象⽣效75 75 g.dispose();76 7677 77 // 输出图象到页⾯78 78 ImageIO.write(image, "JPEG", response.getOutputStream());79 79 %>在注册或登陆页⾯中引⽤⽣成的验证码图⽚：<!-- 验证码图⽚的⽣成--><img id="code" src="dlimage.jsp"/><a href="#" onclick="javascript:var dt=new Date();document.getElementById('code').src='dlimage.jsp?dt='+dt;"> <img alt="看不清，换⼀张"src="dlimages/1.png"/></a>（*区分字母⼤⼩写）检验验证码输⼊正确与否：<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %><html><head><title>注册出现问题</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><META HTTP-EQUIV="Pragma" CONTENT="no-cache"><META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"><META HTTP-EQUIV="Expires" CONTENT="0"></head><body><%String rand = (String)session.getAttribute("rand");<!-系统随机产⽣的验证码-->String input = request.getParameter("rand");<!--⽤户输⼊的验证码--> if (input.equals(rand)){%><!-- 验证码正确的情况下 --><jsp:forward page="dl.jsp"/> <!-- 此处重定向到的页⾯可改为登录成功后可进⼊的页⾯ --><%} else {%>系统产⽣的验证码为： <%= rand %><br/>您输⼊的验证码为： <%= input %><br/><!--验证码错误情况下-->认证失败，请返回登录界⾯，重新输验证码!<br/><a href="dl.jsp">返回登录界⾯</a><%}%></body></html>。
vue实现登录时图形验证码
vue实现登录时图形验证码本⽂实例为⼤家分享了vue实现登录时图形验证码的具体代码，供⼤家参考，具体内容如下效果图：点击图案可以切换字符1.新建 Identify.vue 组件<template><div><canvasid="s-canvas":width="contentWidth":height="contentHeight"></canvas></div></template><script>export default {name: "identify",props: {identifyCode: {type: String,default: ''},fontSizeMin: {type: Number,default: 28},fontSizeMax: {type: Number,default: 40},backgroundColorMin: {type: Number,default: 180},backgroundColorMax: {type: Number,default: 240},colorMin: {type: Number,default: 50},colorMax: {type: Number,default: 160},lineColorMin: {type: Number,default: 40},lineColorMax: {type: Number,default: 180},dotColorMin: {type: Number,default: 0},dotColorMax: {type: Number,default: 255},contentWidth: {type: Number,default: 130},contentHeight: {type: Number,default: 40}},methods:{// ⽣成⼀个随机数randomNum (min, max) {return Math.floor(Math.random() * (max - min) + min)},// ⽣成⼀个随机的颜⾊randomColor (min, max) {let r = this.randomNum(min, max)let g = this.randomNum(min, max)let b = this.randomNum(min, max)return 'rgb(' + r + ',' + g + ',' + b + ')'},drawPic () {let canvas = document.getElementById('s-canvas')let ctx = canvas.getContext('2d')ctx.textBaseline = 'bottom'// 绘制背景ctx.fillStyle = this.randomColor(this.backgroundColorMin,this.backgroundColorMax)ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)// 绘制⽂字for (let i = 0; i < this.identifyCode.length; i++) {this.drawText(ctx, this.identifyCode[i], i)}this.drawLine(ctx)this.drawDot(ctx)},drawText (ctx, txt, i) {ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)ctx.font =this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)let deg = this.randomNum(-30, 30)// 修改坐标原点和旋转⾓度ctx.translate(x, y)ctx.rotate(deg * Math.PI / 270)ctx.fillText(txt, 0, 0)// 恢复坐标原点和旋转⾓度ctx.rotate(-deg * Math.PI / 270)ctx.translate(-x, -y)},drawLine (ctx) {// 绘制⼲扰线for (let i = 0; i < 2; i++) {ctx.strokeStyle = this.randomColor(this.lineColorMin,this.lineColorMax)ctx.beginPath()ctx.moveTo(this.randomNum(0, this.contentWidth),this.randomNum(0, this.contentHeight))ctx.lineTo(this.randomNum(0, this.contentWidth),this.randomNum(0, this.contentHeight))ctx.stroke()}},drawDot (ctx) {// 绘制⼲扰点for (let i = 0; i < 20; i++) {ctx.fillStyle = this.randomColor(0, 255)ctx.beginPath()ctx.arc(this.randomNum(0, this.contentWidth),this.randomNum(0, this.contentHeight),1,0,2 * Math.PI)ctx.fill()}}},watch: {identifyCode () {this.drawPic()}},mounted () {this.drawPic()}}</script><style lang="scss" scoped>#s-canvas {height: 38px;}</style>2.在⽗组件 index.vue注册使⽤<template><div @click="refreshCode" style="cursor: pointer;"><Identify :identifyCode="identifyCode" ></Identify></div></template><script>import Identify from '@/components/test/identify'export default {name: "index",components:{Identify},data(){return {identifyCode: '',// 验证码规则identifyCodes: '123456789ABCDEFGHGKMNPQRSTUVWXYZ',}},methods:{// 切换验证码refreshCode() {this.identifyCode = ''this.makeCode(this.identifyCodes, 4)console.log(this.identifyCode)},// ⽣成随机验证码makeCode(o, l) {for (let i = 0; i<l; i++) {this.identifyCode += this.identifyCodes[Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)]}},mounted() {this.refreshCode()}}</script><style scoped></style>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
DAY6图形验证码以及短信验证码的处理
DAY6图形验证码以及短信验证码的处理到我们点击项⽬⾸页的注册时，会弹出⼀个注册页⾯，⾥⾯需要我们后台提供图形验证码以及⼿机验证码下⾯我们来依次处理图形验证码的处理我们先来简单的做个分析⾸先当我们点击注册时，我们需要给到通过浏览器给服务器发送⼀个随机码来进⾏下次请求时双⽅的校验，⽤浏览器的Javascript⽣成UUID来解决，通过GET请求发送（通过两个⽅⾯来考虑，第⼀个这个本⾝不需要加密，第⼆个是通过img标签⾥src默认为GET）当我们给服务器发送了UUID之后，服务器对UUID进⾏保存，然后校验UUID，然后⽣成图⽚验证码（图⽚验证码分为三个部分，⽣成的图⽚验证码名字，图⽚⾥的验证码⽂本，画上了验证码的图⽚），我们需要把UUID保存在redis中，且作为保存值的键，然后提取图⽚验证码的验证码⽂本作为保存的值。
然后我们再给浏览器返回画上了验证码的图⽚就可以了。
这样当⽤户通过返回的图形验证码图⽚⾥的⽂字输⼊了⽂本验证码后再次给到服务器，这⾥浏览器还需要将UUID和输⼊⽂本的⽂本验证码⼀起给到服务器。
因为服务器需要通过给到的UUID作为取值的键来取上次保存的数据，也是做进⼀步的校验和实现状态保存，你是上次给我UUID的那个浏览器。
只有当两次请求给到服务器的UUID⼀致时才能够进⾏上次⽣成图⽚验证码⽂本的提取⼤致分析完之后我们就开始写代码浏览器前端的处理：我们来到我们⾸页的HTML⽂件，打开我们项⽬下的index.html,然后找到我们图形验证码的相关内容，最初⽂件的img标签， src ⾥⾯有⼀堆数据，我们先复制⼀下最初的img标签，复制了然后注释掉，然后再进⾏删除然后Ctrl加左键点击函数来到函数的内容页⾯，这⾥⾯就有我们图⽚验证码的相关内容：最初的⽂件⾥function generateImageCode() {}⾥⾯是空的，这⾥我把代码补充了，代码我也复制再下⾯并做个简单的解释;function generateImageCode() {imageCodeId = generateUUID() #⽣成UUID，⽂件的最下⾯有⽣成UUID的函数，这⾥只是函数的调⽤和⽤新的变量来对imageCOdeId变量进⾏覆盖var url = "/passport/imageCode?imageCodeId="+ imageCodeId #⾃定义⼀个URL地址的变量，后台先创建对应的视图，然后再填写对应的视图URL加上？kv 将UUID通过GET请求给到服务器后台$(".get_pic_code").attr("src",url) #将构造好的URL给到url}⽂件后⾯⽣成UUID的函数后台创造新的视图函数：⾸先在我们的moduls⽂件夹⾥⾯再创建⼀个新的Python⽂件夹（passport）⽤来存放我们登录注册相关的相关内容，然后建⽴⼀个叫views 的Python⽂件来存放相关的视图函数然后就是在__init__⾥⾯写⼊蓝图三步，这⾥我们需要在实例化的时候加⼊url_prefix，也就是前缀，⼀定要记得在前缀最开始加上反斜杠/完成之后再在我们项⽬的info的__init__⽂件夹，然后导⼊注册蓝图完成之后来到我们的视图函数页⾯进⾏视图函数的编写，这⾥先简单的编写⼀下路由和函数就可以了，后⾯我们再进⾏补全，这⾥主要是为了补全我们前端的URL地址：当我们完成对前端⽂件的修改后，再次执⾏主⽂件并点击主页⾯的注册，然后后端查看请求就可以看到我们的UUID 了，当点击图⽚验证码时会刷新请求出现携带不同的UUID的请求 :这样我们图形验证码前端HTML⽂件的修改就完成了后端代码的处理（对应视图函数的编写）：当我们去写项⽬的视图函数时需要在我们函数的⽂本注释⾥⾯写上我们的思路以及相应的实现步骤，这样⽅便我们后续代码的编写，这是⼗分重要的。
验证码实现原理
验证码实现原理验证码实现原理验证码是指在用户注册、登录、找回密码等操作中，为了防止机器人恶意攻击或者恶意注册，需要进行验证的一种方式。
常见的验证码包括数字验证码、图形验证码、短信验证码等。
那么验证码是如何实现的呢？一、数字验证码的实现原理数字验证码一般是由4-6个数字组成的，下面介绍数字验证码的实现原理：1.生成验证码：服务器生成一个不重复的随机验证码，并将此验证码存入session中，同时将验证码展示在客户端需要填写验证码的位置上。
2.验证验证码：当用户填写验证码提交表单时，客户端通过AJAX将客户端填写的验证码发送到服务器端进行验证，服务器通过session中存储的验证码进行比对，如果一致则验证通过，否则验证失败。
二、图形验证码的实现原理图形验证码一般是显示一张由数字、字母或图形组成的图片，并要求用户输入正确的验证码。
下面介绍图形验证码的实现原理：1.生成验证码：服务器生成一个不重复的随机字符串，然后将这段字符串绘制成一张图片，并将此验证码存入session中，同时将验证码图片展示在客户端需要填写验证码的位置上。
2.验证验证码：当用户填写验证码提交表单时，客户端通过AJAX将客户端填写的验证码发送到服务器端进行验证，服务器通过session中存储的验证码进行比对，如果一致则验证通过，否则验证失败。
三、短信验证码的实现原理短信验证码是指向用户发送一条短信，短信中包含验证码，并让用户填写正确的验证码。
下面介绍短信验证码的实现原理：1.生成验证码：服务器生成一个不重复的随机数字，并将此验证码存入session中，同时向用户注册的手机号发送一条短信，短信中包含验证码。
2.验证验证码：用户填写收到的短信验证码，并提交表单，客户端通过AJAX将客户端填写的验证码发送到服务器端进行验证，服务器通过session中存储的验证码进行比对，如果一致则验证通过，否则验证失败。
总结：以上就是常见验证码实现的原理，不同的验证码实现方式有不同的验证过程，但都是为了防止机器人恶意攻击或者恶意注册而设置的。
随机生成验证码的两种方法
随机生成验证码的两种方法
方法一： 利用range方法 import random def generate_verification_code(len=6):
''' 随机生成6位的验证码 ''' # 注意： 这里我们生成的是0-9A-Za-z的列表，当然你也可以指定这个list，这里很灵活 # 比如： code_list = ['P','y','t','h','o','n','T','a','b'] # PythonTab的字母 code_list = [] for i in range(10): # 0-9数字
cod, 91): # 对应从“A”到“Z”的ASCII码
code_list.append(chr(i)) for i in range(97, 123): #对应从“a”到“z”的ASCII码
code_list.append(chr(i)) myslice = random.sample(code_list, len) # 从list中随机获取6个元素，作为一个片断返回 verification_code = ''.join(myslice) # list to string return verification_code 方法二： 利用randint方法 import random def generate_verification_code_v2(): ''' 随机生成6位的验证码 ''' code_list = [] for i in range(2):
验证码实现原理
验证码实现原理
验证码实现的原理是基于人机识别的思想，通过给用户展示一些特定的图像或文本，要求用户根据这些信息做出相应的回答或操作，以验证用户的身份。
具体实现的原理包括以下几个步骤：
1. 生成验证码：系统根据预设的规则和参数，通过随机生成一组图像、文字或数字等信息作为验证码的内容。
这些信息可能包括字母、数字、形状、色彩等元素，并通过绘制、渲染等方式生成最终的验证码图片。
2. 展示验证码：将生成的验证码图片展示给用户，一般会将验证码图片显示在网页或应用的相应位置上，通常配合提示文字或说明，告知用户需要根据验证码图像进行相应的操作。
3. 用户响应：用户根据验证码图片展示的内容，按照要求回答或操作相应的需求。
例如，用户可能需要在输入框中输入验证码中显示的字母、数字等，或者根据图像中的要求选择符合条件的选项。
4. 校验验证码：用户通过完成相应的回答或操作后，系统会将用户的响应信息与生成的验证码进行比对校验。
校验方法通常采用图像识别算法或直接比对用户输入的文本与验证码图像生成的文本是否一致。
5. 验证结果：校验完成后，系统会判断用户的验证码回答或操
作是否正确，并根据结果进行相应的处理。
如验证成功，则表示用户的身份验证通过，可以继续进行后续操作；若验证失败，则可能要求用户重新输入验证码或进行其他验证方式。
通过以上步骤，验证码能够起到一定的安全验证作用，防止机器或恶意攻击等非法行为的发生，保护用户的信息安全。
JavaScript实现4位随机验证码的生成
JavaScript实现4位随机验证码的⽣成本⽂实例为⼤家分享了JavaScript⽣成4位随机验证码的具体代码，供⼤家参考，具体内容如下代码：<!doctype html><html><head><meta charset="utf-8"><title>4位随机验证码的⽣成</title><style>label{color:aqua;float:left;font-size: 20px;line-height:2em;}#tex{display:inline-block;width:50px;height: 25px;float:left;text-align: center;font-size:15px;margin-top:10px;}#showyz{border:3px solid green;color:blue;width:90px;height:40px;text-align:center;float:left;margin-left:15px;line-height: 2.5em;}#hyz{background-color:burlywood;border:1px solid burlywood;width:50px;height:20px;float: left;margin-left:20px;margin-top: 10px;margin-right:15px;}#btn{}</style></head><body><label for="tex">请输⼊验证码：</label><input type="text" id="tex" maxlength="4" autofocus><div id="showyz"></div><div id="hyz">换⼀张</div><br><input type="button" id="btn" value="确认"></body><script>//定义个空数组保存62个编码var codes=[];//将数字对应的编码保存到codes数组中，数字编码范围【48-57】for(var i=48;i<=57;i++){codes.push(i);}//将⼤写字母对应的编码保存到codes数组中，对应编码范围【65-90】for(var i=65;i<=90;i++){codes.push(i);}//将⼩写字母对应的编码保存到codes数组中，对应编码范围【97-122】for(var i=97;i<=122;i++){codes.push(i);}//定义个⽅法⽣成62位随机数作为数组⾓标返回随机的编码，再将其编码转化为对应数字或者字母function suiji(){var arr=[];//定义个数组保存4位随机数for(var i=0;i<4;i++){var index=Math.floor(Math.random()*(61-0+1)+0);//⽣成个随机数var char=String.fromCharCode(codes[index]);//解码arr.push(char); //存⼊到数组arr中}return arr.join("");//将数组转为字符串，以空格分隔，并返回}var yzm=suiji();//调⽤⽅法，将放回的验证码返回到yzm中//获取上述元素var tex=document.getElementById("tex");var showyz=document.getElementById("showyz");var hyz=document.getElementById("hyz");var btn=document.getElementById("btn");//将验证码写⼊到id为showyz的div中showyz.innerHTML=yzm;//实现换⼀张验证码功能hyz.οnclick=function(){yzm=suiji();showyz.innerHTML=yzm;}//将⾃⼰输⼊的验证码与获取的随机验证码验证btn.οnclick=function(){var textvalue=tex.value;//获取输⼊的值if(textvalue.toLowerCase()==yzm.toLowerCase()){//将值都转为⼩写⽐较alert("验证码输⼊正确！");yzm=suiji();showyz.innerHTML=yzm;tex.value="";}else{alert("验证码输⼊错误，请重新输⼊！");yzm=suiji();showyz.innerHTML=yzm;tex.value="";}}</script></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
图形验证码的两种实现方式
图形验证码的两种实现⽅式情形⼀：图形验证码跟短信验证码⼀起，只需要将后台提供的动态链接填到（id="img"）的src中即可⽣成动态验证码。
然后，在需要请求接⼝的地⽅，只需把（id="imgCode"）中⽤户输⼊的信息通过ajax传给后台，验证验证码是否正确。
原理（后台）：后台通过session存储图⽚上的字符串，和之后前台请求过来的带的输⼊的字符串参数，做⽐较，判断是否⼀样。
<!doctype html><html><head><meta charset="UTF-8"><title>图形验证码</title></head><body><form><div class="imgCodeBox"><label for="imgCode">图形验证码</label><input type="text" placeholder="请输⼊验证码" id="imgCode"><img src="" id="img"></div></form></body></html>情形⼆：⽤cavas，但是没有安全性，考虑到实⽤性的话，还是⽤情形⼀的好<!doctype html><html><head><meta charset="UTF-8"><title>测试</title></head><body><canvas id="canvas" width="120" height="40"></canvas><a href="#" id="changeImg">看不清，换⼀张</a><script>/**⽣成⼀个随机数**/function randomNum(min,max){return Math.floor( Math.random()*(max-min)+min);}/**⽣成⼀个随机⾊**/function randomColor(min,max){var r = randomNum(min,max);var g = randomNum(min,max);var b = randomNum(min,max);return "rgb("+r+","+g+","+b+")";}drawPic();document.getElementById("changeImg").onclick = function(e){e.preventDefault();drawPic();}/**绘制验证码图⽚**/function drawPic(){var canvas=document.getElementById("canvas");var width=canvas.width;var height=canvas.height;var ctx = canvas.getContext('2d');ctx.textBaseline = 'bottom';/**绘制背景⾊**/ctx.fillStyle = randomColor(180,240); //颜⾊若太深可能导致看不清ctx.fillRect(0,0,width,height);/**绘制⽂字**/var str = 'ABCEFGHJKLMNPQRSTWXY123456789';for(var i=0; i<4; i++){var txt = str[randomNum(0,str.length)];ctx.fillStyle = randomColor(50,160); //随机⽣成字体颜⾊ctx.font = randomNum(15,40)+'px SimHei'; //随机⽣成字体⼤⼩var x = 10+i*25;var y = randomNum(25,45);var deg = randomNum(-45, 45);//修改坐标原点和旋转⾓度ctx.translate(x,y);ctx.rotate(deg*Math.PI/180);ctx.fillText(txt, 0,0);//恢复坐标原点和旋转⾓度ctx.rotate(-deg*Math.PI/180);ctx.translate(-x,-y);}/**绘制⼲扰线**/for(var i=0; i<8; i++){ctx.strokeStyle = randomColor(40,180);ctx.beginPath();ctx.moveTo( randomNum(0,width), randomNum(0,height) );ctx.lineTo( randomNum(0,width), randomNum(0,height) );ctx.stroke();}/**绘制⼲扰点**/for(var i=0; i<100; i++){ctx.fillStyle = randomColor(0,255);ctx.beginPath();ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);ctx.fill();}}</script></body></html>情形⼆转⾃：https:///meishuixingdeququ/article/details/52386542情形三、⽤js产⽣随机数实现1、创建图形码容器<label class="myLabel">图形码：<input type = "button" id="code" onclick="createCode()" style="border: 0;background-color: transparent;padding: 0;"/> </label>2、产⽣验证码并在页⾯加载时和点击时调⽤ // 图形验证码var code ; //在全局定义验证码//产⽣验证码window.onload = function createCode(){code = "";var codeLength = 4;//验证码的长度var checkCode = document.getElementById("code");var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//随机数for(var i = 0; i < codeLength; i++) {//循环操作var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）code += random[index];//根据索引取得随机数加到code上}checkCode.value = code;//把code值赋给验证码}。
生成随机的5位登录验证码
生成随机的5位登录验证码import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.image.BufferedImage;import java.io.IOException;import java.io.OutputStream;import java.util.Random;import javax.servlet.ServletException;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;static String code="";publicclass checkService {publicvoid checkCode(HttpServletRequestreq,HttpServletResponse resp)throws ServletException,IOException{//绘制画布BufferedImage bf=newBufferedImage(80,30,BufferedImage.TYPE_INT_BGR);//获得画笔Graphics g=bf.getGraphics();//给画笔设置颜色g.setColor(new Color(255,255,255));//填充背景色g.fillRect(0, 0, 80, 30);//随机获得前景色Random r=new Random();g.setColor(newColor(r.nextInt(255),r.nextInt(255),r.nextInt(255)));//设置字体Font f=new Font("",Font.BOLD,22);//获得字体g.setFont(f);//以当前颜色和字体绘制干扰线checkService.code=checkService.getstr();g.drawString(checkService.code,10,25);for(int i=0;i<10;i++){g.drawLine(r.nextInt(80), r.nextInt(30), r.nextInt(80), r.nextInt(30));}//将图片按照jpeg算法压缩并发送给浏览器resp.setContentType("image/jpeg");OutputStream out =resp.getOutputStream();javax.imageio.ImageIO.write(bf,"jpeg", out);}//生成随机的字符串验证码publicstatic String getstr(){String str="abcdefghijklmnopqrstuvwxyz0123456789";Random r=new Random();String code="";for(int i=0;i<5;i++){code+=str.charAt(r.nextInt(str.length()));}return code;}}。