導航:首頁 > 萬維百科 > jsp淘寶網站驗證碼設計

jsp淘寶網站驗證碼設計

 發布時間：2020-09-07 10:19:22

1、JSP 圖形驗證碼 設計完整的程序？

答案補充:(接上)

response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
// 在內存中創建圖象
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());
//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),40+random.nextInt(110),60+random.nextInt(110)));
//調用函數出來的顏色相同，可能是因為種子太接近，所以只能直接生成
g.drawString(rand,13*i+6,16);
}

// 將認證碼存入SESSION
session.setAttribute("rand",sRand);

// 圖象生效
g.dispose();

// 輸出圖象到頁面
ImageIO.write(image, "JPEG", response.getOutputStream());
%>

2、jsp如何設置驗證碼，我需要完成詳細的代碼和過程

A 生成驗證碼的java文件
package cn.com.data100.web.servlet;

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;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

/**
* Title: 生成驗證碼
* Description: data100 website
* Copyright: Copyright (c) 2011
* Company: km100
* @author anshufa
* @version 1.0
*/
public class RandomCodeServlet extends HttpServlet {

private static final Log log = LogFactory.getLog(RandomCodeServlet.class);
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);
}

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

protected void doPost(
HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
//設置頁面不緩存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);

Random random = new Random();

// 定義數組存放加減乘除四個運算符
// char[] arr = { '+', '-','*', '/' };
char[] arr = { '+', '-','*'};

// 生成10以內的隨機整數num1
int num1 = random.nextInt(10);

// 生成一個0-4之間的隨機整數operate
int operate = random.nextInt(3);

// 生成10以內的隨機整數num1
int num2 = random.nextInt(10);

//避免出現負數情況
if(operate == 1){//減法運算
//如果減數小於被減數 再次生成num1
while(num1<num2){
num1 = random.nextInt(10);
}

}

// // 避免出現除數為0的情況
// if (operate == 3) {
// // 如果是除法,那除數必須不能為0，如果為0，再次生成num2
// while (num2 == 0) {
// num2 = random.nextInt(10);
// }
// }

// 運算結果
int result = 0;

// 假定position值0/1/2/3分別代表"+","-","*","/"，計算前面操作數的運算結果
switch (operate) {
case 0:
result = num1 + num2;
break;
case 1:
result = num1 - num2;
break;
case 2:
result = num1 * num2;
break;
// case 3:
// result = num1 / num2;
// break;
}

log.info("驗證碼："+num1 + "," + num2 + "," + operate + "," + result);

// 將生成的驗證碼值(即運算結果的值)放到session中，以便於後台做驗證。
HttpSession session = request.getSession();
session.setAttribute("rand", String.valueOf(result));

int width = 60, height = 20;
//創建BufferedImage對象，設置圖片的長度寬度和色彩。
BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
OutputStream os = response.getOutputStream();
//取得Graphics對象，用來繪制圖片
Graphics g = image.getGraphics();
//繪制圖片背景和文字,釋放Graphics對象所佔用的資源。
g.setColor(getRandColor(199, 250));
//設置內容生成的位置
g.fillRect(0, 0, width, height);
//設置內容的字體和大小
g.setFont(new Font("Times New Roman", Font.PLAIN, 18));

//設置內容的顏色：主要為生成圖片背景的線條
g.setColor(getRandColor(160, 200));

//圖片背景上隨機生成155條線條，避免通過圖片識別破解驗證碼
for (int i = 0; i < 355; 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);
}

//構造運算表達式
String content = num1+" "+ arr[operate]+" "+num2+" = ";

//設置寫運算表達的顏色
g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
//在指定位置繪制指定內容（即運算表達式）
g.drawString(content,5,16);
//釋放此圖形的上下文以及它使用的所有系統資源，類似於關閉流
g.dispose();

//通過ImageIO對象的write靜態方法將圖片輸出。
ImageIO.write(image, "JPEG", os);
os.close();

}
}

B 頁面調用
<span class="tabboder" id="rands"><img
src="../RandomCodeServlet" id="auth" name="auth" border=0></span>

3、怎麼用jsp做出驗證碼的那種效果

（轉載blog的）
1、新建一個驗證碼生成頁面，裡面的內容可以不用做任何修改 看你喜歡哪種樣式了 yanzhengma.jsp （隨便在網上搜的）
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'MyJsp.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>

<body>

<%!
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);
}
%>
<%
//設置頁面不緩存
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
// 在內存中創建圖象
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());
//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
session.setAttribute("rand",sRand);

