การสร้างและการตรวจสอบภาพรหัสการตรวจสอบส่วนหน้าถูกนำมาใช้ภายใต้ Springboot สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
1. ผล
คลิกรหัสยืนยันเพื่อรับรหัสการยืนยันใหม่
2. หลักการ
พื้นหลังสร้างรูปภาพการตรวจสอบและส่งภาพไปยังแผนกต้อนรับ
พื้นหลังบันทึกเนื้อหารหัสการตรวจสอบในเซสชัน
หลังจากป้อนรหัสการตรวจสอบในแผนกต้อนรับมันจะถูกส่งผ่านไปยังพื้นหลังและดึงรหัสการตรวจสอบที่บันทึกไว้ในเซสชันสำหรับการตรวจสอบ
โปรดทราบว่าข้อความธรรมดาของรหัสการตรวจสอบไม่สามารถส่งไปยังส่วนหน้าได้ เนื้อหาส่วนหน้ามีความโปร่งใสและไม่ปลอดภัย รหัสการตรวจสอบใช้เพื่อป้องกันหุ่นยนต์ไม่ใช่แค่คน หากรหัสการตรวจสอบถูกส่งไปยังส่วนหน้าอย่างชัดเจนมันจะแตกได้ง่าย
3. การสร้างภาพ
การตรวจสอบรหัสการสร้างเครื่องมือคลาสแบบสุ่ม ValidateCodeUtil
คลาสสาธารณะแบบสุ่ม ValidateCodeUtil {สตริงคงที่สาธารณะสุดท้าย onaderCodeKey = "randomValidateCodeKey"; // คีย์สตริงส่วนตัว randstring = "0123456789"; // แบบสุ่มสร้างสตริงส่วนตัว randstring = "0123456789abcdefghijklmnopqrstuvwxyz"; // สตริงที่สร้างขึ้นแบบสุ่มของตัวเลขและตัวอักษรความกว้าง int ส่วนตัว = 95; // ความกว้างของภาพความสูงส่วนตัว = 25; // ความสูงของภาพ LoggerFactory.getLogger (RapomvalidateCodeUtil.class); สุ่มสุ่มส่วนตัว = ใหม่สุ่ม (); / *** รับแบบอักษร*/ ตัวอักษรส่วนตัว getFont () {ส่งคืนแบบอักษรใหม่ ("recidsys", font.center_baseline, 18); } / *** รับสี* / สีส่วนตัว getRandColor (int fc, int bc) {ถ้า (fc> 255) fc = 255; ถ้า (BC> 255) BC = 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); } / *** สร้างภาพสุ่ม* / โมฆะสาธารณะ getRandCode (คำขอ httpservletRequest, การตอบสนอง httpservletResponse) {httpsession session = request.getSession (); // คลาส bufferedImage เป็นคลาสรูปภาพที่มีบัฟเฟอร์และคลาสรูปภาพเป็นคลาสที่ใช้เพื่ออธิบายข้อมูลภาพ bufferedImage image = bufferedImage ใหม่ (ความกว้าง, ความสูง, bufferedImage.type_int_bgr); กราฟิก g = image.getGraphics (); // สร้างวัตถุกราฟิกของวัตถุภาพ คุณสามารถดำเนินการวาดภาพต่าง ๆ บนภาพโดยการปรับเปลี่ยนวัตถุ g.fillrect (0, 0, ความกว้าง, ความสูง); // ขนาดภาพ G.SetFont (ตัวอักษรใหม่ ("Times New Roman", Font.roman_baseline, 18)); // ขนาดตัวอักษร G.SetColor (GetRandColor (110, 133); i ++) {drawline (g); } // วาดแบบสุ่มแบบสุ่ม = ""; สำหรับ (int i = 1; i <= stringnum; i ++) {randomstring = drawstring (g, randomstring, i); } logger.info (สุ่ม); // บันทึกสตริงแบบสุ่มที่สร้างขึ้นเป็นเซสชัน Session.RemoVeattribute (RandomCodeKey); session.setAttribute (randomCodeKey, randomString); G.Dispose (); ลอง {// เอาท์พุทรูปภาพในหน่วยความจำไปยังไคลเอนต์ผ่านรูปแบบการไหลของรูปแบบ imageio.write (ภาพ, "jpeg", response.getOutputStream ()); } catch (exception e) {logger.error ("ไม่สามารถส่งออกภาพในหน่วยความจำไปยังไคลเอนต์ผ่านการไหล >>>>", e); }} / *** วาดสตริง* / การวาดสตริงส่วนตัว (กราฟิก G, สตริงแบบสุ่ม, int i) {g.setFont (getFont ()); G.SetColor (สีใหม่ (Random.nextint (101), Random.nextint (111), สุ่ม. nextint (121))); String rand = string.valueof (getRandomString (random.nextint (randstring .length ()))); RandomString += Rand; G.Translate (สุ่ม NEXTINT (3), RANDOM.NEXTINT (3)); G.DrawString (แรนด์, 13 * i, 16); ส่งคืนแบบสุ่ม; } / *** วาดเส้นสัญญาณรบกวน* / โมฆะส่วนตัว drawline (กราฟิก g) {int x = random.nextint (ความกว้าง); 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 (คำขอ httpservletrequest, การตอบสนอง httpservletResponse) {ลอง {response.setContentType ("image/jpeg"); "ไม่มีแคช"); // ตั้งค่าข้อมูลส่วนหัวตอบกลับเพื่อบอกเบราว์เซอร์ว่าอย่าแคชการตอบสนองเนื้อหานี้ setheader ("แคชควบคุม", "ไม่มีแคช"); Response.SetDateHeader ("หมดอายุ", 0); RandomValidateCodeUtil RandomValidateCode = ใหม่ RandomValidateCodeUtil (); RandomValidateCode.getRandCode (คำขอ, การตอบสนอง); // วิธีการตรวจสอบเอาท์พุทเมธอดรูปภาพ} catch (Exception e) {logger.error ("ล้มเหลวในการรับรหัสการตรวจสอบ >>>>", e); - ภาพหน้ารับรหัสการตรวจสอบ
HTML
<div> <div> <input type = "tel" id = "verify_input" placeholder = "โปรดป้อนรหัสการตรวจสอบ" maxlength = "4"> </div> </div> <div> <a href = "JavaScript: void (0);" rel = "ภายนอก nofollow"> <img id = "imgverify" src = "" onClick = "getVerify (นี่);"> </a> </iv> </div>
JS
// รับฟังก์ชั่นการตรวจสอบรหัส getverify (obj) {obj.src = httpurl + "/sys/getverify?" + math.random ();}ทุกครั้งที่คุณคลิกที่ภาพและรีเฟรชอินเทอร์เฟซรหัสการตรวจสอบเป็นครั้งแรกเพียงโทรหาวิธี getVerify ()
4. การตรวจสอบรหัสการตรวจสอบ
ส่วนหน้าได้รับรหัสการตรวจสอบที่ป้อนโดยผู้ใช้และส่งผ่านไปยังพื้นหลังสำหรับการตรวจสอบ
รหัสการตรวจสอบพื้นหลัง
/*** ลืมรหัสรหัสผ่านรหัสการตรวจสอบ*/@requestmapping (value = "/checkverify", method = requestMethod.post, ส่วนหัว = "accept = application/json") public boolean checkverify (@requestbody map <string, object> requestmap string random (string) session.getAttribute ("randomValidateCodeKey"); ถ้า (สุ่ม == null) {return false; } if (random.equals (inputStr)) {return true; } else {return false; }} catch (exception e) {logger.error ("การตรวจสอบรหัสการตรวจสอบล้มเหลว", e); กลับเท็จ; -หลังจากการตรวจสอบพื้นหลังให้ส่งคืนผลการตรวจสอบส่วนหน้าจริงหรือเท็จ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น