Implémentation du code de vérification Kaptcha intégré Spring

Introduction à Kaptcha:

Kaptcha est un outil de génération de code de vérification très utile. Puisqu'il a de nombreux éléments configurables, il peut facilement et rapidement générer divers codes de vérification.

Outils de développement et technologies de base utilisées:

1. Eclipse

2. Mybatis

3. Printemps

4. Springmvc

5. Kaptcha

Cet article présentera deux façons d'utiliser Kaptcha:

Méthode 1: Configurer dans Spring-kaptcha.xml

Méthode 2: Configurer dans web.xml

Commencez officiellement:

1. Construisez un squelette

1. Ajouter des dépendances:

 <! - CODE DE VÉRIFICATION -> <Dependance> <ProupId> com.github.peggle </romp grouped> <Artifactid> kaptcha </retifactid> <version> 2.3.2 </-version> </Dependency>

Pour utiliser le code de vérification Kaptcha, à l'exception des dépendances de Spring et MyBatis, introduisez simplement celle-ci.

2. Améliorer le fichier de configuration

① printemps-dao.xml

 <! - Configurez l'intégration du processus MyBatis -> <! - 1. Configurez les propriétés des paramètres liés à la base de données Propriétés: $ {url} -> <context: propriété-placeholder location = "classpath: jdbc.properties" /> <! - 2. Configurer le pool de connexions de Database -> <bean id = "datasource"> <! name = "driverclass" value = "$ {jdbc.driver}" /> <propriété name = "jdbcurl" value = "$ {jdbc.url}" /> <propriété name = "user" value = "$ {JDBC.Username}" / <propriété name = "Passue" Value = "$ {jdbc.password}" /> <! Pool de connexion C3P0 -> <propriété name = "maxpoolSize" value = "30" /> <propriété name = "minpoolSize" value = "10" /> <! - Fermez la connexion et ne commet pas automatiquement -> <Propriété Name = "AutoComMitOnClose" Value = "false" /> <! échoue -> <propriété name = "acquerreetAtTempts" value = "2" /> </ank> <! - Obtenez le temps de temps-sortie de la connexion -> <propriété name = "CheckoutTimeOut" value = "10000" /> <! - Nombre de nouvelles fois lorsque la connexion échoue -> <! value = "10000" /> <! - Nombre de tentatives lorsque la connexion échoue -> <propriété name = "acquerreetTatTempts" value = "2" /> </Ean> <! - 3. Configurer MyBatis 'SqlSessionFactory -> <Bean Id = "SqlSessionFactory"> <propriété named = "datasource" Ref = "datasource" /> <! -> <propriété name = "mapperlocations" value = "classPath: mAperS / *. xml" /> <! - MyBatis Configuration File -> <propriété name = "configLocation" value = "ClassPath: MyBatis-Config.xml" /> <! - Scan the Entity Pack Value = "com.zhu.kaptcha.entity"> </ propriété> </ bean> <! - 4. Spring trouvera automatiquement la classe sous l'interface DAO -> <anEn> <propriété name = "Basepackage" Value = "com.zhu.kaptcha.dao" /> <propriété name = "SQLSESSIONFACTORYBAME" Value = "SQLSSessionfactory"> </pankname "

②spring-service.xml

 <! - Scannez toutes les annotations dans le package de services -> <Context: Component-Scan Base-Package = "com.zhu.kaptcha.service" /> <! - Management de transaction -> <bean id = "TransactionManager"> <Property Name = "DataSource" Ref = "DataSource" /> </anofride transaction-manager = "TransactionManager" />

③spring-web.xml

 <! - Configurer SpringMvc -> <! - 1. Activez le mode d'annotation SpringMvc -> <MVC: annotation-Driven /> <! - 2. Define Afficher l'analyse -> <bean id = "ViewResolver"> <propriété name = "prefix" value = "/" /> <propriété name = "suffix" value = ". Jsp" /> </ bean> <! - 3. Scan the web lié aux beans -> <context: Component-Scan Package = "com.zhu.kaptcha.Controller" />>

