Implementierung des integrierten Kaptcha -Verifizierungscode

Einführung in Kaptcha:

Kaptcha ist ein sehr nützliches Tool zur Erzeugung von Verifizierungscode. Da es viele konfigurierbare Elemente hat, kann es einfach und schnell verschiedene Überprüfungscodes erzeugen.

Entwicklungswerkzeuge und Kerntechnologien verwendet:

1. Eclipse

2. Mybatis

3. Frühling

4. Springmvc

5. Kaptcha

In diesem Artikel werden zwei Möglichkeiten zur Verwendung von Kaptcha eingeführt:

Methode 1: Konfigurieren Sie in Spring-Kaptcha.xml

Methode 2: Konfigurieren Sie in web.xml

Offiziell beginnen:

1. Bauen Sie ein Skelett

1. Fügen Sie Abhängigkeiten hinzu:

 <!-Verifizierungscode-> <depelzie> <gruppe> com.github.penggle </Groupid> <artifactId> Kaptcha </artifactid> <version> 2.3.2 </Version> </abhängig>

Um den Kaptcha -Verifizierungscode mit Ausnahme von Spring- und MyBatis -Abhängigkeiten zu verwenden, stellen Sie diesen einfach vor.

2. Verbessern Sie die Konfigurationsdatei

① Spring-dao.xml

 <!-Konfigurieren Sie die Integration des MyBatis-Prozesses-> <!-1. Konfigurieren Sie die Eigenschaften von Datenbank-bezogenen Parametern Eigenschaften: $ {url}-> <context: Eigenschafts-Placeholder-Standort = "ClassPath: jdbc.properties" /> <! <Property name = "triverClass" value = "$ {jdbc.driver}"/> <Eigenschaft name = "jdbcurl" value = "$ {jdbc.url}"/> <Eigenschaft name = "user" value = "$ {jdbc.username}"/> <Property ". C3P0-Verbindungspool-> <Eigenschaft name = "maxpoolsize" value = "30"/> <Eigenschaft name = "minpoolsize" value = "10"/> <!-Schließen Sie die Verbindung und begehen nicht automatisch. fails --> <property name="acquireRetryAttempts" value="2"/> </bean> <!-- Get the connection time-out time--> <property name="checkoutTimeout" value="10000"/> <!-- Number of retries when the connection fails --> <property name="acquireRetryAttempts" value="2"/> </bean> <!-- Get the connection time-out time--> <property name="checkoutTimeout" value = "10000"/> <!-Anzahl der Wiederholungen Wenn die Verbindung fehlschlägt-> <Eigenschaft name = "accocireretryattempts" value = "2"/> </bean> <!-3. Konfigurieren Sie MyBatis 'SQLSessionFactory-> <bean id = " mappers.xml Datei-> <Eigenschaft name = "mapperlocations" value = "classPath: mappers/*. xml"/> <!-MyBatis-Konfigurationsdatei-> <Eigenschaft name = "configLocation" value = "classPath: mybatis-config.xml"/> <!-Scan das Entity-Paket, das Entity-Paket, das Alias->; value = "com.zhu.kaptcha.entity"> </property> </bean> <!-4. Spring findet die Klasse automatisch unter der DAO-Schnittstelle-> <bean> <Property name = "Basepackage" value = "com.zhu.kaptcha.dao"/> <Eigentum name = " </bean>

②spring-service.xml

 <!-Alle Anmerkungen im Servicepaket scannen-> <Kontext: Komponenten-scan-Basis-Package = "com.zhu.kaptcha.service"/> <!-Transaktionsmanagement-> <Bean ID = "TransactionManager"> <Eigenschaft name = "dataSource" Ref = "dataSource"/> </tean> configuring-dataS-basierte DECONNOSING-DECONNOSE-DECONCARATION-DECONDRICATION-DECONDRICATION-DECONNOTATION-DECONNOSE-DECONNOSE-DECONNOSE-DECONNATION-DECONNATION-DECONNATION-DECONNATION-DECONNATION-DECONNATION-DECONNATIONS "/> </ANEL. Transaction-Manager = "TransactionManager"/>

