Implementasi Kode Verifikasi KAPTCHA yang terintegrasi Spring

Pengantar Kaptcha:

Kaptcha adalah alat pembuatan kode verifikasi yang sangat berguna. Karena memiliki banyak item yang dapat dikonfigurasi, ia dapat dengan mudah dan cepat menghasilkan berbagai kode verifikasi.

Alat pengembangan dan teknologi inti yang digunakan:

1. Eclipse

2. Mybatis

3. Musim Semi

4. Springmvc

5. Kaptcha

Artikel ini akan memperkenalkan dua cara untuk menggunakan Kaptcha:

Metode 1: Konfigurasi di Spring-Kaptcha.xml

Metode 2: Konfigurasikan di web.xml

Mulai secara resmi:

1. Bangun kerangka

1. Tambahkan dependensi:

 <!-Kode verifikasi-> <dependency> <GroupId> com.github.penggle </proupId> <ArTifactId> Kaptcha </t Artifactid> <version> 2.3.2 </version> </dependency>

Untuk menggunakan kode verifikasi KAPTCHA, kecuali untuk dependensi Spring dan Mybatis, cukup perkenalkan yang ini.

2. Tingkatkan file konfigurasi

① Spring-dao.xml

 <!-Mengkonfigurasi integrasi proses mybatis-> <!-1. Mengkonfigurasi properti properti parameter terkait basis data: $ {url}-> <konteks: properti-placeHolder lokasi = "classpath: jdbc.properties" /<!-2. Konfigurasi data koneksi –! " name = "driverclass" value = "$ {jdbc.driver}"/> <name properti = "jdbcurl" value = "$ {jdbc.url}"/> <name properti = "user" value = "$ {jdbc.username}"/<properti name = "kata sandi" value = "$ {jdbc.username}"/<properti name = "kata sandi" value = "$ {jdbc.users Pool koneksi-> <nama properti = "maxpoolsize" value = "30"/> <properti name = "minpoolSize" value = "10"/> <!-tutup koneksi dan tidak berkomitmen secara otomatis-> <nama properti = "autocommitclose" value = "false"/> <! Get the connection timeout timeout- time-> <autocommitclose "value =" false "/<! <nama properti = "AcquireretryAttempts" value = "2"/> </ bean> <!-Dapatkan waktu waktu-keluar koneksi-> <nama properti = "checkOuttimeout" value = "10000"/> <!-Jumlah retries ketika koneksi gagal-> <nama properti = "AcquireretryAttempts" value = "2"/> </bean "<!" value = "10000"/> <!-Jumlah retries saat koneksi gagal-> <nama properti = "AcquireRetryAttempts" value = "2"/> </ bean> <!-3. Mengkonfigurasi mybatis 'sqlsessionFactory-> <bean id = "sqlSessionFactory"> <properti name = "dATasOURCE" OF! file mappers.xml-> <properti name = "mapperlocations" value = "classpath: mappers/*. xml"/> <!-file konfigurasi mybatis-> <name properti = "configlocation" value = "classpath: mybatis-config.xml"/<! value="com.zhu.kaptcha.entity"></property> </bean> <!-- 4. Spring will automatically find the class under the DAO interface--> <bean> <property name="basePackage" value="com.zhu.kaptcha.dao" /> <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property> </tagel>

②spring-service.xml

 <!-Pindai semua anotasi dalam paket layanan-> <Context: Component-scan Base-package = "com.zhu.kaptcha.service"/> <!-Manajemen Transaksi-> <bean id = "transactionManager"> <nama properti = "DataSource" Ref = "DataSource"/</beana> <! Transaction-Manager = "TransactionManager"/>

③spring-web.xml

 <!-Konfigurasikan springmvc-> <!-1. Nyalakan mode anotasi springmvc-> <mvc: anotasi-driven /> <!-2. Tentukan tampilan parser-> <bean id = "viewResolver"> <name properti = "prefix" value = "/"/> <name properti = "suffix" value = ". Jsp"/> </ bean> <!-3. Pindai kacang terkait web-> <konteks: panduan basis component-scan/com.lonker "component: com.lonker" com.lonker "com.lonker" component "com.lonker" com.lonker "com.lonker" com.lonker "

④web.xml

 <servlet> <servlet-name> Spring-Dispatcher </servlet-name> <servlet-class> org.springframework.web.servlet.dispatcherServlet </servlet-class> <Ilin-param> <param-name> ContextConfiglocation </paramname> <param-value> Classpath> Spring/Spring/Spring-SPRING-PARAMLEMLOCATION- </param-name> <param-value> classpath/spring/spring/spring-* </servlet> <servlet-Mapping> <servlet-name> Spring-Dispatcher </servlet-name> <rat pola>/</rerl-pola> </servlet-Mapping> <!-Pengkodean Filter-> <TERFILTER> <TERFERTER-NAME> EncodingFilter </filter-name> <TERFERTERSTERCRASS> ORG.SPRINGRAM.WECHET.WECHEK.WECHEK.WECHEK.WECHEK.WECHEK.WECHEK.WECHEK.WECHEK.WECHEK.WECHEK.WECHEK.WECHEK.WECHEK. <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>

Pada titik ini, kerangka dibangun dan operasi basis data selesai.

2. Pengoperasian Basis Data

1. Lapisan Entitas

User.java

 pengguna kelas publik {private int uid; nama pengguna string pribadi; kata sandi string pribadi;}

2. Lapisan DAO

Userdao.java

 antarmuka publik userdao {user findUserByUserName (string username);}

Userdao.xml

 <? xml versi = "1.0" encoding = "utf-8"?> <! Doctype mapperpublic "-// mybatis.org//dtd mapper 3.0 // en" "http://mybatis.org/dtd/mybatis-3-mapper namespace = "com.zhu.kaptcha.dao.userdao"> <pilih id = "findUserByeSerName" resultType = "com.zhu.kaptcha.entity.user"> Pilih * dari tb_user di mana user_name =#{username} </select> </mapper>

3. Lapisan Layanan

UserserServiceImpl.java

 @ServicePublic kelas UserserServiceImpl mengimplementasikan UserserService {@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; }}}

Catatan: Saat menulis ke lapisan DAO dan lapisan layanan, Anda harus melakukan tes junit. Tesnya relatif sederhana, jadi saya tidak akan menjelaskannya di sini.

3. Integrasi Kaptcha

Metode 1: Konfigurasikan melalui spring-kraptcha.xml

1. Buat file konfigurasi Spring-Kaptcha.xml baru di folder sumber daya Spring, dengan konten berikut:

Spring-Kaptcha.xml

 <bean id = "captchaproducer"> <properti name = "config"> <bean> <constructor-Arg> <sops> <prop key = "Kaptcha.border"> ya </prop> <prop key = "Kaptcha.border.color"> 105,179,90 </propp> <papchy = "Kaptch. <prop key = "Kaptcha.image.width"> 125 </prop> <prop key = "Kaptcha.image.height"> 45 </prop> <prop key = "Kaptcha.TextProducer.font.size"> 45 </sop> <prop KEY = "Kaptcha.SESSES.Key"> key = "Kaptcha.TextProducer.char.length"> 4 </prop> <prop key = "Kaptcha.TextProducer.font.names"> Font Song, Kaiyi, Microsoft Yahei </prop> </props> </constructor-arg> </bean> </properti/propert

Catatan: Kacang ini dikonfigurasi dengan beberapa atribut kode verifikasi, dan juga dapat ditulis langsung di spring-web.xml. Menurut kebiasaan pribadi, saya suka menulis konfigurasi berbagai modul dalam file yang berbeda.

2. Buat pengontrol baru untuk menghasilkan kode verifikasi

Codecontroller.java

 @ControllerPublic kelas codecontroller {@Autowired produser pribadinya captchaproducer = null; @RequestMapping ("/Kaptcha") public void getKaptChaimage (permintaan httpservletRequest, httpservletResponse response) melempar pengecualian {httpsession session = request.getSession (); response.setDateheader ("kedaluwarsa", 0); response.setHeader ("cache-control", "no-store, no-cache, harus-revalidasi"); response.addheader ("cache-control", "post-check = 0, pre-check = 0"); response.setheader ("pragma", "no-cache"); response.setContentType ("Image/JPEG"); // menghasilkan kode verifikasi string captext = captchaproducer.createText (); session.setAttribute (constants.kaptcha_session_key, captext); // tulis bufferedImage ke klien bi = captchaproducer.createImage (captext); ServeLetoutputStream out = response.getoutputStream (); Imageo.write (bi, "jpg", out); coba {out.flush (); } akhirnya {out.close (); }}}

Catatan: Rute pengontrol ini adalah "Kaptcha", sehingga SRC dari kode verifikasi front-end adalah Kaptcha.jpg.

3. Buat kelas alat baru untuk membandingkan kode verifikasi

Codeutil.java

 Kode Public Classutil { / ** * Konversi parameter front-end yang diperoleh ke string type * @param permintaan * @param Key * @return * / public static String getstring (httpservletRequest request, tombol string) {coba {string result = request.getParameter (key); if (result! = null) {result = result.trim (); } if ("". Equals (hasil)) {result = null; } hasil pengembalian; } catch (Exception e) {return null; }} /** * Verifikasi kode verifikasi * @param permintaan * @return * /public static boolean checkverifyCode (httpservletrequest request) {// Dapatkan string kode verifikasi yang dihasilkan verifyCodeExpected = (string) request.getSession (). GetAttribute (com.google.code.kapap. // Dapatkan kode verifikasi yang dimasukkan oleh string pengguna VerifyCodeActutual = codeutil.getString (permintaan, "verifyCodeActual"); if (verifyCodeActual == null ||! VerifikasiCodeActual.equals (verifyCodeExpected)) {return false; } return true; }}

Catatan: Parameter yang dilewati oleh Get Here disebut "VerifyCodeActual", sehingga nilai nama kode verifikasi di halaman juga harus ini.

Selanjutnya, Anda dapat menggunakan kode verifikasi!

4. Pengontrol untuk Login Pengguna

Usercontroller.java

 @Controller @requestMapping ("/user") kelas publik usercontroller {@autowired private userservice userservice; @RequestMapping ("/Login") Public String Login (@RequestParam ("Username") String Username, @RequestParam ("Kata Sandi") Kata sandi string, httpservletRequest Request) {Boolean hasil = Userservice.login (nama pengguna, kata sandi); if (! codeutil.checkverifyCode (request)) {request.setAttribute ("codeRer", "Kode verifikasi salah!"); mengembalikan "gagal"; } else {if (hasil) {request.setAttribute ("user", username); mengembalikan "kesuksesan"; } else {request.setAttribute ("errmsg", "kesalahan dalam nama pengguna atau kata sandi!"); mengembalikan "gagal"; }}}}

Catatan: Di sini kami memanggil alat Codeutil untuk membandingkan apakah kode verifikasi yang dimasukkan sudah benar.

5. Halaman front-end

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 transisi // en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title> login </iteme> <script type = "text/javascript"> function () {document.geteLementById ('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 kode "name =" verifyCodeActual "> <verv> <img id =" captcha_img "Onclick =" refresh () "src =" Kaptcha.jpg "/> </div> <input type =" kirim "value =" Login "/> </form> </body> </html>

Success.jsp

 <hody> <h1> Selamat datang untuk masuk, $ {user} </h1> </body>

fail.jsp

 <body> maaf, login gagal, alasan: <br> $ {codeerr} <h2> $ {errmsg} </h2> </body>

CATATAN: Kode JS Login.jsp adalah untuk menyelesaikan fungsi "Klik untuk Mengubah"; Perhatikan bahwa nama kode verifikasi harus sama dengan nama yang diteruskan di kelas alat, dan SRC adalah rute pengontrol yang menghasilkan kode verifikasi plus .jpg.

6. Tes:

Masukkan kode verifikasi yang benar:

Login berhasil:

Masukkan kode verifikasi yang salah:

Kode verifikasi ditampilkan secara tidak benar pada halaman:

Klik kode verifikasi untuk mengubahnya!

Metode 2: Mengkonfigurasi kode verifikasi di web.xml

Dibandingkan dengan metode satu, satu meningkat dan dua penurunan.

mengurangi:

1. Berdasarkan proyek di atas, hapus codecontroller.java .

2. Hapus Spring-Kaptcha.xml dan mempertahankan yang lain.

meningkatkan:

1. Tambahkan konfigurasi berikut di web.xml :

 <!-kode verifikasi-> <servlet> <servlet-name> Kaptcha </servlet-name> <servlet-class> com.google.code.kaptcha.servlet.kaptchaservlet </servlet-class> <!-ada perbatasan-> <init--param> <parar-name> Kaptcha.border> ParamAlu- PARAMLE </init--param> <param-name> Kaptcha.border </ParamA-PARINA> <init--param> <param-name> Kaptcha.border </ParamAnder </ParamA-noame> </init-param> <!-font color-> <init-param> <param-name> Kaptcha.TextProducer.font.color </param-name> <param-value> hitam </param-value> </init-param> <!-width gambar-> <inin-param> <param-name> Kaptch. <param-value> 135 </param-value> </init-param> <!-Karakter mana yang akan digunakan untuk menghasilkan kode verifikasi-> <Ilin-param> <param-name> Kaptcha.textProducer.char.string </param-name> <param-value> ACDEFHKPRSTWX3456679 </Param-value> </value> ACDEFHKPRSTWX345679 </Param-value> </value> ACDEFHKPRSTWX345679 </Param-value> <Ilin-param> <param-name> Kaptcha.image.height </param-name> <param-value> 50 </param-value> </init-param> <!-ukuran font-> <in-param> <param--name> Kaptcha.TextProducer.font.size </param-name> Kaptcha.textproducer.font.size </param-name> <!-Baris interferensi-> <InT-param> <param-name> Kaptcha.noise.color </param-name> <param-value> merah </param-value> </it-param> <!-jumlah karakter-> <in-param> <param-name> Kaptcha.TextProducer.char.laret. </init-param> <!-font-> <Inch-param> <param-name> Kaptcha.TextProducer.font.names </param-name> <param-value> Arial </param-value> </it-param> </servlet> <servlet-papping> </servlet-name> </init-param> <rerl-pola> /kaptcha.jpg </url-pola> </servlet-Mapping>

Catatan: Konfigurasi ini digunakan untuk mengonfigurasi kode verifikasi. Perhatikan bahwa <url-pattern>/kaptcha.jpg</url-pattern> harus sesuai dengan src = "kaptcha.jpg" dalam kode verifikasi.

Ini melengkapi konfigurasi kode verifikasi dan kemudian mengujinya. tes:

Masukkan kode verifikasi yang salah:

Halaman menampilkan kesalahan kode verifikasi:

Masukkan kode verifikasi yang benar:

Login berhasil:

Tes lulus!

Meringkaskan:

1. Sangat mudah untuk menambahkan kode verifikasi ke halaman, cukup tambahkan <img src= "xx"> . Gunakan tag IMG, dan kemudian arahkan ke rute pengontrol yang menghasilkan kode verifikasi melalui src plus .jpg (kode verifikasi dikonfigurasi di musim semi), atau arahkan ke pengontrol melalui src

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

2. Mengklik untuk mengganti juga sederhana, cukup tambahkan acara OnClick ke tag IMG dan selesaikan dengan JS.

Klik untuk mengubah JS:

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

Kemudian tambahkan onclick="refresh()" ke tag IMG, sehingga menyelesaikan acara klik.

3. Lebih Banyak Kaptiburasi Atribut Kaptcha

Konten di atas adalah kompilasi catatan pribadi. Jika ada kesalahan, Anda dipersilakan untuk mengkritik dan mengoreksi saya!