この記事では、フロントデスクのページからバックデスクまで詳しく説明します。以下で見てみましょう。
1。前景コード、image.jsp
<％@ page Language = "Java" contentType = "text/html; charset = utf-8" pageencoding = "utf-8"％> < "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv =" content-type "content =" text/html; charset = utf-8 "> <title>画像検証コードを取得</タイトル> <スクリプトタイプ="/javascript ""/javascript "" src = "$ {pagecontext.request.contextpath}/static/js/jquery-1.10.2.min.js"> </script> </head> <body> <form action = "##" method = 'post> <input type = "hidden" id = "userid" name = "userid" id = "loginname" placeholder = "username" value = "" class = 'form-control'/> </div> </div> <div> <input type = "password" off "id =" pwd "name =" pwd "placeHolder =" password "class = 'form-control'/> onblur = "checkimg（this.value）" name = "validatecode" type = "text" placeholder = "enter visifilision code"/> </div> <span> <img id = "codevalidateimg" onclick = "javascript：flushvalidatecode（）;"/> </span> <p> <p> <a href = " > 1つの変更</a> </p> </div> <div> <span> </span> </div> <div> <div> <input type = "checkbox" name = "value =" 1 "class = 'icheck-me' data-skin =" data-color = "blue" id = "remember"> <"/div < onclick = "javascript：submitform（）;" class = 'btn btn-primary'> </div> </form> <script type = "text/javascript"> $（document）.ready（function（）{flushvalidatecode（）; // reffince and reverate code}）;/*検証コード*/function flushvalidatecode（）{var valivateimgobject = var validateimgobject = document.getElementById（ "codevalidateimg"）; validateimgobject.src = "$ {pagecontext.request.contextpath}/getsysmanageLogincode？time =" + new date（）;}/*検証コードが正確に入力されることを確認してください*/var url = var url = var url = var url = bar url = "$ {pagecontext.request.contextpath}/checkimagecode"; $ .get（url、{"validatecode"：code}、function（data）{if（data == "ok"）{alert（ "ok！"）} else {alert（ "error！"）flushvalidatecode（）;}}）} </script> </body> </html>2。バックグラウンドコードImageGencontroller.java
パッケージcom.dufyun.springmvc.web.controller; import javax.servlet.http.cookie; Import javax.servlet.htttpservletrequest; Import javax.servlet.http.httpservletresponse; Import inmolg.sprentframecontroller.Strullerloller springframework.util.stringutils; import org.springframework.web.bind.annotation.requestmapping; Import org.springframework.web.bind.annotation.responsebody; Import com.dufy.javaweb.test.test.randomvalidatecode @RequestMapping（value = "/toimg"）public string toimg（）{return "image/image"; } //ログイン検証コード@requestMapping（ "/getsysmanagelogincode"）@responsebody public string getsysmanagelogincode（httpservletresponse response、httpservletrequest request）{respons.setcontenttype（ "image/jpeg"）; Response.setheader（ "Pragma"、 "no-cache"）; //応答ヘッダー情報を設定して、このコンテンツResponse.setheader（ "Cache-Control"、 "No-Cache"）; Response.setheader（ "set-cookie"、 "name = value; httponly"）; // httponlyプロパティを設定して、XS攻撃Response.setDateHeader（ "expire"、0）; randomvalidatecode randomvalidatecode = new RandomValidateCode（）; try {randomvalidatecode.getRandCode（request、response、 "imageCode"）; //出力画像メソッド} catch（例外E）{e.printstacktrace（）; } 戻る ""; } // CODE CODE BILIFICITION @requestMapping（value = "/checkimagecode"）@responsebody public string checktcode（httpservletrequest request、httpservletResponse応答）{string validatecode = request.getParameter（ "validatecode"）;文字列code = null; // 1：Cookie cookie [] cookie = request.getCookies（）で確認コード情報を取得します。 for（cookie cookie：cookie）{if（ "imagecode" .equals（cookie.getname（）））{code = cookie.getValue（）;壊す; }} // 1：セッション検証コードの情報を取得// string code1 =（string）request.getSession（）。getAttribute（ ""）; // 2：検証コードが正しいかどうかを決定します（！stringutils.isempty（validatecode）&& balidatecode.equals（code））{return "ok"; } "error"を返します。 //ここでは、文字サイズのファジー処理の検証を実行しませんでした。興味があれば試すことができます！ }}3。RADOMINGVALIDATECODE.JAVAツールクラス検証コードを生成する
パッケージcom.dufy.javaweb.test; Import java.awt.color; Import java.awt.font; Import java.awt.graphics; Import java.awt.image.bufferedimage;インポートjava.io.io.bytearrayoutputstream; Import java.util.util.util.util.util.util.util.util.util.util.util.util.util. javax.servlet.http.cookie; import javax.servlet.http.httpservletrequest; Import javax.servlet.http.httpservletResponse; public class randomvalidatecode {private random random = new Random（）;プライベートストリングランドストリング= "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; //ランダムに生成された文字列private int width = 80; // picture width height = 26; // picture height private int linesize = 40 ;/ font（ "sixtsys"、font.center_baseline、18）; } /** get color* / private color getRandColor（int fc、int bc）{if（fc> 255）fc = 255; if（bc> 255）bc = 255; int r = fc + random.nextint（bc -fc -16）; int g = fc + random.nextint（bc -fc -14）; int b = fc + random.nextint（bc -fc -18）;新しい色（r、g、b）を返します。 } /** draw string* / private string drawstring（Graphics g、string randomstring、int i）{g.setFont（getFont（））; g.setColor（new Color（random.nextint（101）、random.nextint（111）、random .nextint（121）））; string rand = string.valueof（getRandomsString（random.nextint（randstring.length（））））; randomstring += rand; g.Translate（random.nextint（3）、random.nextint（3））; G.ドローストリング（Rand、13 * I、16）;ランダムストリングを返します。 } /**干渉線を描画* / private void drawline（graphics g）{int x = random.nextint（width）; int y = random.nextint（height）; int xl = random.nextint（13）; int yl = random.nextint（15）; G.drawline（x、y、x + xl、y + yl）; } /**ランダム文字を取得* / public string getRandomString（int num）{return string.valueof（randstring.charat（num））; } / ***ランダムイメージを生成* / public void getRandCode（httpservletrequestリクエスト、httpservletresponse応答、弦キー）{// bufferedimageクラスはバッファーを備えた画像クラスであり、画像クラスは画像情報bufferedimageイメージ= bufferedimageの画像を説明するために使用されるクラスです。グラフィックg = image.getgraphics（）; //画像オブジェクトのグラフィックオブジェクトを生成します。オブジェクトG.FillRect（0、0、幅、高さ）を変更することにより、画像上のさまざまな図面操作を実行できます。 g.setFont（new Font（ "Times New Roman"、font.roman_baseline、18））; G.SetColor（GetRandColor（110、133））; //（int i = 0; i <= linesize; i ++）{drawline（g）;の干渉線を描画します。 } //ランダムな文字列randomstring = ""; for（int i = 1; i <= stringnum; i ++）{randomstring = drawstring（g、randomstring、i）; } // 1：ランダムに生成された検証コードをCookie Cookie cookie = new Cookie（key、randomstring）に入れます。 Response.AddCookie（Cookie）; // 2：ランダムに生成された検証コードをセッション文字列sessionId = request.getSession（）。getId（）に配置します。 request.getSession（）。setAttribute（sessionId+key、randomstring）; System.out.println（ "************" + Randomstring）; //概要：両方の方法は良好です、//（1）：Cookieを使用して検証コードをフロントブラウザーに送信しますが、これは安全ではありません！使用をお勧めしません。 //（2）：セッションメソッドを使用すると、検証コードがより安全なブラウザに送信されないという問題を解決できますが、ユーザー数が大きすぎる場合、そのようなストレージ方法はサーバーに圧力をかけ、サーバーのパフォーマンスに影響します。使用をお勧めしません。 //この方法はここで一時的に実装されています。最良の方法は、プロジェクトで使用されているキャッシュに生成された検証コードを保存し、無効な時間を設定することです。これは、セキュリティを達成するだけでなく、サーバーの圧力を軽減することもできます。 g.dispose（）; try {bytearrayoutputStream tmp = new bytearrayoutputStream（）; Imageio.write（image、 "png"、tmp）; tmp.close（）; integer contentlength = tmp.size（）; Response.setheader（ "content-length"、contentlength + ""）; Response.getOutputStream（）。write（tmp.tobytearray（））; //メモリ内の画像をFlowのクライアントに出力} catch（例外e）{e.printstacktrace（）; }最後に{try {respons.getOutputStream（）。flush（）; Response.getOutputStream（）。close（）; } catch（例外E2）{e2.printstacktrace（）; }}}} 4。概要
この記事の内容はここで終わります。内部の内容がわからない場合は、メッセージを残すことができます。この記事の内容が、すべての人の勉強と仕事に役立つことを願っています。