// 圖象生效
g.dispose();
// 輸出圖象到頁面
ImageIO.write(image, "JPEG", response.getOutputStream());
%>
<a></a>
</body>
</html>
2、對於第一步，你可以先運行下這個頁面，看是否有圖片生成，沒有的話，找其他的。在你的 zhuce.jsp 注冊頁面加上JS和驗證碼圖片
<script type="text/javascript">
function changge(){
var img=document.getElementById("yanzheng");
img.src=img.src+"?"; //意思是讓圖片重新載入一次 效果類似與直接刷新yanzhengma.jsp有了這個，就能讓圖片重新載入了
}
</script>

....密碼:<input type="password"/>
驗證碼：<img src="yanzhengma.jsp" id="yanzheng"/> <a href="javascript:void(0);" onclick="changge();">看不清 換一張 </a>
<!--關鍵就是在這里，以前我們加圖片，現在是加頁面 ,注意頁面路徑-->
3、Action 取驗證碼判斷
String yanzhengma=requet.getSession.getAttribute("rand");//該參數可以在yanzhengma.jsp裡面找到
String userYanzhengma=用戶輸入的驗證碼
if(yanzhengma.equals(userYanzhengma)){
}else{
syso "驗證碼錯誤"
}
4、第一步也可以找其他好看的樣式，以上代碼部分手寫！

4、jsp驗證碼是怎麼實現？

1 伺服器端隨機產生一串字元串，保存在緩存（session）中，
2 伺服器端用程序自動生成一張圖片，並把隨機產生的字元串寫在圖片上，
3 把圖片發送到瀏覽器端
4 瀏覽者把圖片上看到的文字寫到文本框里，
5 表單提交時，這些文字被發送到伺服器端，
6 伺服器端驗證發送來的文字和保存在緩存（session）中的字元串是否一致，是則通過驗證，否則為非法操作

5、有可以直接寫在jsp頁面中實現驗證碼的方法嗎，求代碼

你要這樣理解jsp，它雖是用於展示的，但本質是java為基礎的，在編譯時都會被編譯成servlet。所以，你的想法沒有問題，完全可以用一個jsp來寫好驗證碼，無非就是生成圖形和隨機數，然後由另一個jsp來調用。

6、用jsp實現一個簡單的登錄界面，主要是驗證碼

<html>
<head>
<title>簡單頁面</title>
<script>
function yzm(){
var Num="";
for(var i=0;i<4;i++)
{
Num+=Math.floor(Math.random()*10);
}
document.getElementById("yzphoto").value=Num;
document.getElementById("yzm").value=Num;
}

function userLogin(){
var userName = document.getElementById("userName").value;
var password = document.getElementById("password").value;
var yztext = document.getElementById("yztext").value;
var yzm = document.getElementById("yzm").value;
if(userName != "jq"){
alert("用戶名錯誤");
}else if(password != "123"){
alert("密碼錯誤");
}else if(yztext != yzm){
alert("驗證碼錯誤");
}else{
alert("登陸成功");
}
location.reload();
}
</script>
</head>
<body onLoad="yzm()">
<div style="width:100%;text-align:center">
<h1>用戶登錄</h1>
<table>
<tr>
<td>用戶名:</td>
<td><input id="userName" type="text" value=""/></td>
</tr>
<tr>
<td>密碼:</td>
<td><input id="password" type="password" value=""/></td>
<tr>
<tr><td>
驗證碼:
</td>
<td><input id="yztext" type="text" value=""/><input style="width:50px;background-
color:red;color:blue" type="text" id="yzphoto" value=""/><input type="hidden" id="yzm"
value=""></td></tr>
<tr>
<td colspan="2" align="center"><input onclick="userLogin()" type="button" value="登陸"/></td>
</tr>
</table>
</div>
</body>
</html>

