يتم تنفيذ توليد والتحقق من صور رمز التحقق من الواجهة الأمامية تحت Springboot للرجوع إليها. المحتوى المحدد كما يلي
1. التأثير
انقر فوق رمز التحقق للحصول على رمز التحقق الجديد
2. مبدأ
تقوم الخلفية بإنشاء صورة رمز التحقق وينتقل الصورة إلى مكتب الاستقبال.
الخلفية تحفظ محتوى رمز التحقق في الجلسة.
بعد إدخال رمز التحقق في مكتب الاستقبال ، سيتم تمريره إلى الخلفية واسترداد رمز التحقق الذي تم حفظه في الجلسة للتحقق.
لاحظ أنه لا يمكن نقل النص العادي لرمز التحقق إلى الواجهة الأمامية. المحتوى الأمامي شفاف وغير آمن. يتم استخدام رمز التحقق لمنع الروبوتات وليس فقط الناس. إذا تم نقل رمز التحقق بوضوح إلى الواجهة الأمامية ، فسيتم تصدعه بسهولة.
3. توليد الصور
أداة توليد رمز التحقق من مراسلة عشوائية ValidateCodeUtil
الفئة العامة randomvalidateCodeUtil {سلسلة نهائية ثابتة ، string randomcodekey = "randomvalidatecodekey" ؛ // مفتاح السلسلة الخاصة randString = "0123456789 RandString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ" ؛ // سلاسل عشوائية تم إنشاؤها من الأرقام والرسائل الخاصة بـ int width = 95 ؛ // عرض صورة int private = 25 ؛ loggerfactory.getLogger (RandomValidateCodeUtil.class) ؛ عشوائي عشوائي خاص = جديد عشوائي () ؛ / *** get font*/ private font getFont () {return new font ("lextedsys" ، font.center_baseline ، 18) ؛ } / *** GET COLOR* / private color getRandColor (int fc ، int bc) {if (fc> 255) fc = 255 ؛ إذا (BC> 255) قبل الميلاد = 255 ؛ int r = fc + random.nextint (bc - fc - 16) ؛ int g = fc + random.nextint (bc - fc - 14) ؛ int b = fc + random.nextint (bc - fc - 18) ؛ إرجاع اللون الجديد (R ، G ، B) ؛ } / *** إنشاء صورة عشوائية* / public void getRandCode (طلب httpservletrequest ، استجابة httpservletresponse) {httpsession session = request.getSession () ؛ . الرسومات g = image.getGraphics () ؛ // إنشاء كائن رسومات لكائن الصورة. يمكنك تنفيذ عمليات الرسم المختلفة على الصورة عن طريق تعديل الكائن G.FillRect (0 ، 0 ، العرض ، الارتفاع) ؛ // حجم الصورة G.SetFont (خط جديد ("Times New Roman" ، font.roman_baseline ، 18)) ؛ i ++) {drawline (g) ؛ } // ارسم عشوائيًا عشوائيًا = "" ؛ لـ (int i = 1 ؛ i <= stringnum ؛ i ++) {randomstring = drapstring (g ، randomstring ، i) ؛ } logger.info (RandomString) ؛ // حفظ السلسلة العشوائية التي تم إنشاؤها إلى الجلسة. Session.setAttribute (RandomCodeKey ، RandomString) ؛ G.Dispose () ؛ جرب {// إخراج الصورة في الذاكرة إلى العميل من خلال Flowing form imageio.write (صورة ، "jpeg" ، desponse.getOutputStream ()) ؛ } catch (استثناء e) {logger.error ("فشل في إخراج الصورة في الذاكرة إلى العميل من خلال التدفق >>>>" ، e) ؛ }} / *** ارسم السلسلة* / private String Draystring (Graphics G ، String RandomString ، int i) {g.setfont (getFont ()) ؛ G.SetColor (لون جديد (Random.NextInt (101) ، عشوائي. String Rand = string.valueof (getRandomString (Random.NextInt (RandString .Length ()))) ؛ RandomString += Rand ؛ G.Translate (Random.NextInt (3) ، Random.NextInt (3)) ؛ G.DrawString (Rand ، 13 * i ، 16) ؛ إرجاع عشوائي ؛ } / *** ارسم خط التداخل* / private void drawline (Graphics g) {int x = random.nextint (width) ؛ int y = random.nextint (الارتفاع) ؛ int xl = random.nextint (13) ؛ int yl = random.nextint (15) ؛ G.Drawline (x ، y ، x + xl ، y + yl) ؛ } / *** احصل على أحرف عشوائية* / سلسلة عامة getRandomString (int num) {return string.valueof (randstring.charat (num)) ؛ }}في وحدة التحكم ، اتصل بالطريقة لإنشاء صورة رمز التحقق وتمرير الصورة إلى الواجهة الأمامية
/*** إنشاء رمز التحقق*/@requestmapping (value = "/getVerify") getVerify public void (httpservletrequest طلب ، httpservletresponse استجابة) {try {response.setContentType ("image/jpeg") ؛ // قم بتعيين النوع المقابل وإخبار المحتوى بمحتوى الصورة كإبلاغ. "عدم التخزين المؤقت") ؛ // قم بتعيين معلومات رأس الاستجابة لإخبار المتصفح بعدم تخزين هذا المحتوى. استجابة. RandomValidateCodeUtil randomvalidatecode = new RandomValidateCodeUtil () ؛ RandomValidateCode.getRandCode (طلب ، استجابة) ؛ // إخراج طريقة التحقق من رمز الصورة} catch (استثناء e) {logger.error ("فشل في الحصول على رمز التحقق >>>>" ، e) ؛ }} الواجهة الأمامية الحصول على صورة رمز التحقق
HTML
<viv> <viv> <type type = "tel" id = "verify_input" placeholder = "الرجاء إدخال رمز التحقق" maxLength = "4"> </viv> </viv> <viv> <a href = "javaScript: void (0) ؛" rel = "nofollow"> <img id = "imgverify" src = "" onClick = "getVerify (this) ؛"> </a> </viv> </viv>
JS
// الحصول على وظيفة رمز التحقق getVerify (obj) {obj.src = httpurl + "/sys/getverify؟" + math.random () ؛}في كل مرة تنقر فيها على الصورة وتحديث واجهة رمز التحقق لأول مرة ، ما عليك سوى الاتصال بطريقة GetVerify ().
4. التحقق من رمز التحقق
يحصل الواجهة الأمامية على رمز التحقق الذي أدخله المستخدم ويمرره إلى الخلفية للتحقق.
رمز التحقق من الخلفية
/*** نسيت رمز التحقق من صفحة كلمة المرور*/@requestmapping (value = "/checkverify" ، method = requestMethod.post ، headers = "Accept = application/json") public boolean checkVerify (requestbody map <string ، object> requestMap ، httpsession) {try {// الحصول على رقم عشوائي inputSrstr = requestMap. سلسلة عشوائية = (سلسلة) session.getAttribute ("RandomValidateCodeKey") ؛ if (عشوائي == null) {return false ؛ } if (random.equals (inputStr)) {return true ؛ } آخر {return false ؛ }} catch (استثناء e) {logger.error ("فشل التحقق من رمز التحقق" ، e) ؛ العودة كاذبة }}بعد التحقق من الخلفية ، أعد نتيجة التحقق من الواجهة الأمامية صحيحة أو خاطئة.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.