Picture verification code overview and implementation steps

  • 2020-05-27 05:42:34
  • OfStack

1. Picture verification code overview:

Many websites have this implementation

Function:

In order to improve the security of the system

With authentication code, we can ask the user to enter a user name, in the information such as password, input the words on the picture at the same time, the user submitted, the system will first extracted from session just generated verification code, and comparing and user input verification code, if you compare equal, said user login from the login screen, otherwise, the user is illegal, we use the verification code, is to ensure that the use of the system must be after log in successfully, to use, avoid the user input in the address bar to access the page directly.

In other words, the use of captchas forces the user to log in from the login interface

2. Verify the implementation method

Use two key classes that are related to the output of the image


BufferedImage im = new BufferedImage(60,20,BufferedImage.TYPE_INT_RGB);
// The first 1 A parameter im said 1 Image objects 
//JPG Represents the image output type 
//response.getOutputStream() On behalf of 1 The output stream of the response , That is to say, , You visit this servlet. the servlet It will show you the picture 
ImageIO.write(im, "JPG",response.getOutputStream());

3. Implementation steps

1. Generate a picture using BufferedImage, then output it using ImageIO and specify JPG format


BufferedImage im = new BufferedImage(60,20,BufferedImage.TYPE_INT_RGB);
// The first 1 A parameter im said 1 Image objects 
//JPG Represents the image output type 
//response.getOutputStream() On behalf of 1 The output stream of the response , That is to say, , You visit this servlet. the servlet It will show you the picture 
ImageIO.write(im, "JPG",response.getOutputStream());

2. Get the picture drawing object

Graphics g = im.getGraphics();

3. Fill in the drawing area


Random rm = new Random();
Color c = new Color(rm.nextInt(255),rm.nextInt(255),rm.nextInt(255));
g.setColor(c);
// Fill in the color of the entire image 
g.fillRect(0, 0, 60, 20);

4. Output Numbers to the picture


g.setColor(new Color(rm.nextInt(255),rm.nextInt(255),rm.nextInt(255)));
g.setFont(new Font(" Chinese official script ",Font.BOLD|Font.ITALIC,28));
g.drawString("8", 1, 18);

5. Four random digits


// Randomly generated 4 A digital 
for(int i=0;i<4;i++){
 g.setColor(new Color(rm.nextInt(255),rm.nextInt(255),rm.nextInt(255)));
 g.setFont(new Font("Gungsuh",Font.BOLD|Font.ITALIC,22));
 g.drawString(""+rm.nextInt(10), (i*15)+2, 18);
}

6. Randomly generate Chinese


String str = " Chest thunder and face such as a flat lake can worship the general ";
for(int i=0;i<4;i++){
 g.setColor(new Color(rm.nextInt(255),rm.nextInt(255),rm.nextInt(255)));
 g.setFont(new Font("Gungsuh",Font.BOLD|Font.ITALIC,15));
 g.drawString(""+str.charAt(rm.nextInt(str.length())), (i*15)+2, 18);
}

7. How to introduce the verification code in the page:

<img alt="验证码" src="/ImageServlet">

8. Save the Numbers for login comparisons


// Will get the 4 So let's save these Numbers to session In the , So that when the user logs in , Used to compare 
request.getSession().setAttribute("piccode", sbf.toString());

9. Login verification

First, you need to verify that the user exists in the database and, if so, that the input captcha is 1.

After successful validation, you need to forward to the relevant action page.

Code example:


boolean b_exist = login.validate(username,passwd);
// If the user exists 
if(b_exist){
 String pic = ""+request.getSession().getAttribute("piccode");
 // Comparison verification code 
 if(!pic.equals("") && pic.equals(code)){
 // to session User information is stored in , For use in other applications 
 request.getSession().setAttribute("username", username);
 
 response.sendRedirect("index.jsp");
 }
}

Related articles: