การใช้รหัสการตรวจสอบ Kaptcha Integrated Integrated Integrated

รู้เบื้องต้นเกี่ยวกับ Kaptcha:

Kaptcha เป็นเครื่องมือสร้างรหัสการตรวจสอบที่มีประโยชน์มาก เนื่องจากมีรายการที่กำหนดค่าได้มากมายจึงสามารถสร้างรหัสการตรวจสอบต่างๆได้อย่างง่ายดายและรวดเร็ว

เครื่องมือพัฒนาและเทคโนโลยีหลักที่ใช้:

1. คราส

2. mybatis

3. สปริง

4. SpringMVC

5. Kaptcha

บทความนี้จะแนะนำสองวิธีในการใช้ kaptcha:

วิธีที่ 1: กำหนดค่าใน Spring-kaptcha.xml

วิธีที่ 2: กำหนดค่าใน web.xml

เริ่มต้นอย่างเป็นทางการ:

1. สร้างโครงกระดูก

1. เพิ่มการพึ่งพา:

 <!-รหัสการตรวจสอบ-> <การพึ่งพา> <roupId> com.github.penggle </groupId> <ratifactid> kaptcha </artifactid> <version> 2.3.2 </version> </predency>

หากต้องการใช้รหัสการตรวจสอบ Kaptcha ยกเว้นการพึ่งพา Spring และ Mybatis เพียงแค่แนะนำรหัสนี้

2. ปรับปรุงไฟล์การกำหนดค่า

① Spring-dao.xml

 <!-กำหนดค่าการรวมกระบวนการ mybatis-> <!-1. กำหนดค่าคุณสมบัติของคุณสมบัติพารามิเตอร์ที่เกี่ยวข้องกับฐานข้อมูล: $ {url}-> <บริบท: ตำแหน่งผู้ถือทรัพย์สิน-สถานที่ = "classpath: jdbc.properties" /> <! name = "driverclass" value = "$ {jdbc.driver}"/> <property name = "jdbcurl" value = "$ {jdbc.url}"/> <property name = "user" value = "$ {jdbc.username}" <property name = "maxPoolSize" value = "30"/> <ชื่อคุณสมบัติ = "minPoolSize" value = "10"/> <!-ปิดการเชื่อมต่อและไม่กระทำโดยอัตโนมัติ-> <ชื่อคุณสมบัติ = "AutoCommitonClose" value = "false"/> <! name = "acquireeretretempts" value = "2"/> </ebean> <!-รับเวลาหมดเวลาการเชื่อมต่อ-> <property name = "checkouttimeout" value = "10,000"/> <! value = "10,000"/> <!-จำนวนการตอบกลับเมื่อการเชื่อมต่อล้มเหลว-> <property name = "การซื้อกิจการ" value = "2"/> </ebean> <!-3. กำหนดค่า mybatis 'sqlsessionfactory-> <bean id = "sqlsessionformatory" ไฟล์-> <property name = "mapperlocations" value = "classpath: mappers/*. xml"/> <!-ไฟล์การกำหนดค่า mybatis-> <property name = "configlocation" value = "classpath: mybatis-config.xml"/> <! value = "com.zhu.kaptcha.entity"> </property> </ebean> <!-4. สปริงจะค้นหาคลาสภายใต้อินเตอร์เฟส DAO โดยอัตโนมัติ-> <bean> <property name = "basePackage" value = "com.zhu.kaptcha.dao"/> < </ebean>

②spring-service.xml

 <!-สแกนคำอธิบายประกอบทั้งหมดในแพ็คเกจบริการ-> <บริบท: Component-Scan base-package = "com.zhu.kaptcha.service"/> <!-การจัดการธุรกรรม-> <bean id = "transactionManager"> <property name = "dataSource" ref = "DataSource"/> Transaction-Manager = "TransactionManager"/>>

③spring-web.xml

 <!-กำหนดค่า SpringMvc-> <!-1. เปิดโหมดคำอธิบายประกอบ SpringMVC-> <MVC: คำอธิบายประกอบที่ขับเคลื่อนด้วย /> <!-2 กำหนดมุมมอง Parser-> <bean id = "viewResolver"> <property name = "คำนำหน้า" value = "/"/> <property name = "คำต่อท้าย" value = ". jsp"/> </ebean> <!-3. สแกนถั่วที่เกี่ยวข้องกับเว็บ->