7、jsp中顯示驗證碼的代碼怎麼寫？

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 class MakeCertPic {
 //驗證碼圖片中可以出現的字元集，可以根據需要修改
 private char mapTable[]={
   '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','0','1','2','3',
   '4','5','6','7','8','9'
 };
/* 功能：生成彩色驗證碼圖片
 參數wedth為生成圖片的寬度，參數height為生成圖片的高度，參數os為頁面的輸出流
*/
 public String getCertPic(int width,int height,OutputStream os){
  if(width<=0)
   width=60;
  if(height<=0)
   height=20;
  BufferedImage image= new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
  //獲取圖形上下文
  Graphics g = image.getGraphics();
  //設定背景顏色
  g.setColor(new Color(0xDCDCDC));
  g.fillRect(0,0,width,height);
  //畫邊框
  g.setColor(Color.black);
  g.drawRect(0,0,width-1,height-1);
  //隨機產生的驗證碼
  String strEnsure = "";
  //4代表4為驗證碼，如果要產生更多位的驗證碼，則加大數值
  for(int i = 0;i<4;++i){
   strEnsure += mapTable[(int) (mapTable.length*Math.random())];
  }
  //將認證碼顯示到圖像中，如果要生成更多位的驗證碼，增加drawString語句
  g.setColor(Color.black);
  g.setFont(new Font("Atlantic Inline",Font.PLAIN,18));
  String str = strEnsure.substring(0,1);
  g.drawString(str,8,17);
  str = strEnsure.substring(1,2);
  g.drawString(str, 20, 15);
  str = strEnsure.substring(2,3);
  g.drawString(str, 35, 18);
  str = strEnsure.substring(3,4);
  g.drawString(str, 45, 15);
  //隨機產生15個干擾點
  Random rand = new Random();
  for(int i=0; i<10; i++){
   int x = rand.nextInt(width);
   int y = rand.nextInt(height);
   g.drawOval(x,y,1,1);
  }
  //釋放圖形上下文
  g.dispose();
  try{
   //輸出圖形到頁面
   ImageIO.write(image, "JPEG", os);
   
  }catch (IOException e){
   return "";
  }
  return strEnsure;
 }
}


makeCertPic.jsp頁面用於調用生成驗證碼圖片的JavaBean，並在客戶端顯示，源代碼如下：
<%@page contentType="image/jpeg" %><%@page language="java" pageEncoding="utf-8"%><jsp:useBean id="image" scope="page" class="securityCode.pic.MakeCertPic"/><%
 String str = image.getCertPic(0,0,response.getOutputStream());
 //將驗證碼存入session中
 session.setAttribute("certCode",str);
%>


下邊是登錄頁面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>驗證碼測試登錄頁面</title>
  <script type="text/javascript">
function changeimg()
{

var myimg = document.getElementById("code"); 
now = new Date(); 
myimg.src="makeCertPic.jsp?code="+now.getTime();
} 
</script>
</head>
<body>
<center>
 <form action="loginCheck.jsp" method="post" />
 用戶名：<input type="text" name="username" /><br>
 密&nbsp;&nbsp;碼：<input type="password" name="password"/><br>
 &nbsp;驗證碼：<input type="text" name="certCode"/>
 <img id="code" src="makeCertPic.jsp"><a href="javascript:changeimg()">看不清，換一張 </a><br>
 <input type="submit" value="登錄"/>
 </form>
</center>
</body>
</html>

8、jsp做驗證碼的生成

用Serverlet編寫！以下是驗證碼的產生代碼！你可以研究一下！

public class ValidateCodeServlet extends HttpServlet {

/**
*
*/
private static final long serialVersionUID = 4008416931787800531L;

/**
* Constructor of the object.
*/
public ValidateCodeServlet() {
super();
}

/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
}

/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request
* the request send by the client to the server
* @param response
* the response send by the server to the client
* @throws ServletException
* if an error occurred
* @throws IOException
* if an error occurred
*/
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);

// 在內存中創建圖象
int width = 60, height = 20;
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);

// 獲取繪畫對象
Graphics g = image.getGraphics();
// 設定背景色
g.setColor(getRandColor(225, 250));
g.fillRect(0, 0, width, height);
//設定字體
g.setFont(new Font("Times New Roman", Font.BOLD, 20));

// 隨機產生155條干擾線，使圖象中的認證碼不易被其它程序探測到
Random random = new Random();
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
HttpSession session = request.getSession();
session.setAttribute("valicode", sRand);

// 圖象生效
g.dispose();

// 輸出圖象到頁面
ImageIO.write(image, "JPEG", response.getOutputStream());

}

/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}

/**
* 給定范圍獲得隨機顏色
* @param fc
* @param bc
* @return
*/
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);
}

}

9、jsp做的驗證碼如何實現換一張的功能？

javascript實現點擊驗證碼無刷新重新載入驗證碼圖片
在需要使用驗證碼的網頁javascript:;" onClick="javascript:tagshow(event, '%E6%96%87%E4%BB%B6');" target="_self">文件頭部加上這句
<script language="JavaScript">
function reloadcode(){
var verify=document.getElementById('safecode');
verify.setAttribute('src','images/chknumber.asp?'+Math.random());
//這里必須加入隨機數不然地址相同我發重新載入
}
</script>

然後再驗證碼圖片裡面寫onclick呼出上面的函數重新載入.

<img src="images/chknumber.asp" id="safecode" border="0" onclick="reloadcode()" style="cursor:hand;padding:2px 8px 0pt 3px;" />

與jsp淘寶網站驗證碼設計相關的知識