Generasi dan verifikasi gambar kode verifikasi front-end diimplementasikan di bawah Springboot untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
1. Efek
Klik kode verifikasi untuk mendapatkan kode verifikasi baru
2. Prinsip
Latar belakang menghasilkan gambar kode verifikasi dan meneruskan gambar ke meja depan.
Latar belakang menyimpan konten kode verifikasi di sesi.
Setelah memasukkan kode verifikasi di meja depan, itu akan diteruskan ke latar belakang dan mengambil kode verifikasi yang disimpan dalam sesi untuk verifikasi.
Perhatikan bahwa teks sederhana dari kode verifikasi tidak dapat dikirim ke ujung depan. Konten front-end transparan dan tidak aman. Kode verifikasi digunakan untuk mencegah robot dan bukan hanya orang. Jika kode verifikasi ditransmisikan dengan jelas ke ujung depan, itu akan mudah retak.
3. Generasi Gambar
Kode Verifikasi Kode Alat Kelas RandomValidateCodeutil
public class RandomValidateCodeUtil { public static final String RANDOMCODEKEY= "RANDOMVALIDATECODEKEY";// key private String randString = "0123456789";// randomly generate a string with only numbers private String // private String randString = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";// randomly generate a string with only letters // private String randString = "0123456789AbcDefgHijKlMnopQrStuVWxyz"; // String yang dihasilkan acak dari angka dan huruf private int lebar = 95; // Lebar gambar Private Int Tinggi = 25; // Image Tinggi Private Int Lineze = 40;// Jumlah Garis Terferensi Private Int Stringnum = 4; 4; LoggerFactory.getLogger (acakvalidatecodeutil.class); private acak acak acak = acak baru (); / *** Dapatkan font*/ private font getFont () {return font baru ("fixedsys", font.center_baseline, 18); } / *** Dapatkan warna* / warna pribadi getRandColor (int fc, int bc) {if (fc> 255) fc = 255; if (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); mengembalikan warna baru (r, g, b); } / *** Hasilkan gambar acak* / public void getRandCode (permintaan httpservletRequest, respons httpservletResponse) {httpsession session = request.getSession (); // Kelas BufferedImage adalah kelas gambar dengan buffer, dan kelas gambar adalah kelas yang digunakan untuk menggambarkan informasi gambar BufferedImage Image = BufferedImage baru (lebar, tinggi, bufferedImage.type_int_bgr); Grafik g = image.getGraphics (); // Hasilkan objek grafis objek gambar. Anda dapat melakukan berbagai operasi menggambar pada gambar dengan memodifikasi objek g.fillrect (0, 0, lebar, tinggi); // ukuran gambar g.setfont (font baru ("Times New Roman", font.roman_baseline, 18)); // ukuran font g.setcolor (getRandColor (110, 133)); // font g.setcolor (getRandColor (110, 133));//font ukuran g.setColor (getRandColor (110, 133));//font g.seterer (getrandcolor (110, 133); i ++) {drawline (g); } // Gambar acak acak = ""; untuk (int i = 1; i <= stringnum; i ++) {randomstring = drawstring (g, randomstring, i); } logger.info (randomstring); // simpan string acak yang dihasilkan ke session sesi.removeattribute (randomCodeKey); session.setAttribute (randomCodeKey, acak); g.dispose (); Coba {// output gambar di memori ke klien melalui bentuk mengalir gambaro.write (gambar, "jpeg", response.getoutputStream ()); } catch (Exception e) {logger.error ("Gagal mengeluarkan gambar di memori ke klien melalui aliran >>>>", e); }} / *** Draw String* / Private String DrawString (Graphics G, String RandomString, int i) {g.setFont (getFont ()); g.setColor (warna baru (acak.nextint (101), random.nextint (111), acak .nextint (121))); String rand = string.ValueOf (getRandomString (random.nextInt (randString .length ()))); acak += rand; g.translate (acak.nextint (3), random.nextint (3)); G.DrawString (Rand, 13 * i, 16); mengembalikan acak; } / *** Gambar garis interferensi* / private void drawline (grafik g) {int x = random.nextInt (lebar); int y = random.nextInt (tinggi); int xl = random.nextInt (13); int yl = random.nextInt (15); G.Drawline (x, y, x + xl, y + yl); } / *** Dapatkan karakter acak* / string publik getRandomString (int num) {return string.valueof (randString.charat (num)); }}Dalam panggilan controller metode untuk menghasilkan gambar kode verifikasi dan meneruskan gambar ke ujung depan
/*** Hasilkan kode verifikasi*/@requestMapping (value = "/getverify") public void getverify (permintaan httpservletRequest, respons httpservletResponse) {coba {response.setContentType ("gambar/jpeg"); // Tetapkan tipe yang sesuai dan beri tahu browser ke output the Contense the Contense the Contense the Contense the Contense the Contes the Contes the Contes the Contes The Contense the Contes the Contes The Contes The Contes The Candces A Response the Contes A Refonse. "No-Cache"); // Tetapkan informasi header respons untuk memberi tahu browser untuk tidak menangani respons konten ini. response.setDateheader ("kedaluwarsa", 0); Acakvalidatecodeutil acakvalidatecode = new randomValidateCodeutil (); acakvalidateCode.getRandCode (permintaan, respons); // output kode gambar kode verifikasi} catch (pengecualian e) {logger.error ("Gagal mendapatkan kode verifikasi >>>>", e); }} Front-end mendapatkan gambar kode verifikasi
html
<div> <div> <input type = "Tel" id = "verify_input" placeholder = "Harap masukkan kode verifikasi" maxlength = "4"> </div> </div> <div> <a href = "javascript: void (0);" rel = "eksternal nofollow"> <img id = "imgverify" src = "" onclick = "getverify (this);"> </a> </div> </div>
JS
// Dapatkan fungsi kode verifikasi getverify (obj) {obj.src = httpurl + "/sys/getverify?" + Math.random ();}Setiap kali Anda mengklik gambar dan menyegarkan antarmuka kode verifikasi untuk pertama kalinya, cukup hubungi metode getverify ().
4. Verifikasi kode verifikasi
Front-end memperoleh kode verifikasi yang dimasukkan oleh pengguna dan meneruskannya ke latar belakang untuk verifikasi.
Kode verifikasi latar belakang
/** * Forgot password page verification code*/@RequestMapping(value = "/checkVerify", method = RequestMethod.POST, headers = "Accept=application/json")public boolean checkVerify(@RequestBody Map<String, Object> requestMap, HttpSession session) { try{ //Get random number from session String inputStr = requestMap.get("inputStr").toString(); String random = (string) session.getAttribute ("acakvalidatecodeKey"); if (acak == null) {return false; } if (random.equals (inputStr)) {return true; } else {return false; }} catch (Exception e) {logger.error ("Verifikasi Verifikasi Verifikasi Gagal", e); mengembalikan false; }}Setelah verifikasi latar belakang, kembalikan hasil verifikasi front-end benar atau salah.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.