④web.xml

 <VerTlet> <Serplet-Name> Spring-Dispatcher </ Servlet-Name> <Servlet-Class> org.springframework.web.servlet.dispatcherservlet </ Servlet-Class> <Init-Param> <Am param-Name> ContextConfiglocation </ Param-name> <Amvi-Value> ClassPath: Spring / Spring - *. </ servlet> <servlet-mapping> <servlet-name> spring-dispatcher </vrlett-name> <url-potern> / </url-potern> </vrlett-mapping> <! - Encoding Filter -> <filter> <filter-name> EncodingFilter </filter-name> <Filter-Class> org.springframework.web.filter.characterencodingfilter </filter-class> <async-support> true </sync-supported> <Init-Param> <Am param-name> Encoding </ param-name> <paramter> utf-8 </ param-value> <mapping-mappage> <filtre-name> EncodingFilter </filter-name> <Url-sattern> / * </ url-stern> </filter-mapping>

À ce stade, le squelette est construit et le fonctionnement de la base de données est terminé.

2. Fonctionnement de la base de données

1. Couche d'entité

User.java

 classe publique User {private int uid; Nom d'utilisateur de chaîne privée; Mot de passe de chaîne privé;}

2. Couche Dao

Userdao.java

 Interface publique UserDao {utilisateur finseserByUserName (String Username);}

Userdao.xml

 <? xml version = "1.0" Encoding = "UTF-8"?> <! Doctype Mappepublic "- // Mybatis.org//dtd Mapper 3.0 // en" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace = "com.zhu.kaptcha.dao.userdao"> <select id = "FindUserByUserName" resultType = "com.zhu.kaptcha.entity.user"> SELECT * FROM TB_USER WHERE USER_NAME = # {username} </ select> </papper>

3. Couche de service

UserServiceImpl.java

 @ServicePublic Class UserserServiceIMPL implémente UserService {@Autowired Private UserDao UserDao; @Override public boolean ligin (String username, String Motway) {user user = userdao.finSUserByUserName (nom d'utilisateur); if (mot de passe.equals (user.getPassword ())) {return true; } else {return false; }}}

Remarque: Lorsque vous écrivez sur la couche DAO et la couche de service, vous devez faire un test JUnit. Le test est relativement simple, donc je ne l'expliquerai pas ici.

3. Intégrer Kaptcha

Méthode 1: Configurer via Spring-kaptcha.xml

1. Créez un nouveau fichier de configuration Spring-kaptcha.xml dans le dossier Spring des ressources, avec le contenu suivant:

printemps-kaptcha.xml

 <bean id = "capchaproducer"> <propriété name = "config"> <an bean> <constructor-arg> <props> <prop key = "kaptcha.border"> oui </prop> <prop key = "kaptcha.border.color"> 105,179,90 </prop> <prop> </ prop> <prop> <prop> key = "kaptcha.image.width"> 125 </prop> <prop key = "kaptcha.image.height"> 45 </ prop> <prop key = "kaptcha.textproduner.font.size"> 45 </prop> <prop key = "kaptcha.ssion.key"> code </pp> <pp> key = "kaptcha.textproducer.char.length"> 4 </prop> <prop key = "kaptcha.textproducer.font.names"> Song font, kaiyi, Microsoft Yahei </prop> </pps> </ Constructor-arg> </ban> </ propriété> </EANT>

Remarque: Ce bean est configuré avec certains attributs de code de vérification et peut également être écrit directement dans Spring-web.xml. Selon des habitudes personnelles, j'aime écrire la configuration de différents modules dans différents fichiers.

2. Créez un nouveau contrôleur pour générer du code de vérification

CodeController.java

 @ControllerPublic Class CodeController {@Autowired Private Producer CAPTCHAPRODUCER = NULL; @RequestMapping ("/ kaptcha") public void getKaptChaimage (request httpservletRequest, réponse httpservletResponse) exception {httpSession session = request.getSession (); réponse.setDateHeader ("expire", 0); Response.sethEader ("Cache-Control", "sans magasin, sans cache, doit-revalider"); Response.Addheader ("Cache-Control", "post-Check = 0, pré-Check = 0"); Response.sethEader ("Pragma", "No-Cache"); réponse.setContentType ("Image / JPEG"); // Générer la chaîne de code de vérification capText = captChaproducer.CreateText (); session.setAttribute (constants.kaptcha_session_key, captext); // Écrivez BufferedImage au client bi = captchaproducer.CreateImage (CapText); ServletOutputStream out = Response.getOutputStream (); ImageIo.write (BI, "JPG", out); essayez {out.flush (); } enfin {out.close (); }}}

Remarque: L'itinéraire de ce contrôleur est "kaptcha", donc le SRC du code de vérification frontal sera kaptcha.jpg.

3. Créez une nouvelle classe d'outils pour comparer les codes de vérification

Codeutil.java

 classe publique CodeUtil {/ ** * Convertir le paramètre frontal obtenu en type de chaîne * @param request * @param key * @return * / public static String getString (httpServLetRequest request, string key) {try {String result = request.getParAmter (key); if (result! = null) {result = result.trim (); } if ("". equals (result)) {result = null; } Retour Résultat; } catch (exception e) {return null; }} / ** * Code de vérification Vérification * @param demande * @return * / public static boolean checkVerifyCode (httpservletRequest request) {// Obtenez le code de vérification généré String VerifyCodeEXPECT = (String) request.getSession (). GetAttribute (com.google.code.kaptcha.constants.kaptcha_session_key); // Obtenez le code de vérification entré par la chaîne utilisateur VerifyCodeActual = CodeUtil.getString (request, "VerifyCodeActual"); if (VerifyCodeActual == NULL ||! VerifyCodeActual.equals (VerifyCodeExPected)) {return false; } return true; }}

Remarque: Le paramètre réalisé par GET ici est appelé "VerifyCodeAactual", de sorte que la valeur de nom du code de vérification dans la page devrait également être la suivante.

Ensuite, vous pouvez utiliser le code de vérification!

4. Contrôleur pour la connexion de l'utilisateur

UserController.java

 @ Contrôleur @ requestmapping ("/ user") public class userController {@Autowired Private UserService UserService; @RequestMapping ("/ Login") Public String Login (@RequestParam ("Username") String username, @RequestParam ("Motway") String Motword, httpservletRequest request) {boolean result = userservice.login (nom d'utilisateur, mot de passe); if (! CodeUtil.CheckVerifyCode (request)) {request.setAttribute ("Codeerr", "Le code de vérification est incorrect!"); retourner "échouer"; } else {if (result) {request.setAttribute ("utilisateur", nom d'utilisateur); retourner le "succès"; } else {request.setAttribute ("errmsg", "erreur dans le nom d'utilisateur ou le mot de passe!"); retourner "échouer"; }}}}

Remarque: nous appelons ici l'outil CodeUtil pour comparer si le code de vérification entré est correct.

5. Page frontale

login.jsp

 <% @ Page Language = "Java" Import = "Java.util. *" ContentType = "Text / Html; charSet = UTF-8" Pageencoding = "UTF-8"%> <! Doctype HTML Public "- // W3C // DTD HTML 4.01 Transitional // En" "http://www.w3.org/tr/html4/loose.dtd"> <html> <adread> <Title> Login </ title> <script type = "text / javascript"> function refresh () {document.getElementByid ('CAPTCHA_IMG'). } </ script> </ head> <body> <form action = "$ {pagecontext.request.contextPath} / user / ligin" metheth = "post"> username: <input type = "text" name = "username" /> <br /> mot de passe: <entrée type = "mot de passe" name = "Password" /> <br /> Code de vérification: <entrée type = "Text =" Parent " name = "VerifyCodeActual"> <div> <img id = "captcha_img" onclick = "refresh ()" src = "kaptcha.jpg" /> </ div> <input type = "soume" value = "login" /> </ form> </ body> </ html>

succès.jsp

 <body> <h1> Bienvenue pour se connecter, $ {user} </h1> </ody>

fail.jsp

 <body> Désolé, l'échec de la connexion, raison: <br> $ {Codeerr} <h2> $ {errmsg} </h2> </body>

Remarque: Le code JS de Login.jsp est de terminer la fonction "Cliquez pour changer"; Notez que le nom du code de vérification doit être le même que le nom passé dans la classe d'outils, et SRC est la route du contrôleur qui génère le code de vérification plus .jpg.

6. Test:

Entrez le code de vérification correct:

Connectez-vous avec succès:

Entrez le mauvais code de vérification:

Le code de vérification s'affiche de manière incorrecte sur la page:

Cliquez sur le code de vérification pour le modifier!

Méthode 2: Configurer le code de vérification dans web.xml

Par rapport à la méthode un, une augmente et deux diminue.

réduire:

1. Sur la base du projet ci-dessus, supprimez CodeController.java .

2. Supprimer le printemps-kaptcha.xml et conserver les autres.

augmenter:

1. Ajouter la configuration suivante dans web.xml :

 <! - Code de vérification -> <Servlet> <Servlet-name> kaptcha </vrlett-name> <servlet-class> com.google.code.kaptcha.servlet.kaptchaservlet </ servlet-class> <! - Existe-t-il un bord -> <Init-Param> <Amar-Name> KaptCha.Donner </ paramname> </1nit-Param> <! - Font Color -> <Init-Param> <Am param-name> kaptcha.textproducer.font.color </ param-name> <param-valeur> noir </ param-Value> </nitt-Param> <! - Width d'image -> <init-param> <param-name> kaptcha.image.width </ param-name> <Am param-Value> 135 </ Param-Value> </Init-Param> <! - Quels caractères utiliser pour générer du code de vérification -> <IniT-PARAM> <AMAM-NAME> KAPTCHA.TextProduner.Char.String </ Param-Name> <Amar-Value> ACDEFHKPRSTWX345679 </ param-Value> <Init-Param> <Am param-name> kaptcha.image.height </onsam-name> <param-valie> 50 </onsam-valent> </nitt-Param> <! - Taille de la police -> <it-param> <param-name> kaptcha.textproducer.font.size </ param-name> <! -! Ligne d'interférence -> <Init-Param> <Am param-name> kaptcha.noise.color </onsam-name> <param-Value> Red </ Param-Value> </Init-Param> <! - Nombre de caractères -> <innit-Param> <Am param-Name> Kaptcha.TextProducer.Charfled </ param-name> <param-value> 4 </ Param-value> </1nit-Param> <! - Font -> <itnit-Param> <param-name> kaptcha.textproducer.font.names </ param-name> <param-vale> arial </ param-value> kaptcha </vrlett-name> <url-sattern> /kaptcha.jpg </url-stern> </ servlet-mapping>

Remarque: Cette configuration est utilisée pour configurer le code de vérification. Notez que le dernier <url-pattern>/kaptcha.jpg</url-pattern> doit correspondre à src = "kaptcha.jpg" dans le code de vérification.

Cela complète la configuration du code de vérification, puis la teste. test:

Entrez le mauvais code de vérification:

La page affiche l'erreur de code de vérification:

Entrez le code de vérification correct:

Connectez-vous avec succès:

Le test passé!

Résumer:

1. Il est très simple d'ajouter du code de vérification à la page, il suffit d'ajouter <img src= "xx"> . Utilisez une balise IMG, puis pointez vers l'itinéraire du contrôleur qui génère le code de vérification via SRC Plus .jpg (le code de vérification est configuré à Spring), ou pointer vers le contrôleur via SRC

<url-pattern>/kaptcha.jpg</url-pattern> , c'est-à-dire src="kaptcha.jpg" .

2. Cliquer pour remplacer est également simple, ajoutez simplement un événement onClick à la balise IMG, puis complétez-le avec JS.

Cliquez pour modifier JS:

 <script type = "text / javascript"> function refresh () {document.getElementByid ('captcha_img'). src = "kaptcha.jpg?" + math.random (); } </ script>

Ajoutez ensuite onclick="refresh()" à la balise IMG, terminant ainsi l'événement de clic.

3. Plus de configuration d'attribut Kaptcha

Le contenu ci-dessus est une compilation de notes personnelles. S'il y a des erreurs, vous êtes invités à me critiquer et à me corriger!