تنفيذ رمز التحقق من Kaptcha المتكامل الربيع

مقدمة إلى Kaptcha:

Kaptcha هي أداة لتوليد رمز التحقق مفيدة للغاية. نظرًا لأنه يحتوي على العديد من العناصر القابلة للتكوين ، فيمكن بسهولة وسرعة إنشاء رموز التحقق المختلفة.

أدوات التطوير والتقنيات الأساسية المستخدمة:

1. الكسوف

2. MyBatis

3. الربيع

4. SpringMVC

5. كابتشا

ستقدم هذه المقالة طريقتين لاستخدام kaptcha:

الطريقة 1: تكوين في spring-kaptcha.xml

الطريقة 2: تكوين في web.xml

تبدأ رسميًا:

1. بناء هيكل عظمي

1. إضافة التبعيات:

 <!-رمز التحقق-> <reperency> <roupiD> com.github.penggle </rougiD> <StifactId> kaptcha </stifactid> <الإصدار> 2.3.2 </version> </sependency>

لاستخدام رمز التحقق من kaptcha ، باستثناء تبعيات الربيع و mybatis ، فقط قدم هذا.

2. تحسين ملف التكوين

spring-dao.xml

 <!-تكوين تكامل عملية myBatis-> <!-1. قم بتكوين خصائص المعلمات المتعلقة بقاعدة البيانات: $ {url}-> <contex name = "driverclass" value = "$ {jdbc.driver}"/> <property name = "jdbcurl" value = "$ {jdbc.url}"/> <property name = "user" value = "$ {JDBC.USERNAME}"/> <property name = "value" {jdbcord} <property name = "maxpoolsize" value = "30"/> <property name = "minpoolsize" value = "10"/> <!-أغلق الاتصال ولا يلتزم تلقائيًا-> <property name = "autocommitonclose" value = "false"/> <! name = "quiveretryattempts" value = "2"/> </bean> <!-احصل على وقت مهلة الاتصال-> <property name = "checkoutTimeOut" value = "10000"/> <!-عدد إعادة الاستخدام عند فشل الاتصال-> <property name = "quiveretryattempts" value = 2 "/> </bean> <!-عدد عمليات إعادة المحاكاة عند فشل الاتصال-> <property name = "quiveretryattempts" value = "2"/> </bean> <!-3. تكوين myBatis 'sqlsessionaStory-> <bean id = "sqlsessionfactory"> <property name = datasource "ref =" datasource name = "mapperlocations" value = "classpath: mappers/*. </bean> <!-4. ستجد Spring تلقائيًا الفئة ضمن واجهة DAO-> <bean> <property name = "basePackage" value = "com.zhu.kaptcha.dao"/> <property name = "sqlSessionFactoryBeannname" value = "sqlsessionfactory"

②spring-service.xml

 <!-مسح جميع التعليقات التوضيحية في حزمة الخدمة-> <السياق: مكون المستحكم في القاعدة = "com.zhu.kaptcha.service"/> <!-إدارة المعاملات-> <bean id = "TransactionManager"> <property name = "datasource" ref = "datasurce"/>/!- المعاملة-ماناجير = "TransactionManager"/>

③spring-web.xml

 <!-تكوين springmvc-> <!-1. قم بتشغيل وضع شرح SPRINGMVC-> <MVC: تعليقه /> <!-2. تعريف العرض المحلل-> <bean id = "viewResolver"> <property name = "prefix" value = "/"/> <property name = "fASEIX" value = ".

④web.xml

 <Srevlet> <Sradlet-Name> spring-dispatcher </servlet-name> <Servlet-class> org.springframework.web.servlet.dispatcherservlet </servlet-class> <Ing-param> <param-name> contextConfigLocation </marm-name> </servlet> <Servlet-mapping> <Servlet-Name> spring-dispatcher </servlet-name> <url-pattern>/</url-pattern> </servlet mapping> <!-ترميز التصفية-> <lipter> <ilter-name> encodingfilter </filter-name> <lipter-class> org.springframework.web.filter.characterencodingfilter </filter-class> <sureded-suported> true </async-sucuported> <Ing-param> <param-name> الترميز </param-name> <baram-value> utf-8 <filter-mapping> <filter-name> encodingFilter </filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

في هذه المرحلة ، تم بناء الهيكل العظمي ويتم إكمال تشغيل قاعدة البيانات.

2. تشغيل قاعدة البيانات

1. طبقة الكيان

user.java

 مستخدم الفئة العامة {private int uid ؛ اسم المستخدم الخاص بالسلسلة الخاصة ؛ كلمة مرور السلسلة الخاصة ؛}

2. طبقة داو

userdao.java

 الواجهة العامة userDao {user findUserByUsername (string username) ؛}

userDao.xml

 <؟ Namespace = "com.zhu.kaptcha.dao.userdao"> <select id = "findUserByUsername" resultType = "com.zhu.kaptcha.entity.user"> حدد * من tb_user حيث user_name =#{username} </select> </mapper>

3. طبقة الخدمة

userviceiMpl.java

 servicepublic class userviceImpl تنفذ المستخدمين {autowired userDao userDao ؛ Override Public Boolean Login (string username ، string password) {user user = userDao.finduserByUsername (اسم المستخدم) ؛ if (password.equals (user.getPassword ())) {return true ؛ } آخر {return false ؛ }}}

ملاحظة: عند الكتابة إلى طبقة DAO وطبقة الخدمة ، يجب عليك إجراء اختبار JUNIT. الاختبار بسيط نسبيًا ، لذلك لن أشرحه هنا.

3. دمج Kaptcha

الطريقة 1: تكوين من خلال spring-kaptcha.xml

1. إنشاء ملف تكوين spring-kaptcha.xml جديد في مجلد الربيع للموارد ، مع المحتوى التالي:

Spring-kaptcha.xml

 <bean id = "captChaproducer"> <property name = "config"> <bean> <bonstructor-arg> <borts> <prop key = "kaptcha.border"> yes </prop> <propcha = "kaptcha.border.color <prop key = "kaptcha.image.width"> 125 </prop> <prop key = "kaptcha.image.height"> 45 </prop> <prop key = "kaptcha.textproducer.font.size"> 45 </prop> <propcha = "kaptcha.session.key" key = "kaptcha.textproducer.char.length"> 4 </prop> <prop key = "kaptcha.textproducer.font.names"> song font ، kaiyi ، microsoft yahei </prop> </rops>

ملاحظة: تم تكوين هذه الفول مع بعض سمات رمز التحقق ، ويمكن أيضًا كتابتها مباشرة في Spring-Web.xml. وفقًا للعادات الشخصية ، أود أن أكتب تكوين وحدات مختلفة في ملفات مختلفة.

2. قم بإنشاء وحدة تحكم جديدة لإنشاء رمز التحقق

Codecontroller.java

 ControllerPublic Class Codecontroller {Autowired Private Producer CaptChaproducer = null ؛ requestmapping ("/kaptcha") public void getKaptChaImage (طلب httpservletrequest ، استجابة httpservletresponse) يلقي الاستثناء {httpsession session = request.getSession () ؛ استجابة. استجابة. reponse.addheader ("Cache-Control" ، "post-check = 0 ، pre-check = 0") ؛ استجابة. استجابة. // إنشاء Captext string code captext = captchaproducer.createText () ؛ Session.setAttribute (Constants.kaptcha_session_key ، captext) ؛ // اكتب bufferedimage إلى العميل bi = captchaproducer.createImage (captext) ؛ servleToutPutStream out = response.getOutputStream () ؛ imageio.write (Bi ، "JPG" ، Out) ؛ حاول {out.flush () ؛ } أخيرًا {out.close () ؛ }}}

ملاحظة: إن مسار وحدة التحكم هذه هو "Kaptcha" ، وبالتالي فإن SRC لرمز التحقق من الواجهة الأمامية سيكون Kaptcha.jpg.

3. قم بإنشاء فئة أدوات جديدة لمقارنة رموز التحقق

CodeUtil.java

 الفئة العامة CodeUtil { / ** * قم بتحويل المعلمة الأمامية التي تم الحصول عليها إلى نوع السلسلة * request * param request * param Key * @return * / public static string getTring (httpservletrequest طلب ، مفتاح السلسلة) {try {string result = request.getParameter (مفتاح) ؛ if (result! = null) {result = result.trim () ؛ } if ("". equals (result)) {result = null ؛ } نتيجة الإرجاع ؛ } catch (استثناء e) {return null ؛ }} /** * التحقق من رمز التحقق * param request * regurn * /public static boolean checkverifyCode (httpservletrequest request) {// احصل على سلسلة التحقق المولدة verifycodeexpisted = (string) request.getSession (). // احصل على رمز التحقق الذي تم إدخاله بواسطة سلسلة المستخدم VerifyCodeActual = codeUtil.getString (طلب ، "VerifyCodeActual") ؛ if (VerifyCodeActual == null ||! verifyCodeActual.equals (VerifyCodeExpected)) {return false ؛ } إعادة صواب ؛ }}

ملاحظة: تسمى المعلمة التي تم تمريرها عن طريق الحصول هنا "VerifyCodeActual" ، وبالتالي يجب أن تكون قيمة اسم رمز التحقق في الصفحة أيضًا.

بعد ذلك ، يمكنك استخدام رمز التحقق!

4. وحدة تحكم لتسجيل الدخول إلى المستخدم

USERCONTROLLER.JAVA

 @controller @requestMapping ("/user") الفئة العامة USERCONTROLLER requestmapping ("/login") تسجيل الدخول إلى السلسلة العامة (requestparam ("username") السلسلة اسم المستخدم ، @requestparam ("كلمة المرور") كلمة مرور السلسلة ، httpservletrequest طلب) if (! codeUtil.CheckverifyCode (request)) {request.setAttribute ("codeerr" ، "رمز التحقق غير صحيح!") ؛ العودة "فشل" ؛ } آخر {if (result) {request.setAttribute ("user" ، username) ؛ إرجاع "النجاح" ؛ } آخر {request.setAttribute ("errmsg" ، "خطأ في اسم المستخدم أو كلمة المرور!") ؛ العودة "فشل" ؛ }}}}

ملاحظة: هنا ندعو أداة CodeUtil لمقارنة ما إذا كان رمز التحقق الذي تم إدخاله صحيحًا.

5. صفحة الواجهة الأمامية

login.jsp

 <٪@ page language = "java" import = "java.util.* "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title> تسجيل الدخول </title> <script type = "text/javaScript"> function refresh () {document.getElementByid ('captcha_img'). } < /script> </head> <body> <form action = "$ {pageContext.request.contextpath} /user /login" method = "post"> اسم المستخدم: <input type = "text" name = "username" /> <br /> password: name = "verifyCodeActual"> <viv> <img id = "captcha_img" onClick = "Refresh ()" src = "kaptcha.jpg"/> </div> <input type = "submit" value = "login"/> </html> </html>

النجاح

 <Body> <h1> مرحبًا بك في تسجيل الدخول ، $ {user} </h1> </body>

Fail.jsp

 <Body> آسف ، فشل تسجيل الدخول ، السبب: <br> $ {codeerr} <h2> $ {errmsg} </h2> </body>

ملاحظة: رمز JS الخاص بـ login.jsp هو إكمال وظيفة "انقر لتغيير" ؛ لاحظ أن اسم رمز التحقق يجب أن يكون هو نفس الاسم الذي تم تمريره في فئة الأدوات ، وأن SRC هو مسار وحدة التحكم التي تنشئ رمز التحقق Plus .jpg.

6. الاختبار:

أدخل رمز التحقق الصحيح:

تسجيل الدخول بنجاح:

أدخل رمز التحقق الخاطئ:

يتم عرض رمز التحقق بشكل غير صحيح على الصفحة:

انقر فوق رمز التحقق لتغييره!

الطريقة 2: تكوين رمز التحقق في web.xml

مقارنة مع الطريقة الأولى ، يزيد واحد وينخفضان.

يقلل:

1. بناءً على المشروع أعلاه ، حذف codecontroller.java .

2. حذف spring-kaptcha.xml واحتفظ بالآخرين.

يزيد:

1. أضف التكوين التالي في web.xml :

 <!-رمز التحقق-> <Sradlet> <Servlet-Name> kaptcha </servlet-name> <Sradlet-class> com.google.code.kaptcha.servlet.kaptchaservlet </servlet-class> <!- </ith-param> <!-color font-> <Ing-param> <Param-name> kaptcha.textproducer.font.color </param-name> <Param-value> Black </param-value> </ith-param> <!-عرض الصورة- <Param-value> 135 </parm-value> </IPAR-PARAM> <!-أي الأحرف التي يجب استخدامها لإنشاء رمز التحقق-> <IRING-PARAM> <PARAM-NAME> KAPTCHA.TEXTPRODUCER.CHAR.STRING </PARAM-NAME> <Ing-param> <Param-name> kaptcha.image.height </param-name> <param-value> 50 </parm-value> </ith-param> <!-حجم الخط-> <ING-PARAM> <PARAM-NAME> KAPTCHA.TEXTPRODUCER.FONT.SIZE </ <!-سطر التداخل-> <INIT-PARAM> <PARAM-NAME> KAPTCHA.NOISE.COLOR </PARAM-NAME> <param-value> Red </param-value> </IPAR-PARAM> <!-عدد الأحرف-> <ING-PARAM> <PARAM-NAME> kaptcha.textproducer.char.lenge </ith-param> <!-font-> <Ing-param> <Param-name> kaptcha.textproducer.font.names </param-name> <Url-pattern> /kaptcha.jpg </url-pattern> </rectlet-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"> refrish () {document.getElementById ('captcha_img'). src = "kaptcha.jpg؟"+math.random () ؛ } </script>

ثم أضف onclick="refresh()" إلى علامة IMG ، وبالتالي استكمال حدث النقر.

3. المزيد من تكوين سمة Kaptcha

المحتوى أعلاه هو مجموعة من الملاحظات الشخصية. إذا كان هناك أي أخطاء ، فأنت مرحب بك في انتقاد وتصحيح لي!