Making and verifying the verification code of Jsp+Servlet (1)

Posted by ilikephp on Sat, 02 May 2020 20:35:42 +0200

Method 1: BufferedImage+Graphics to make verification code

1. Make JSP page (as shown in the figure)

       

The code is as follows:

1 <body>
2 <form action="<%=request.getContextPath()%>/servlet/LoginServlet" method="get" />
3    Verification Code:<input type="text" name="checkcode"/>
4   <img alt="Verification Code" id="imagecode" src="<%=request.getContextPath()%>/servlet/ImageServlet"/>
5   <a href="javascript:reloadCode();">can't see clearly</a><br>
6   <input type="submit" value="Submission">
7 </form>
8 </body>

2. Implement ImageServlet

 1 public class ImageServlet extends HttpServlet {
 2     
 3     public void doGet(HttpServletRequest request,HttpServletResponse response) throws IOException{
 4         //Making pictures
 5         BufferedImage bi=new BufferedImage(68,22,BufferedImage.TYPE_INT_RGB);
 6         Graphics g=bi.getGraphics();
 7         //Set color and draw
 8         Color c=new java.awt.Color(200, 150, 255);
 9         g.setColor(c);
10         g.fillRect(0, 0, 68, 22);
11         //Setting content
12         char ch[]="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();
13         //random number--Randomly generate colors, letters and numbers through random numbers
14         Random r=new Random();
15         int len=ch.length,index;
16         StringBuffer sb=new StringBuffer();
17         for(int i=0;i<4;i++){
18             //Randomly generate letters and numbers
19             index=r.nextInt(len);
20             //Randomly generate color
21             g.setColor(new Color(r.nextInt(88),r.nextInt(188),r.nextInt(255)));
22             //Draw letters and numbers
23             g.drawString(ch[index]+"", (i*15)+3, 18);
24             //Store current letters and numbers
25             sb.append(ch[index]);
26         }
27         //Store current letters and numbers session
28         request.getSession().setAttribute("piccode", sb.toString());
29         //Output picture
30         ImageIO.write(bi, "JPG", response.getOutputStream());
31     }
32 }

3. Click "can't see clearly" to change a picture (modify Jsp)

**Insert before the form label and inside the body label:

1 <script type="text/javascript">
2       function reloadCode(){
3            //adopt time To distinguish different times, so as to refresh the captcha picture
4            var time=new Date().getTime();
5            document.getElementById("imagecode").src="<%=request.getContextPath()%>/servlet/ImageServlet?d="+time;
6 }
7 </script>

**Note: time must be added to distinguish different paths. Otherwise, there will be a cache in the browser. After clicking, it will still be the original graph!!

4. Implementation of verification code verification (implementation of LoginServlet)

 1 public class LoginServlet extends HttpServlet{    
 2     public void doGet(HttpServletRequest request, HttpServletResponse response)throws IOException{
 3         //Get picture content
 4         String piccode=(String)request.getSession().getAttribute("piccode");
 5         //Get input
 6         String checkcode=request.getParameter("checkcode");
 7         //Case insensitive
 8         checkcode=checkcode.toUpperCase();
 9         //Prevent random code
10         response.setContentType("text/html;charset=gbk");
11         PrintWriter out=response.getWriter();
12         //Verify and output results
13         if(checkcode.equals(piccode)){
14             out.println("The verification code is entered correctly!");
15         }else{
16             out.println("Verification code input error!!");
17         }
18         out.flush();
19         out.close();
20     }
21 }

--To be continued--

**Note: learn from "Java implementation verification code making" on mooc.com, with the link https://www.imooc.com/learn/283

Topics: Java JSP Javascript Session