Введение в капчу:
Kaptcha - очень полезный инструмент генерации кода проверки. Поскольку он имеет много настраиваемых элементов, он может легко и быстро генерировать различные коды проверки.
Используемые инструменты разработки и основные технологии:
1. Eclipse
2. mybatis
3. Весна
4. Springmvc
5. Капча
Эта статья представит два способа использования капче:
Метод 1: Настройка в Spring-Kaptcha.xml
Метод 2: настройка в web.xml
Официально начинается:
1. Постройте скелет
1. Добавьте зависимости:
<!-код проверки-> <Dependency> <groupId> com.github.penggle </GroupId> <strifactid> kaptcha </artifactid> <sersive> 2.3.2 </version> </depertion>
Чтобы использовать код проверки Kaptcha, за исключением зависимостей Spring и Mybatis, просто представьте этот.
2. Улучшение файла конфигурации
① Spring-Dao.xml
<!-Настройте интеграцию процесса Mybatis-> <!-1. Настройте свойства свойств параметров, связанных с базой данных: $ {url}-> <Контекст: Property-Placeholder Plocation = "ClassPath: jdbc.properties" /> <!-2. Конфигурируйте пул соединения DataBase-> <bean id = "dataSuarce">-POSTICERE The Propective The Propertive The Propective The Propective The Propective The Propective The Propective The Propective the Propective The Propecture-> <Bean ID = " name = "DriverClass" value = "$ {jdbc.driver}"/> <name = "jdbcurl" value = "$ {jdbc.url}"/> <name = "user" value = "$ {jdbc.username}"/> <name = "Пароль" value = "$ {jdbc.ward}"/> <-cvaly value = "$ {jdbc.ward}"/> <>-cpary of value of value of value of value vatue of varue of value of value value of value value value value = jdbs. <имя свойства = "maxpoolsize" value = "30"/> <property name = "minpoolsize" value = "10"/> <!-Закрыть соединение и не совершает автоматически-> <name = "autocommitonclose" value = "false"/> <! name = "acpireretryAttempts" value = "2"/> </bean> <!-Получить время времени-выхода на подключение-> <name = "keectouttimeout" value = "10000"/> <!-Количество повторений, когда соединение не удалось-> <Property name = "acfiereretryattempts" value = "2"/> </bean> <! value = "10000"/> <!-Количество повторных поисков при сбое соединения-> <name = "acpireretryattempts" value = "2"/> </bean> <!-3. Настройка mybatis 'sqlsessionFactory-> <bean id = "sqlSessionFactefact"> name name = "dataSource" ref = "dataSource"/> <! Файл-> <name = name = "mapperlocations" value = "classpath: mappers/*. xml"/> <!-файл конфигурации mybatis-> <name = "configlocation" value = "classpath: mybatis-config.xml"/> <!-Scan Page Package, используйте Alias-> <property name vamee = "typealsepcage"! value = "com.zhu.kaptcha.entity"> </property> </bean> <!-4. Spring автоматически найдет класс по интерфейсу DAO-> <Bean> <name = "basepackage" value = "com.zhu.kaptcha.dao"/> <property name = "sqlsessionFactoryBainname" value = "sqlActory"/> <propatore = "sqlSessionFactoryBeanbeanName"/> "/> <Property name =" sqlsessionFactorybeanname "/>"/> <Property name = "sqlSessionFactorybeanname"/> <>> ". </bean>②spring-service.xml
<!-сканировать все аннотации в пакете обслуживания-> <Контекст: компонент-сканирование Base-package = "com.zhu.kaptcha.service"/> <!-Управление транзакциями-> <bean id = "transactionmanager"> <свойство = "DataSource" ref = "DataSource"/> </> </bean> <! Transaction-Manager = "TransactionManager"/>
③spring-web.xml
<!-Настройте Springmvc-> <!-1. Включите режим аннотации Springmvc-> <MVC: Annotation-raven /> <!-2. Определите просмотр parser-> <bean id = "viewResolver"> <name = "prefix" value = "/"/> <name = "suffix" value = ". Jsp"/> </bean> <!-3. Сканирование связанных с веб-бобами-> <context: component-scan base-package = "com.zhu.kaptcha.controller"/>> <compontent-scan-package = "com.zhu.kaptcha.controller"/> <compontent-scan-package = "com.zhu.kaptcha.controll
④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-ame> <param-value> classpath: Spring/Spring-*. xml </param-value> </init-par> </param-ame> </param-value> classpath: Spring-*. </servlet> <servlet-mapping> <servlet-name> spring-dispatcher </servlet-name> <url-pattern>/</url-pattern> </servlet> <!-Фильтр кодирования-> <Filter> <Filter-name> EncodingFilter </filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <async-supported>true</async-supported> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> </filter> <filter-mapping> <filter-name> encodingfilter </filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
На этом этапе скелет построен, а операция базы данных завершена.
2. Работа базы данных
1. Сущностный слой
User.java
Пользователь открытого класса {private int uid; частное имя пользователя; Private String Password;}2. Дао слой
Userdao.java
public interface userdao {user finduserbyusername (string username);}Userdao.xml
<? xml version = "1.0" Encoding = "utf-8"?> <! Doctype mapperpublic "-// mybatis.org//dtd mapper 3.0 // en" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper.org/dtd/mybatis-3-mapper.dtd " namespace = "com.zhu.kaptcha.dao.userdao"> <select id = "finduserbyusername" resultype = "com.zhu.kaptcha.entity.user"> select * from tb_user, где user_name =#{useraname} </select> </mapper>3. Сервисный слой
Userserviceimpl.java
@Servicepublic class userserviceimpl реализует userservice {@autowired private userdao userdao; @Override public boolean login (String username, String password) {user user = userdao.finduserbyusername (username); if (password.equals (user.getpassword ())) {return true; } else {return false; }}}Примечание. При написании на слой DAO и уровне обслуживания вы должны пройти тест на JUNIT. Тест относительно прост, поэтому я не буду объяснять это здесь.
3. Интегрировать капча
Метод 1: Настройка через Spring-Kaptcha.xml
1. Создайте новый файл конфигурации Spring-Kaptcha.xml в папке ресурсов Spring, со следующим содержимым:
Spring-Kaptcha.xml
<bean id = "captchaproducer"> <name = "config"> <bean> <stonfuctor-arg> <props> <prop key = "kaptcha.border"> Да </prop> <prok key = "kaptcha.border.color"> 105,179,90 </prop> <propcha. <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> key = "kaptcha.textproducer.char.length"> 4 </prop> <prop key = "kaptcha.textproducer.font.names"> song font, kaiyi, microsoft yahei </prop> </props> </constructor-arg> </bean> </propot> </bean>
Примечание. Этот бон настроен с некоторыми атрибутами кода проверки, а также может быть записан непосредственно в Spring-Web.xml. Согласно личным привычкам, мне нравится писать конфигурацию различных модулей в разных файлах.
2. Создайте новый контроллер для генерации кода проверки
CodeController.java
@Controllerpublic class codecontroller {@autowired частного продюсера captchaproducer = null; @Requestmapping ("/kaptcha") public void getkaptChaimage (httpservletrequest, httpservletresponse response), бросает исключение {httpsession session = request.getSession (); response.setDateHeader («истекает», 0); response.setheader («Контроль кэша», «без магазина, без качания, обязательно-ревалидат»); response.addheader ("Cache-Control", "post-check = 0, pre-check = 0"); response.setheader ("pragma", "без Cache"); response.setContentType ("Image/jpeg"); // генерировать код проверки строки captext = captchaproducer.createtext (); session.setattribute (constants.kaptcha_session_key, captext); // Написать BufferedImage на клиент Bi = captChaproDucer.createImage (capText); ServletOutputStream OUT = response.getOutputStream (); Imageio.write (Bi, «JPG», Out); try {out.flush (); } наконец {out.close (); }}}Примечание: маршрут этого контроллера-«kaptcha», поэтому SRC кода проверки переднего конца будет kaptcha.jpg.
3. Создайте новый класс инструментов для сравнения кодов проверки
CodeUtil.java
public Class CodeUtil { / ** * преобразовать полученный параметр переднего параметра в тип строки * @param запрос * @param * @return * / public Static String getString (httpservletrequest, string key) {try {string result = request.getparameter (key); if (result! = null) {result = result.trim (); } if ("".. equals (result)) {result = null; } return Result; } catch (Exception e) {return null; }} /** * Проверка кода проверки * @param запрос * @return * /public static boolean keepverifycode (httpservlectrequest) {// Получить сгенерированный код проверки verifycodeexpected = (String) request.getsession (). // Получить код проверки, введенный пользовательской строкой verifycodeactual = codeUtil.getString (запрос, "VerifyCodeactual"); if (verifycodeactual == null ||! verifycodeactual.equals (verifycodeexprected)) {return false; } вернуть true; }}ПРИМЕЧАНИЕ. Параметр, переданный GET здесь, называется «VerifyCodeactual», поэтому значение имени кода проверки на странице также должно быть этим.
Далее вы можете использовать код проверки!
4. Контроллер для входа в систему пользователя
Usercontroller.java
@Controller @requestmapping ("/user") открытый класс usercontroller {@autowired private userservice userservice; @Requestmapping ("/login") public String login (@RequestParam ("userName") String username, @RequestParam ("пароль") String Password, httpservletrequest) {boolean result = userservice.login (имя пользователя, пароль); if (! CodeUtil.checkverifyCode (request)) {request.setattribute ("codeerr", "код проверки неверен!"); вернуть "Fail"; } else {if (result) {request.setattribute ("user", username); вернуть "успех"; } else {request.setattribute ("errmsg", "ошибка в имени пользователя или пароля!"); вернуть "Fail"; }}}}Примечание. Здесь мы называем инструмент CodeUtil, чтобы сравнить, является ли введенный код проверки правильным.
5. Front-End Page
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> <head> <title> login </title> <script type = "text/javascript"> function ropresh () {document.getelementbyid ('captcha_img'). src = "kapt.jpgaId ('captcha_img'). } </script></head><body> <form action="${pageContext.request.contextPath }/user/login" method="post"> userName:<input type="text" name="userName" /><br /> password:<input type="password" name="passWord" /><br /> verification code: <input type="text" placeholder="Please enter verification code" name = "verifycodeactual"> <viv> <img id = "captcha_img" onclick = "rebresh ()" src = "kaptcha.jpg"/> </div> <input type = "Vade" value = "login"/> </form> </body> </html>Успех.jsp
<body> <h1> добро пожаловать в систему, $ {user} </h1> </body>Fail.jsp
<body> Извините, не удастся, причина: <br> $ {codeerr} <h2> $ {errmsg} </h2> </body>Примечание. Код js login.jsp должен выполнить функцию «Нажмите, чтобы изменить»; Обратите внимание, что имя кода проверки должно быть таким же, как и название, передаваемое в классе инструментов, а SRC - это маршрут контроллера, который генерирует код проверки плюс .jpg.
6. Тест:
Введите правильный код проверки:
Успешно войдите в систему:
Введите неправильный код проверки:
Код проверки отображается неправильно на странице:
Нажмите на код проверки, чтобы изменить его!
Метод 2: Настройка кода проверки в web.xml
По сравнению с первым методом один увеличивается и два уменьшаются.
уменьшать:
1. На основе вышеуказанного проекта, Delete CodeController.java .
2. Удалить Spring-Kaptcha.xml и сохранить остальных.
увеличивать:
1. Добавьте следующую конфигурацию в web.xml :
<!-- Verification code--> <servlet> <servlet-name>Kaptcha</servlet-name> <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class> <!-- Is there a border--> <init-param> <param-name>kaptcha.border</param-name> <param-value>no</param-value> </init-param> <!-цвет шрифта-> <initparam> <param-name> kaptcha.textproducer.font.color </param-name> <param-value> black </param-value> </init-param> <!-Ширина изображения-> <init-param> <param-name> kapt.image.width </param-meme> <param-meame> kapt.image.width </param-name. <param-value> 135 </param-value> </init-param> <!-какие символы используют для генерации кода проверки-> <init-param> <param-name> kaptcha.textproducer.char.string </param-name> <param-value> acdefhkprstwx345679 </param-value> </init-param> initphath>-Imition>-init-param>-init-parmam> <param-name> kaptcha.image.height </param-name> <value> 50 </param-value> </init-param> <!-размер шрифта-> <init-param> <mame-name> kaptcha.textproducer.font.size </param-name> <value> 43 </param-value. <init-param> <param-name>kaptcha.noise.color</param-name> <param-value>red</param-value> </init-param> <!-- Number of characters --> <init-param> <param-name>kaptcha.textproducer.char.length</param-name> <param-value>4</param-value> </init-param> <!-- Font--> <Init-param> <param-name> kaptcha.textproducer.font.names </param-name> <value> arial </param-value> </init-param> </servlet> <servlet-mapping> <servlet-name> kaptcha </servlet-name> <url-pattern> /kaptcha.
Примечание. Эта конфигурация используется для настройки кода проверки. Обратите внимание, что последний <url-pattern>/kaptcha.jpg</url-pattern> должен соответствовать src = "kaptcha.jpg" в коде проверки.
Это завершает конфигурацию кода проверки, а затем проверяет его. тест:
Введите неправильный код проверки:
На странице отображается ошибка кода проверки:
Введите правильный код проверки:
Успешно войдите в систему:
Тест прошел!
Суммировать:
1. Очень просто добавить код проверки на страницу, просто добавьте <img src= "xx"> . Используйте тег IMG, а затем укажите на маршрут контроллера, который генерирует код проверки через SRC Plus .jpg (код проверки настроен в пружине) или укажите на контроллер через SRC
<url-pattern>/kaptcha.jpg</url-pattern> , то есть src="kaptcha.jpg" .
2. Нажатие, чтобы заменить, также прост, просто добавьте событие Onclick в тег IMG, а затем завершите его с помощью JS.
Нажмите, чтобы изменить JS:
<script type = "text/javascript"> function refresh () {document.getElementbyId ('captcha_img'). src = "kaptcha.jpg?"+math.random (); } </script> Затем добавьте onclick="refresh()" к тегу IMG, таким образом завершив событие Click.
3. Больше конфигурации атрибута капча
| Постоянный | описывать | значение по умолчанию |
| Kaptcha.border | Граница изображения, юридическая ценность: да, нет | да |
| Kaptcha.border.color | Цвет границы, юридическая ценность: r, g, b (и дополнительная альфа) или белая, черная, синяя. | черный |
| Kaptcha.border.Thickness | Толщина границы, юридическая стоимость:> 0 | 1 |
| kaptcha.image.width | Картинка широко | 200 |
| kaptcha.image.height | Высокая картина | 50 |
| kaptcha.producer.impl | Класс реализации изображений | com.google.code.kaptcha.impl.defaultkaptcha |
| kaptcha.textproducer.impl | Текстовый класс реализации | com.google.code.kaptcha.text.impl.defaultTextCreator |
| kaptcha.textproducer.char.string | Сбор текста, значение кода проверки получается из этой коллекции | ABCDE2345678GFYNMNPWX |
| kaptcha.textproducer.char.length | Длина кода проверки | 5 |
| kaptcha.textproducer.font.names | Шрифт | Ариал, курьер |
| kaptcha.textproducer.font.size | Размер шрифта | 40px. |
| kaptcha.textproducer.font.color | Цвет шрифта, юридические ценности: r, g, b или белый, черный, синий. | черный |
| kaptcha.textproducer.char.space | Текстовый интервал | 2 |
| kaptcha.noise.impl | Класс реализации помех | com.google.code.kaptcha.impl.defaultnoise |
| kaptcha.noise.color | Цвет помех, юридическая ценность: r, g, b или белый, черный, синий. | черный |
| kaptcha.obscurificator.impl | Стиль картинки: Водяная лента com.google.code.kaptcha.impl.waterripple Fisheyecom.google.code.kaptcha.impl.fisheyegimpy Shadowcom.google.code.kaptcha.impl.shadowgimpy | com.google.code.kaptcha.impl.waterripple |
| Kaptcha.background.impl | Фонография класса реализации | com.google.code.kaptcha.impl.defaultbackground |
| kaptcha.background.clear.from | Градиент цвета фона, начальный цвет | светло -серый |
| kaptcha.background.clear.to | Фоновый цветовой градиент, конец цвета | Белый |
| kaptcha.word.impl | Текстовый рендеринг | com.google.code.kaptcha.text.impl.defaultwordRenderer |
| kaptcha.session.key | Ключ сессии | Kaptcha_session_key |
| kaptcha.session.date | дата сессии | Kaptcha_session_date |
Вышеуказанный контент представляет собой сборник личных заметок. Если есть какие -либо ошибки, вы можете критиковать и исправить меня!