不知道大家有没有用过农业银行的网上银行服务，该网上银行登录时，输入密码时，不可以直接打键盘输入，要用鼠标点击图形小键盘来输入，而小键盘里面的数字是随机排列的。
这样一来，可以防止木马记录用户键盘输入的密码被盗，确实是挻实用的功能，研究了一翻后，也大根掌握了它的工作原理，现在用Java来实现，大概是这样的：用Struts来实现，先是用户点击“登录”按钮，将会提交到Action里，在Action里进行如下处理：生成一个随机的不重复的数组，分别是0-9的数字，之后将该数组存放在Session里，之后Action再跳转到 login.jsp 里面，在Jsp里面添加一个图像标签
<img src="/servlet/CreatePwdPad" width="150" height="190" border="0" usemap="#Map"/>
该图像将访问 Servlet 来读取小键盘图像，Servlet将做如下处理：获取Session中的数组，跟据数据顺序画出小键盘的位置，再输入图片。Jsp再用Map来定位小键盘中的数字按键，在写点击事件，让JavaScript去取出该按钮的值放到密码框中。之后提交登录。
以下是Action的代码：
1 import java.util.*;
2 import javax.servlet.http.HttpServletRequest;
3 import javax.servlet.http.HttpServletResponse;
4 import org.apache.struts.action.Action;
5 import org.apache.struts.action.ActionForm;
6 import org.apache.struts.action.ActionForward;
7 import org.apache.struts.action.ActionMapping;
8
9
10 public class SecuLoginAction extends Action {
11
12 public ActionForward execute(ActionMapping mapping, ActionForm form,
13 HttpServletRequest request, HttpServletResponse response) {
14
15 int[] numArr = {0,1,2,3,4,5,6,7,8,9}; //先定义一个数组
16 int[] result = new int[10]; //生成组果数组
17 Random random = new Random();
18 for(int i=10;i>0;i--){
19 int ran = random.nextInt(i); //随机生成一个10以内的数
20 result[i-1] = numArr[ran]; //保存该数
21 numArr[ran] = numArr[i-1]; //覆盖已抽出的数
22 }
23 request.getSession().setAttribute("result", result); //生成后放入Session
24 return mapping.getInputForward(); //转到JSP页面
25 }
26 }
上面Action已生成一个数组，只要放进Session，让Servlet取出来进行跟据排列来生成图像
以下是JSP页面代码：
1 <%@ page language="java" pageEncoding="utf-8"%>
2
3 <%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
4 <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
5 <%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
6 <%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
7
8 <script type="text/javascript">
9 <!--
10 function show(a){
11 if(a=='C'){
12 window.pwd.value = "";
13 }else if(a=='B'){
14 var str = window.pwd.value;
15 var len = str.length;
16 window.pwd.value = str.substr(0,len-1);
17 }else{
18 if(window.pwd.value.length==6){
19 return;
20 }
21 window.pwd.value += a;
22 }
23 }
24 //-->
25 </script>
26 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
27 <html:html lang="true">
28 <head>
29 <html:base />
30
31 <title>login.jsp</title>
32
33 <meta http-equiv="pragma" content="no-cache">
34 <meta http-equiv="cache-control" content="no-cache">
35 <meta http-equiv="expires" content="0">
36 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
37 <meta http-equiv="description" content="This is my page">
38 <!--
39 <link rel="stylesheet" type="text/css" href="styles.css">
40 -->
41
42 </head>
43
44 <body>
45 <jsp:useBean id="result" type="int[]" scope="session"/>
46 <img src="/XBank/servlet/CreatePwdPad" width="150" height="190" border="0" usemap="#Map"/>
47 <input id="pwd" type="password" maxlength="6" readonly value="" name="abc"/>
48 <map name="Map" id="Map">
49 <area shape="rect" coords="20,20,50,50" onClick="javascript:show('${result[0]}')" />
50 <area shape="rect" coords="60,20,90,50" onClick="javascript:show('${result[1]}')" />
51 <area shape="rect" coords="100,20,130,50" onClick="javascript:show('${result[2]}')" />
52
53 <area shape="rect" coords="20,60,50,90" onClick="javascript:show('${result[3]}')" />
54 <area shape="rect" coords="60,60,90,90" onClick="javascript:show('${result[4]}')" />
55 <area shape="rect" coords="100,60,130,90" onClick="javascript:show('${result[5]}')" />
56
57 <area shape="rect" coords="20,100,50,130" onClick="javascript:show('${result[6]}')" />
58 <area shape="rect" coords="60,100,90,130" onClick="javascript:show('${result[7]}')" />
59 <area shape="rect" coords="100,100,130,130" onClick="javascript:show('${result[8]}')" />
60
61 <area shape="rect" coords="20,140,50,170" onClick="javascript:show('${result[9]}')" />
62 <area shape="rect" coords="60,140,90,170" onClick="javascript:show('C')" />
63 <area shape="rect" coords="100,140,130,170" onClick="javascript:show('B')" />
64 </map>
65 </body>
66 </html:html>
以上JSP代码要注意的是JavaScript的取值，与图片Map的生成。还有就是<img>的src路径，要是Servlet的路径。
以下是Servlet的代码就是生成图片的代码：
1 import java.io.IOException;
2 import java.io.PrintWriter;
3
4 import java.io.*;
5 import java.net.*;
6 import javax.imageio.*;
7 import java.awt.*;
8 import java.awt.image.*;
9
10 import javax.servlet.*;
11 import javax.servlet.http.HttpSession;
12 import javax.servlet.http.HttpServlet;
13 import javax.servlet.http.HttpServletRequest;
14 import javax.servlet.http.HttpServletResponse;
15
16 public class CreatePwdPad extends HttpServlet {
17
18
19 public CreatePwdPad() {
20 super();
21 }
22
23
24 public void destroy() {
25 super.destroy();
26
27 }
28
29
30 public void doGet(HttpServletRequest request, HttpServletResponse response)
31 throws ServletException, IOException {
32
33 response.setContentType("image/png");
34 response.setHeader("Pragma","No-cache");
35 response.setHeader("Cache-Control","no-cache");
36 response.setDateHeader("Expires", 0);
37 HttpSession session=request.getSession();
38
39 int[] numArr = (int[])session.getAttribute("result");
40
41 final int opWidth = 150; //外框宽
42 final int opHeight = 190; //外框高
43 final int ipWidth = 130; //内框宽
44 final int ipHeight = 170; //内框高
45 final int cellWidth = 30; //格子宽
46 final int cellHeight = 30; //格子高
47 final int padding = 10; //间隔
48 final int c0x = 20; //第一格子原点X
49 final int c0y = 20; //第一格子原点Y
50
51
52 //创建一个Image图片
53 BufferedImage image = new BufferedImage(opWidth,opHeight,BufferedImage.TYPE_INT_RGB);
54 Graphics g = image.getGraphics();
55 g.setColor(new Color(0xaa,0xaa,0xaa)); //设置外框的颜色
56 g.fillRect(0, 0, opWidth, opHeight);
57 g.setColor(new Color(0xdd,0xdd,0xdd)); //设置内框的颜色
58 g.fillRect(10, 10, ipWidth, ipHeight);
59 g.setColor(new Color(0xff,0xff,0xff)); //设置格子的颜色
60
61 //****************** 画格子部份 *****************************
62 g.fillRect(c0x, c0y, cellWidth, cellHeight); //画第一个格子
63 g.fillRect(c0x+cellWidth+padding, c0y, cellWidth, cellHeight); //画第二个格子
64 g.fillRect(c0x+2*cellWidth+2*padding, c0y, cellWidth, cellHeight); //画第三个格子
65 g.fillRect(c0x, c0y+cellHeight+padding, cellWidth, cellHeight); //画第四个格子
66 g.fillRect(c0x+cellWidth+padding, c0y+cellHeight+padding, cellWidth, cellHeight);//画第五个格子
67 g.fillRect(c0x+2*cellWidth+2*padding, c0y+cellHeight+padding, cellWidth, cellHeight);//画第六个格子
68 g.fillRect(c0x, c0y+2*cellHeight+2*padding, cellWidth, cellHeight);//画第七个格子
69 g.fillRect(c0x+cellWidth+padding, c0y+2*cellHeight+2*padding, cellWidth, cellHeight);//画第八个格子
70 g.fillRect(c0x+2*cellWidth+2*padding, c0y+2*cellHeight+2*padding, cellWidth, cellHeight);//画第九个格子
71 g.fillRect(c0x, c0y+3*cellHeight+3*padding, cellWidth, cellHeight);//画第十个格子
72 g.fillRect(c0x+cellWidth+padding, c0y+3*cellHeight+3*padding, cellWidth, cellHeight);//画第十一个格子
73 g.fillRect(c0x+2*cellWidth+2*padding, c0y+3*cellHeight+3*padding, cellWidth, cellHeight);//画第十二个格子
74
75 Font font = new Font("Times New Roman",Font.PLAIN,18);
76 g.setFont(font);
77 g.setColor(new Color(0x00,0x00,0x00));
78
79 g.drawString(String.valueOf(numArr[0]), 32, 40); //画第一个数字
80 g.drawString(String.valueOf(numArr[1]), 72, 40); //画第二个数字
下同
81 g.drawString(String.valueOf(numArr[2]), 112, 40);
82 g.drawString(String.valueOf(numArr[3]), 32, 80);
83 g.drawString(String.valueOf(numArr[4]), 72, 80);
84 g.drawString(String.valueOf(numArr[5]), 112, 80);
85 g.drawString(String.valueOf(numArr[6]), 32, 120);
86 g.drawString(String.valueOf(numArr[7]), 72, 120);
87 g.drawString(String.valueOf(numArr[8]), 112, 120);
88 g.drawString(String.valueOf(numArr[9]), 32, 160);
89 font = new Font("Times New Roman",Font.PLAIN,12); //设置字体
90 g.setFont(font);
91 g.drawString("Clean", 62, 160); //画Clean按钮
92 g.drawString("Back", 103, 160); //画Back按钮
93
94 g.dispose();
95 ServletOutputStream responseOutputStream =response.getOutputStream();
96 ImageIO.write(image, "PNG", responseOutputStream);
97 responseOutputStream.flush();
98 responseOutputStream.close();
99 }
100
101
102 public void doPost(HttpServletRequest request, HttpServletResponse response)
103 throws ServletException, IOException {
104 doGet(request,response);
105 }
106
107
108 public void init() throws ServletException {
109 // Put your code here
110 }
111
112 }
这里要注意的是图片的位置，与文字的位置，还要修改输出类型，类型为图片。
以下给出这三个文件的源文件打包：
[down=attachments/month_0709/8200791617275.rar]点击下载此文件[/down]
posted on 2008-07-29 12:47
姜大叔 阅读(1207)
评论(1) 编辑 收藏 所属分类:
Java