مقدمة إلى 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
| ثابت | يصف | القيمة الافتراضية |
| Kaptcha.border | حدود الصورة ، القيمة القانونية: نعم ، لا | نعم |
| kaptcha.border.color | لون الحدود ، القيمة القانونية: R ، G ، B (و alpha اختياري) أو أبيض ، أسود ، أزرق. | أسود |
| kaptcha.border.theckness | سمك الحدود ، القيمة القانونية:> 0 | 1 |
| kaptcha.image.width | صورة واسعة | 200 |
| kaptcha.image.hight | صورة عالية | 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 | حجم الخط | 40 بكسل. |
| 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 | نمط الصورة: Water Ribbon com.google.code.kaptcha.impl.waterripple fisheecom.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 |
المحتوى أعلاه هو مجموعة من الملاحظات الشخصية. إذا كان هناك أي أخطاء ، فأنت مرحب بك في انتقاد وتصحيح لي!