The final effect shows:
Code Show:
1. Front-End Login page code display
<div class= "Form-group" > <div class= "Input-icon" > <i class= "fa fa-picture-o" ></i> <input class= "Form-control" style= "width:180px;" type= "text" id= "Verifycode" name= "Verifycode" placeholder= " Verification Code "maxlength=" 4 "> </div></div>
/* Click on the picture to replace the Captcha event */function Changeimage () { $ (' #verifyCodeImage '). attr (' src ', ' ${pagecontext.request.contextpath} /user/getverifycode); }
2, click Login after the controller code display
Verification Code verification idea, in fact, is to generate a random number in the background to save to the session and display to the page, the user entered the verification code and the session to save the random number of the comparison of case-insensitive, if the same authentication succeeds, otherwise failed.
/* Get Check code */@RequestMapping ("/getverifycode") public void Generate (httpservletresponse response, HttpSession sess ION) {Bytearrayoutputstream output = new Bytearrayoutputstream (); String verifycodevalue = drawimg (output); Officer verification code saved to session Session.setattribute ("Verifycodevalue", Verifycodevalue); try {servletoutputstream out = Response.getoutputstream (); Output.writeto (out); } catch (IOException e) {logger.info ("<--verification code is written at the front end.) E.printstacktrace (); }//* Draw Verification Code */Private String drawimg (Bytearrayoutputstream output) {String code = ""; Randomly generates 4 characters for (int i = 0; i < 4; i++) {code + = Randomchar (); } int width = 70; int height = 25; BufferedImage bi = new BufferedImage (width, height, bufferedimage.type_3byte_bgr); Font font = new Font ("Times New Roman", Font.plain, 20); //Call graphics2d Painting verification code graphics2d g = Bi.creategraphics (); G.setfont (font); Color color = new Color (66, 2, 82); G.setcolor (color); G.setbackground (New Color (226, 226, 240)); G.clearrect (0, 0, width, height); FontRenderContext context = G.getfontrendercontext (); Rectangle2D bounds = font.getstringbounds (code, context); Double x = (Width-bounds.getwidth ())/2; Double y = (Height-bounds.getheight ())/2; Double ascent = Bounds.gety (); Double Basey = y-ascent; g.DrawString (code, (int) x, (int) Basey); G.dispose (); try {imageio.write (bi, "JPG", output); } catch (IOException e) {e.printstacktrace (); } return code; }/* Get random parameters */private char Randomchar () {Random r = new Random (); String s = "ABCDEFGHJKLMNPRSTUVWXYZ0123456789"; Return S.charat (R.nextint (S.length ())); }
This code is placed in your login request to obtain the user-entered check code and compare
String Verifycode = Request.getparameter ("Verifycode"); String sessionverifycode = (string) session.getattribute ("Verifycodevalue"); if (!verifycode.equalsignorecase ( Sessionverifycode) { logger.info ("<--Login failed, verification code entered incorrectly!) --"); Redirectattributes.addflashattribute ("message", "Captcha entered incorrectly!"); return "Redirect:/user/login";}
Java uses the SSM framework to implement the verification Code feature of the login page