④web.xml

 <servlet> <servlet-name> Spring-Dispatcher </servlet-name> <servlet-lass> org.springframework.web.servlet.dispatcherservlet </servlet-lass> <init-Param> </servlet> <servlet-mapping> <servlet-name> Spring-Dispatcher </servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!-ตัวกรองการเข้ารหัส-> <filter> <Tilter-class> org.springframework.web.filter.characterencodingFilter </filter-lass> <sync-upported> True </async-upported> <init-Param> <param-name> การเข้ารหัส </param-name> <sider-name> encodingFilter </filter-name> <url-pattern>/*</url-pattern> </tilter-mapping>

ณ จุดนี้โครงกระดูกถูกสร้างขึ้นและการดำเนินการฐานข้อมูลเสร็จสิ้น

2. การทำงานของฐานข้อมูล

1. เลเยอร์เอนทิตี

user.java

 ผู้ใช้ระดับสาธารณะ {ส่วนตัว int uid; ชื่อผู้ใช้สตริงส่วนตัว; รหัสผ่านสตริงส่วนตัว}

2. เลเยอร์ Dao

userdao.java

 อินเทอร์เฟซสาธารณะ UserDao {ผู้ใช้ FindUserByUserName (ชื่อผู้ใช้สตริง);}

userdao.xml

 <? xml version = "1.0" การเข้ารหัส = "utf-8"?> <! doctype mapperpublic "-// mybatis.org//dtd mapper 3.0 // en" "http://mybatis.org/dtd/mybatis-3-mapper.dtd namespace = "com.zhu.kaptcha.dao.userdao"> <select id = "findUserByerName" resultType = "com.zhu.kaptcha.entity.user"> เลือก * จาก tb_user ที่ user_name =#{username

3. ชั้นบริการ

userserviceimpl.java

 @ServicePublic คลาส UserserViceImpl ใช้ UserserVice {@AutoWired UserDao UserDao; @Override Public Boolean เข้าสู่ระบบ (ชื่อผู้ใช้สตริง, รหัสผ่านสตริง) {user user = userdao.finduserByUserName (ชื่อผู้ใช้); if (password.equals (user.getPassword ())) {return true; } else {return false; -

หมายเหตุ: เมื่อเขียนลงในเลเยอร์ DAO และชั้นบริการคุณควรทำการทดสอบ Junit การทดสอบค่อนข้างง่ายดังนั้นฉันจะไม่อธิบายที่นี่

3. รวม Kaptcha

วิธีที่ 1: กำหนดค่าผ่าน Spring-kaptcha.xml

1. สร้างไฟล์กำหนดค่า Spring-Kaptcha.xml ใหม่ในโฟลเดอร์ Spring ของทรัพยากรด้วยเนื้อหาต่อไปนี้:

Spring-kaptcha.xml

 <bean id = "captchaproducer"> <property name = "config"> <bean> <constructor-arg> <props> <prop key = "kaptcha.border"> ใช่ </prop> <prop key = "kaptCha.border.color"> 105,179,90 <prop key = "kaptcha.image.width"> 125 </prop> <prop key = "kaptcha.image.height"> 45 </prop> <prop key = "kaptcha.textproducer.font.size"> 45 </prop> key = "kaptcha.textproducer.char.length"> 4 </prop> <prop key = "kaptcha.textproducer.font.names"> ตัวอักษรเพลง Kaiyi, Microsoft Yahei </prop>

หมายเหตุ: ถั่วนี้ได้รับการกำหนดค่าด้วยแอตทริบิวต์การตรวจสอบบางอย่างและยังสามารถเขียนได้โดยตรงใน Spring-web.xml ตามนิสัยส่วนบุคคลฉันชอบเขียนการกำหนดค่าของโมดูลที่แตกต่างกันในไฟล์ต่าง ๆ

2. สร้างคอนโทรลเลอร์ใหม่เพื่อสร้างรหัสการตรวจสอบ

codecontroller.java

 @ControllerPublic คลาส codecontroller {@autowired ผู้ผลิตเอกชน captchaproducer = null; @RequestMapping ("/kaptcha") โมฆะสาธารณะ getKaptChaimage (คำขอ httpservletRequest, การตอบกลับ httpservletResponse) โยนข้อยกเว้น {httpsession session = request.getSession (); Response.setDateHeader ("หมดอายุ", 0); Response.SetheAder ("Cache-Control", "ไม่มีร้านค้าไม่ต้อง-ต้องทำการตรวจสอบ"); Response.addheader ("แคชควบคุม", "post-check = 0, pre-check = 0"); Response.Setheader ("Pragma", "No-cache"); Response.SetContentType ("Image/JPEG"); // สร้างสตริงการตรวจสอบรหัส captext = captchaproducer.createtext (); session.setAttribute (ค่าคงที่ kaptcha_session_key, captext); // เขียน bufferedImage ไปยังไคลเอนต์ bi = captchaproducer.createImage (captext); servletoutputStream out = response.getOutputStream (); imageio.write (bi, "jpg", ออก); ลอง {out.flush (); } ในที่สุด {out.close (); -

หมายเหตุ: เส้นทางของคอนโทรลเลอร์นี้คือ "Kaptcha" ดังนั้น SRC ของรหัสการยืนยันส่วนหน้าจะเป็น kaptcha.jpg

3. สร้างคลาสเครื่องมือใหม่เพื่อเปรียบเทียบรหัสการตรวจสอบ

codeutil.java

 คลาสสาธารณะ codeutil { / ** * แปลงพารามิเตอร์ front-end ที่ได้รับเป็นประเภทสตริง * @param คำขอ * @param คีย์ * @return * / สตริงคงที่สาธารณะ getString (httpservletRequest คำขอคีย์สตริง) {ลอง {string result = request.getParameter (key); if (result! = null) {result = result.trim (); } if ("". เท่ากับ (ผลลัพธ์)) {result = null; } ผลตอบแทนผลลัพธ์; } catch (exception e) {return null; }} /** * การตรวจสอบรหัสการตรวจสอบ * @param คำขอ * @return * /public boolean public checkverifyCode (คำขอ httpservletrequest) {// รับสตริงการตรวจสอบที่สร้างขึ้น verifyCodeExpected = (สตริง) คำขอ. getSession () // รับรหัสการตรวจสอบที่ป้อนโดยสตริงผู้ใช้ VerifyCodeActual = codeUtil.getString (คำขอ, "VerifyCodeActual"); if (VerifyCodeActual == NULL ||! VerifyCodeActual.equals (VerifyCodeExpected)) {return false; } return true; -

หมายเหตุ: พารามิเตอร์ที่ส่งผ่านโดย Get ที่นี่เรียกว่า "VerifyCodeActual" ดังนั้นค่าชื่อของรหัสการตรวจสอบในหน้าควรเป็นเช่นนี้

ถัดไปคุณสามารถใช้รหัสยืนยันได้!

4. คอนโทรลเลอร์สำหรับการเข้าสู่ระบบของผู้ใช้

usercontroller.java

 @controller @requestmapping ("/user") คลาสสาธารณะ userController {@autoWired Userservice Userservice; @RequestMapping ("/ล็อกอิน") การเข้าสู่ระบบสตริงสาธารณะ (@requestparam ("ชื่อผู้ใช้") ชื่อผู้ใช้สตริง @requestparam ("รหัสผ่าน") รหัสผ่านสตริง, httpservletrequest คำขอ) {boolean result = userservice.login if (! codeutil.checkverifycode (คำขอ)) {request.setAttribute ("codeerr", "รหัสการตรวจสอบไม่ถูกต้อง!"); กลับ "ล้มเหลว"; } else {ถ้า (ผลลัพธ์) {request.setAttribute ("ผู้ใช้", ชื่อผู้ใช้); กลับ "ความสำเร็จ"; } else {request.setAttribute ("errmsg", "ข้อผิดพลาดในชื่อผู้ใช้หรือรหัสผ่าน!"); กลับ "ล้มเหลว"; -

หมายเหตุ: ที่นี่เราเรียกเครื่องมือ CodeUtil เพื่อเปรียบเทียบว่ารหัสการตรวจสอบที่ป้อนนั้นถูกต้องหรือไม่

5. หน้าส่วนหน้า

เข้าสู่ระบบ.jsp

 <%@ page language = "java" import = "java.util.*" contentType = "ข้อความ/html; charset = utf-8" pageencoding = "utf-8"%> <! doctype html สาธารณะ "-// w3c // dtd html 4.01 "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title> เข้าสู่ระบบ </title> <script type = "text/javascript"> function refresh () {document.getElementByIdid ('captcha_img') } </script> </head> <body> <form action = "$ {pageContext.request.contextPath} /ผู้ใช้ /เข้าสู่ระบบ" method = "โพสต์"> ชื่อผู้ใช้: <อินพุตประเภท = "ข้อความ" ชื่อ = "ชื่อผู้ใช้" /> <br /> รหัสผ่าน " name = "VerifyCodeActual"> <div> <img id = "captcha_img" onclick = "refresh ()" src = "kaptcha.jpg"/> </div> <อินพุต type = "submit" value = "เข้าสู่ระบบ"

success.jsp

 <body> <h1> ยินดีต้อนรับสู่การเข้าสู่ระบบ $ {ผู้ใช้} </h1> </body>

fail.jsp

 <body> ขออภัยการเข้าสู่ระบบล้มเหลวเหตุผล: <br> $ {codeerr} <h2> $ {errmsg} </h2> </body>

หมายเหตุ: รหัส js ของ login.jsp คือการทำฟังก์ชั่น "คลิกเพื่อเปลี่ยน" ให้สมบูรณ์ โปรดทราบว่าชื่อของรหัสการตรวจสอบควรจะเหมือนกับชื่อที่ส่งผ่านในคลาสเครื่องมือและ SRC เป็นเส้นทางคอนโทรลเลอร์ที่สร้างรหัสการตรวจสอบบวก. jpg

6. ทดสอบ:

ป้อนรหัสการตรวจสอบที่ถูกต้อง:

เข้าสู่ระบบสำเร็จ:

ป้อนรหัสการตรวจสอบที่ไม่ถูกต้อง:

รหัสการตรวจสอบจะปรากฏขึ้นอย่างไม่ถูกต้องบนหน้า:

คลิกรหัสยืนยันเพื่อเปลี่ยน!

วิธีที่ 2: กำหนดค่ารหัสการตรวจสอบใน web.xml

เมื่อเทียบกับวิธีหนึ่งการเพิ่มขึ้นหนึ่งและลดลงสองครั้ง

ลด:

1. ขึ้นอยู่กับโครงการด้านบน ลบ codecontroller.java

2. ลบ Spring-kaptcha.xml และรักษาคนอื่น ๆ ไว้

เพิ่มขึ้น:

1. เพิ่ม การกำหนดค่าต่อไปนี้ใน web.xml :

 <!-รหัสการตรวจสอบ-> <servlet> <servlet-name> kaptcha </servlet-name> <servlet-class> com.google.code.kaptcha.servlet.kaptchaservlet </servlet-class> <! </init-param> <!-สีตัวอักษร-> <init-Param> <param-name> kaptcha.textproducer.font.color </param-name> <param-value> สีดำ </param-value> <param-value> 135 </param-value> </itiN-Param> <!-อักขระใดที่จะใช้ในการสร้างรหัสการตรวจสอบ-> <init-Param> <param-Name> Kaptcha.TextProducer.char.string </param-name> <param-value> <int-Param> <param-Name> kaptcha.image.height </param-name> <param-value> 50 </param-value> </init-param> <!-ขนาดตัวอักษร-> <init-Param> <!-บรรทัดการรบกวน-> <int-Param> <param-Name> kaptcha.noise.color </param-name> <param-value> สีแดง </param-value> </init-param> <!-จำนวนอักขระ-> <int-param> </init-param> <!-font-> <int-param> <param-name> kaptcha.textproducer.font.names </param-name> <param-value> arial </param-value> </init-param> <url-pattern> /kaptcha.jpg </url-pattern> </servlet-mapping>

หมายเหตุ: การกำหนดค่านี้ใช้เพื่อกำหนดค่ารหัสการตรวจสอบ โปรดทราบว่า <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 จึงเสร็จสิ้นเหตุการณ์คลิก

3. การกำหนดค่าแอตทริบิวต์ Kaptcha เพิ่มเติม

เนื้อหาข้างต้นเป็นการรวบรวมบันทึกส่วนตัว หากมีข้อผิดพลาดใด ๆ คุณสามารถวิพากษ์วิจารณ์และแก้ไขฉันได้!