③spring-web.xml

 <!-Konfigurieren Sie SpringMVC-> <!-1. Schalten Sie den SpringMVC-Annotationsmodus ein-> <MVC: Annotationsgetrieben /> <!-2. Definieren Sie Ansicht Parser-> <bean id = "viewResolver"> <Eigenschaft name = "prefix" value = "/"/> <Eigenschaft name = "suffix" value = ". JSP"/> </bean> <!-3. Scannen Sie die Web-bezogenen Beans-> <context: component-scan-package = com.zhu.kaptcha.captcha.

④Web.xml

 <servlet> <servlet-name>spring-dispatcher</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring/spring-*.xml</param-value> </init-param> </servlet> <Servlet-Mapping> <Servlet-name> Spring-Dispatcher </Servlet-Name> <URL-Pattern>/</url-pattern> </servlet-mapping> <!-codierende Filter-> <filter> <filter-name> codierungfilter </filter-name> <Filter-Klasse> org.springFramework.web.filter.CharactercodingFilter </Filter-Klasse> <Async-Supported> true </async-supportiert> <init-param> <param-name> codieren </param-value> utf-8 </param-valing </param-valing </param-valing </</init-param> </param-valing </param-valing </param-valing <Filter-name> codingFilter </filter-name> <url-pattern>/*</url-pattern> </filtermapping>

Zu diesem Zeitpunkt ist das Skelett aufgebaut und der Datenbankvorgang wird abgeschlossen.

2. Betrieb der Datenbank

1. Entitätsschicht

User.java

 public class User {private int uid; privater String -Benutzername; privates Zeichenfolgenkennwort;}

2. DAO -Schicht

Userdao.java

 public interface userdao {user findUserByUnername (String -Benutzername);}

Userdao.xml

 <? namespace = "com.zhu.kaptcha.dao.userdao"> <select id = "findUserByusername" resultType = "com.zhu.kaptcha.entity.user"> ausgewählt * von tb_user wobei User_name = {userername} </select> </mapper>> </mapper>> </mapper>

3. Serviceschicht

UserServiceImpl.java

 @ServicePublic Class UserServiceImpl implementiert UserService {@autowired private userDao userDao; @Override public boolean Login (String -Benutzername, String -Passwort) {user user = userDao.finduserByUnername (Benutzername); if (password.equals (user.getPassword ())) {return true; } else {return false; }}}

Hinweis: Beim Schreiben in die DAO -Ebene und die Servicesteuerung sollten Sie einen Junit -Test durchführen. Der Test ist relativ einfach, daher werde ich ihn hier nicht erklären.

3. Integrieren Sie Kaptcha

Methode 1: Konfigurieren Sie über Spring-Kaptcha.xml

1. Erstellen Sie im Feder-Ressourcenordner eine neue Spring-Kaptcha.xml -Konfigurationsdatei mit folgenden Inhalten:

Spring-Kaptcha.xml

 <bean id="captchaProducer"> <property name="config"> <bean> <constructor-arg> <props> <prop key="kaptcha.border">yes</prop> <prop key="kaptcha.border.color">105,179,90</prop> <prop key="kaptcha.textproducer.font.color">blue</prop> <prop key="kaptcha.image.width">125</prop> <prop key="kaptcha.image.height">45</prop> <prop key="kaptcha.textproducer.font.size">45</prop> <prop key="kaptcha.session.key">code</prop> <prop key="kaptcha.textproducer.char.length">4</prop> <prop key="kaptcha.textproducer.font.names">Song font, Kaiyi, Microsoft Yahei</prop> </props> </constructor-arg> </bean> </property> </bean>

Hinweis: Diese Bean ist mit einigen Bestätigungscode-Attributen konfiguriert und kann auch direkt in Spring-Web.xml geschrieben werden. Laut persönlichen Gewohnheiten schreibe ich gerne die Konfiguration verschiedener Module in verschiedenen Dateien.

2. Erstellen Sie einen neuen Controller, um den Verifizierungscode zu generieren

CodEcontroller.java

 @ControllerPublic Class codEcontroller {@autowired Private Produzent CaptchaproDucer = null; @RequestMapping ("/waptcha") public void getKaptchaimage (httpServletRequest -Anforderung, httpServletResponse -Antwort) löst eine Ausnahme aus {httpSession session = request.getSession (); response.setDateHeader ("läuft", 0); response.setheader ("cache-control", "No-Store, No-Cache, Must-Revalidate"); response.addHeader ("cache-control", "post-Check = 0, pre-Check = 0"); response.setheader ("pragma", "no-cache"); Antwort.SetContentType ("Image/JPEG"); // Verifizierungscode -Zeichenfolge erzeugen captext = captchaproDucer.CreateText (); Session.SetAttribute (Constants.kaptcha_Session_Key, Captext); // BufferedImage in den Client bi = captchaproDucer.Createimage (Captext) schreiben; ServLetOutputStream out = Antwort.getOutputStream (); Imageio.write (bi, "jpg", out); probieren {out.flush (); } endlich {out.close (); }}}

Hinweis: Die Route dieses Controllers lautet "Kaptcha", sodass der SRC des Front-End-Verifizierungscodes Kaptcha.jpg sein wird.

3. Erstellen Sie eine neue Werkzeugklasse, um Überprüfungscodes zu vergleichen

Codeutil.java

 public class codeutil { / ** * den erhaltenen Parameter Front-End in String-Typ konvertieren * @param request * @param key * @return * / public static String getString (httpServletRequest-Anforderung, String-Taste) {try {String result = request.getParameter (Key); if (result! = null) {result = result.trim (); } if ("". Equals (Ergebnis)) {result = null; } Rückgabeergebnis; } catch (Ausnahme e) {return null; }} /** * Überprüfung des Verifizierungscodes * @param request * @return * /public static boolean checkverifyCode (httpServletRequest Request) {// Die generierte Verifizierungscode String verifyCodeexpect = (String) request.getSession (). // Erhalten Sie den von der Benutzerzeichenfolge befragten Verifizierungscode verifyCodeactual = codeutil.getString (Anfrage, "verifyCodeactual"); if (verifyCodeactual == null ||! verifyCodeactual.equals (verifyCodeexpected)) {return false; } Return true; }}

HINWEIS: Der von Get hier übergebene Parameter heißt "verifyCodeactual", sodass der Namenswert des Verifizierungscode auf der Seite auch dies sein sollte.

Als nächstes können Sie den Verifizierungscode verwenden!

4. Controller für die Benutzeranmeldung

UserController.java

 @Controller @RequestMapping ("/user") öffentliche Klasse UserController {@autowired private userservice userservice; @RequestMapping ("/login") öffentlicher String -Login (@RequestParam ("Benutzername") String -Benutzername, @RequestParam ("Passwort") String -Passwort, httpServletRequest -Anforderung) {Boolean ergebnis = userservice.login (username, passwart); if (! codeUtil.CheckverifyCode (request)) {request.setAttribute ("codeerr", "Überprüfungscode ist falsch!"); zurück "scheitern"; } else {if (result) {request.setAttribute ("user", userername); zurück "Erfolg"; } else {request.setAttribute ("errmsg", "Fehler in Benutzername oder Passwort!"); zurück "scheitern"; }}}}

Hinweis: Hier rufen wir das Codeutil -Tool an, um zu vergleichen, ob der eingegebene Verifizierungscode korrekt ist.

5. Front-End-Seite

login.jsp

 <%@ page Language = "java" import = "java.util. "http://www.w3.org/tr/html4/loose.dtd"> <html> <kopf> <title> Login </title> <script type = "text/javascript"> Funktion refresh () {document.getElementById ('captcha_img'). Src = "). } < /script> < /head> <body> <Form Action = "$ {pageContext.request.contextPath} /Benutzer /Login" methode "post"> userername: <input type = "text" name = "Benutzername" /> <br /> passmarke "passhold" -Kasswort "passy" /> <br /> Verwertungscode: <br /> Verwertungscode: <br /> Verwertungscode: <br /> Verwertungscode: <br /> Verwertcode: name = "verifyCodeActual"> <div> <img id = "captcha_img" onclick = "refresh ()" src = "waptcha.jpg"/> </div> <input type = "value =" login "/> </body> </html> enden" suren "/> </body> </html>

Success.jsp

 <body> <h1> Willkommen zum Anmelden, $ {Benutzer} </h1> </body>

fail.jsp

 <body> sorry, Anmeldung fehlgeschlagen, Grund: <br> $ {Codeerr} <h2> $ {errmsg} </h2> </body>

HINWEIS: Der JS -Code von Login.jsp besteht darin, die Funktion "Klicken, um zu ändern" auszufüllen. Beachten Sie, dass der Name des Verifizierungscodes mit dem in der Werkzeugklasse übergebenen Namen übereinstimmt, und SRC ist die Controller -Route, die den Verifizierungscode plus .JPG generiert.

6. Test:

Geben Sie den richtigen Verifizierungscode ein:

Erfolgreich anmelden:

Geben Sie den falschen Verifizierungscode ein:

Der Verifizierungscode wird auf der Seite falsch angezeigt:

Klicken Sie auf den Bestätigungscode, um ihn zu ändern!

Methode 2: Konfigurieren Sie den Verifizierungscode in web.xml

Im Vergleich zu Method eins erhöht sich eins und zwei ab.

reduzieren:

1. Löschen Sie basierend auf dem obigen Projekt CodeController.java .

2. Löschen Sie Spring-Kaptcha.xml und behalten Sie die anderen.

Zunahme:

1. Fügen Sie die folgende Konfiguration in web.xml hinzu:

 <!-Verifikationscode-> <servlet> <Servlet-name> Kaptcha </Servlet-name> <Servlet-Class> com.google.code.kaptcha.servlet.kaptchaServlet </Servlet-Class> <! </init-param> <!-font color-> <init-param> <param-name> waptcha.textproducer <param-value>135</param-value> </init-param> <!-- Which characters to use to generate verification code--> <init-param> <param-name>kaptcha.textproducer.char.string</param-name> <param-value>ACDEFHKPRSTWX345679</param-value> </init-param> <!-- Image width --> <init-param> <param-name> waptcha.image.height </param-name> <param-value> 50 </param-value> </init-param> <!-Schriftgröße-> <init-param> <param-name> Kapta.TextProd.font.fonT </param-name> </param-name> </param-valuue> 43 </param-value> </param-name> </param-valuue> 43 </param-valuen> </param-</<Param-value> 43 </param-value> </param- <!-Interferenzzeile-> <init-param> <param-name> kaptcha.noise.color </param-name> <param-value> rot </param-value> </init-param> <!-Anzahl der Zeichen-> <init-param </init-param> <!-font-> <init-param> <param-name> waptcha.textproducer.font.names </param-name> <param-value> arial </param-value> </init-param> </servlet> <Servlet-Mapping> <Servlet-nam> kaptcha </servlet-nam> <URL-Muster> /kaptcha.jpg </url-pattern> </servlet-Mapping>

Hinweis: Diese Konfiguration wird verwendet, um den Verifizierungscode zu konfigurieren. Beachten Sie, dass das letzte <url-pattern>/kaptcha.jpg</url-pattern> im Verifizierungscode src = "kaptcha.jpg" entsprechen sollte.

Dadurch wird die Konfiguration des Verifizierungscodes vervollständigt und dann getestet. prüfen:

Geben Sie den falschen Verifizierungscode ein:

Die Seite zeigt den Verifizierungscodefehler an:

Geben Sie den richtigen Verifizierungscode ein:

Erfolgreich anmelden:

Test bestanden!

Zusammenfassen:

1. Es ist sehr einfach, der Seite einen Verifizierungscode hinzuzufügen. Fügen Sie einfach <img src= "xx"> hinzu. Verwenden Sie ein IMG -Tag und verweisen Sie dann auf die Route des Controllers, die den Verifizierungscode über SRC Plus .JPG generiert (der Verifizierungscode ist im Feder konfiguriert), oder verweisen Sie auf den Controller über SRC

<url-pattern>/kaptcha.jpg</url-pattern> , d. H. src="kaptcha.jpg" .

2. Klicken zum Ersetzen ist ebenfalls einfach. Fügen Sie dem IMG -Tag einfach ein Onclick -Ereignis hinzu und vervollständigen Sie es dann mit JS.

Klicken Sie hier, um JS zu ändern:

 <script type = "text/javaScript"> Funktion refresh () {document.getElementById ('captcha_img'). } </script>

Fügen Sie dann das IMG -Tag auf onclick="refresh()" hinzu und vervollständigen Sie so das Klickereignis.

3. Mehr Kapcha -Attributkonfiguration

Der obige Inhalt ist eine Zusammenstellung persönlicher Notizen. Wenn es Fehler gibt, können Sie mich gerne kritisieren und korrigieren!