我自己做的系統(tǒng)里面用作驗證碼的JSP的
創(chuàng)新互聯(lián)建站是一家專業(yè)提供南州晴隆企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為南州晴隆眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。
%@page contentType="image/jpeg;charset=utf-8"%
%@page import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" %
%@ page import="java.io.OutputStream" %
html
body
%!
Color getRandColor(int fc,int bc)
{
Random rd=new Random();
if(fc255) fc=255;
if(bc255) bc=255;
int red=fc+rd.nextInt(bc-fc);
int green=fc+rd.nextInt(bc-fc);
int blue=fc+rd.nextInt(bc-fc);
return new Color(red,green,blue);
}
%
%
Random r=new Random();
response.addHeader("Pragma","No-cache");
response.addHeader("Cache-Control","no-cache");
response.addDateHeader("expires",0);
int width=90;
int height=23;
BufferedImage pic=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
Graphics gc=pic.getGraphics();
gc.setColor(getRandColor(200,250));
gc.fillRect(0,0,width,height);
String[] rNum ={"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","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"};
int[] style = {Font.PLAIN,Font.BOLD,Font.ITALIC,Font.PLAIN+Font.BOLD,
Font.BOLD+Font.ITALIC,Font.PLAIN+Font.ITALIC,Font.PLAIN+Font.BOLD+Font.ITALIC};
gc.setColor(Color.WHITE);
gc.drawLine(0,30,90,10);
gc.setColor(getRandColor(160,200));
for (int i=0;i50;i++)
{
int x = r.nextInt(width);
int y = r.nextInt(height);
int xl = r.nextInt(10);
int yl = r.nextInt(10);
gc.drawLine(x,y,x+xl,y+yl);
}
gc.setColor(getRandColor(60,150));
String rt = "";
for(int i=0;i4;i++){
String temp = rNum[r.nextInt(62)];
rt = rt+temp;
gc.setFont(new Font("Times New Roman",style[r.nextInt(7)],15));
gc.drawString(temp,5+i*15+r.nextInt(10),10+r.nextInt(10));
}
gc.dispose();
session.setAttribute("randNum",rt);
OutputStream os=response.getOutputStream();
ImageIO.write(pic,"JPEG",os);
System.out.println("當(dāng)前驗證碼為:"+session.getAttribute("randNum"));
os.flush();
os.close();
os=null;
response.flushBuffer();
out.clear();
out = pageContext.pushBody();
%
/body
/html
Java如何實現(xiàn)驗證碼驗證功能呢?日常生活中,驗證碼隨處可見,他可以在一定程度上保護(hù)賬號安全,那么他是怎么實現(xiàn)的呢?
Java實現(xiàn)驗證碼驗證功能其實非常簡單:用到了一個Graphics類在畫板上繪制字母,隨機(jī)選取一定數(shù)量的字母隨機(jī)生成,然后在畫板上隨機(jī)生成幾條干擾線。
首先,寫一個驗證碼生成幫助類,用來繪制隨機(jī)字母:
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.imageio.ImageIO;
public?final?class?GraphicHelper?{
/**
*?以字符串形式返回生成的驗證碼,同時輸出一個圖片
*
*?@param?width
*????????????圖片的寬度
*?@param?height
*????????????圖片的高度
*?@param?imgType
*????????????圖片的類型
*?@param?output
*????????????圖片的輸出流(圖片將輸出到這個流中)
*?@return?返回所生成的驗證碼(字符串)
*/
public?static?String?create(final?int?width,?final?int?height,?final?String?imgType,?OutputStream?output)?{
StringBuffer?sb?=?new?StringBuffer();
Random?random?=?new?Random();
BufferedImage?image?=?new?BufferedImage(width,?height,?BufferedImage.TYPE_INT_RGB);
Graphics?graphic?=?image.getGraphics();
graphic.setColor(Color.getColor("F8F8F8"));
graphic.fillRect(0,?0,?width,?height);
Color[]?colors?=?new?Color[]?{?Color.BLUE,?Color.GRAY,?Color.GREEN,?Color.RED,?Color.BLACK,?Color.ORANGE,
Color.CYAN?};
//?在?"畫板"上生成干擾線條?(?50?是線條個數(shù))
for?(int?i?=?0;?i??50;?i++)?{
graphic.setColor(colors[random.nextInt(colors.length)]);
final?int?x?=?random.nextInt(width);
final?int?y?=?random.nextInt(height);
final?int?w?=?random.nextInt(20);
final?int?h?=?random.nextInt(20);
final?int?signA?=?random.nextBoolean()???1?:?-1;
final?int?signB?=?random.nextBoolean()???1?:?-1;
graphic.drawLine(x,?y,?x?+?w?*?signA,?y?+?h?*?signB);
}
//?在?"畫板"上繪制字母
graphic.setFont(new?Font("Comic?Sans?MS",?Font.BOLD,?30));
for?(int?i?=?0;?i??6;?i++)?{
final?int?temp?=?random.nextInt(26)?+?97;
String?s?=?String.valueOf((char)?temp);
sb.append(s);
graphic.setColor(colors[random.nextInt(colors.length)]);
graphic.drawString(s,?i?*?(width?/?6),?height?-?(height?/?3));
}
graphic.dispose();
try?{
ImageIO.write(image,?imgType,?output);
}?catch?(IOException?e)?{
e.printStackTrace();
}
return?sb.toString();
}
}?
接著,創(chuàng)建一個servlet,用來固定圖片大小,以及處理驗證碼的使用場景,以及捕獲頁面生成的驗證碼(捕獲到的二維碼與用戶輸入的驗證碼一致才能通過)。
import?java.io.OutputStream;
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;
@WebServlet(urlPatterns?=?"/verify/regist.do"?)
public?class?VerifyCodeServlet?extends?HttpServlet?{
private?static?final?long?serialVersionUID?=?3398560501558431737L;
@Override
protected?void?service(HttpServletRequest?request,?HttpServletResponse?response)
throws?ServletException,?IOException?{
//?獲得?當(dāng)前請求?對應(yīng)的?會話對象
HttpSession?session?=?request.getSession();
//?從請求中獲得?URI?(?統(tǒng)一資源標(biāo)識符?)
String?uri?=?request.getRequestURI();
System.out.println("hello?:?"?+?uri);
final?int?width?=?180;?//?圖片寬度
final?int?height?=?40;?//?圖片高度
final?String?imgType?=?"jpeg";?//?指定圖片格式?(不是指MIME類型)
final?OutputStream?output?=?response.getOutputStream();?//?獲得可以向客戶端返回圖片的輸出流
//?(字節(jié)流)
//?創(chuàng)建驗證碼圖片并返回圖片上的字符串
String?code?=?GraphicHelper.create(width,?height,?imgType,?output);
System.out.println("驗證碼內(nèi)容:?"?+?code);
//?建立?uri?和?相應(yīng)的?驗證碼?的關(guān)聯(lián)?(?存儲到當(dāng)前會話對象的屬性中?)
session.setAttribute(uri,?code);
System.out.println(session.getAttribute(uri));
}
}?
接著寫一個HTML注冊頁面用來檢驗一下:
html
head
meta?charset="UTF-8"
title注冊/title
link?rel="stylesheet"?href="styles/general.css"
link?rel="stylesheet"?href="styles/cell.css"
link?rel="stylesheet"?href="styles/form.css"
script?type="text/javascript"?src="js/ref.js"/script
style?type="text/css"?
.logo-container?{
margin-top:?50px?;
}
.logo-container?img?{
width:?100px?;
}
.message-container?{
height:?80px?;
}
.link-container?{
height:?40px?;
line-height:?40px?;
}
.link-container?a?{
text-decoration:?none?;
}
/style
/head
body
div?class="container?form-container"
form?action="/wendao/regist.do"?method="post"
div?class="form"?!--?注冊表單開始?--
div?class="form-row"
span?class="cell-1"
i?class="fa?fa-user"/i
/span
span?class="cell-11"?style="text-align:?left;"
input?type="text"?name="username"?placeholder="請輸入用戶名"
/span
/div
div?class="form-row"
span?class="cell-1"
i?class="fa?fa-key"/i
/span
span?class="cell-11"?style="text-align:?left;"
input?type="password"?name="password"?placeholder="請輸入密碼"
/span
/div
div?class="form-row"
span?class="cell-1"
i?class="fa?fa-keyboard-o"/i
/span
span?class="cell-11"?style="text-align:?left;"
input?type="password"?name="confirm"?placeholder="請確認(rèn)密碼"
/span
/div
div?class="form-row"
span?class="cell-7"
input?type="text"?name="verifyCode"?placeholder="請輸入驗證碼"
/span
span?class="cell-5"?style="text-align:?center;"
img?src="/demo/verify/regist.do"?onclick="myRefersh(this)"
/span
/div
div?class="form-row"?style="border:?none;"
span?class="cell-6"?style="text-align:?left"
input?type="reset"?value="重置"
/span
span?class="cell-6"??style="text-align:right;"
input?type="submit"?value="注冊"
/span
/div
/div?!--?注冊表單結(jié)束?--
/form
/div
/body
/html
效果如下圖:
在控制臺接收到的圖片中驗證碼的變化如下:
當(dāng)點擊刷新頁面的時候,驗證碼也會隨著變化,但我們看不清驗證碼時,只要點擊驗證碼就會刷新,這樣局部的刷新可以用JavaScript來實現(xiàn)。
在img
src="/demo/verify/regist.do"中,添加一個問號和一串后綴數(shù)字,當(dāng)刷新時讓后綴數(shù)字不斷改變,那么形成的驗證碼也會不斷變化,我們可以采用的一種辦法是后綴數(shù)字用date代替,date獲取本機(jī)時間,時間是隨時變的,這樣就保證了刷新驗證碼可以隨時變化。
代碼如下:
function?myRefersh(?e?)?{
const?source?=?e.src?;?//?獲得原來的?src?中的內(nèi)容
//console.log(?"source?:?"?+?source??)?;
var?index?=?source.indexOf(?"?"?)?;??//?從?source?中尋找???第一次出現(xiàn)的位置?(如果不存在則返回?-1?)
//console.log(?"index?:?"?+?index??)?;
if(?index??-1?)?{?//?如果找到了????就進(jìn)入內(nèi)部
var?s?=?source.substring(?0?,?index?)?;?//?從?source?中截取?index?之前的內(nèi)容?(?index?以及?index?之后的內(nèi)容都被舍棄?)
//console.log(?"s?:?"?+?s??)?;
var?date?=?new?Date();?//?創(chuàng)建一個?Date?對象的?一個?實例
var?time?=?date.getTime()?;?//?從?新創(chuàng)建的?Date?對象的實例中獲得該時間對應(yīng)毫秒值
e.src?=?s?+?"?time="?+?time?;?//?將?加了?尾巴?的?地址?重新放入到?src?上
//console.log(?e.src?)?;
}?else?{
var?date?=?new?Date();
e.src?=?source?+?"?time="?+?date.getTime();
}
}
如回答不詳細(xì)可追問
%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%
%@page import="java.awt.image.BufferedImage"%
%@page import="java.awt.Graphics2D"%
%@page import="java.awt.Color"%
%@page import="java.awt.Font"%
%@page import="javax.imageio.ImageIO"%
%
int width = 60;
int height = 20;
// 創(chuàng)建具有可訪問圖像數(shù)據(jù)緩沖區(qū)的Image
BufferedImage buffImg = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g = buffImg.createGraphics();
// 創(chuàng)建一個隨機(jī)數(shù)生成器
Random random = new Random();
g.setColor(Color.WHITE);
g.fillRect(0, 0, width, height);
// 創(chuàng)建字體,字體的大小應(yīng)該根據(jù)圖片的高度來定
Font font = new Font("Times New Roman", Font.PLAIN, 18);
// 設(shè)置字體
g.setFont(font);
// 畫邊框
g.setColor(Color.BLACK);
g.drawRect(0, 0, width - 1, height - 1);
// 隨機(jī)產(chǎn)生160條干擾線
g.setColor(Color.LIGHT_GRAY);
for (int i = 0; i 160; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int x1 = random.nextInt(12);
int y1 = random.nextInt(12);
g.drawLine(x, y, x + x1, y + y1);
}
// randomCode 用于保存隨機(jī)產(chǎn)生的驗證碼
StringBuffer randomCode = new StringBuffer();
int red = 0, green = 0, blue = 0;
// 隨機(jī)產(chǎn)生4位數(shù)字的驗證碼
for (int i = 0; i 4; i++) {
// 得到隨機(jī)產(chǎn)生的驗證碼數(shù)字
String strRand = String.valueOf(random.nextInt(10));
// 產(chǎn)生隨機(jī)的顏色分量來構(gòu)造顏色值
red = random.nextInt(110);
green = random.nextInt(50);
blue = random.nextInt(50);
// 用隨機(jī)產(chǎn)生的顏色將驗證碼繪制到圖像中
g.setColor(new Color(red, green, blue));
g.drawString(strRand, 13 * i + 6, 16);
randomCode.append(strRand);
}
// 將四位數(shù)字的驗證碼保存到session中
//HttpSession session = request.getSession();
session.setAttribute("randomCode", randomCode.toString());
// 禁止圖像緩存
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.setContentType("image/jpeg");
// 將圖像輸出到servlet輸出流中
ServletOutputStream sos = response.getOutputStream();
ImageIO.write(buffImg, "jpeg", sos);
sos.close();
//sos = null;
out.clear();
out = pageContext.pushBody();
%