Die Erzeugung und Überprüfung von Front-End-Verifizierungscode-Bildern werden unter Springboot für Ihre Referenz implementiert. Der spezifische Inhalt ist wie folgt
1. Effekt
Klicken Sie auf den Verifizierungscode, um den neuen Verifizierungscode zu erhalten
2. Prinzip
Der Hintergrund generiert ein Bildcodebild und übergibt das Bild an die Rezeption.
Der Hintergrund speichert den Inhalt des Verifizierungscodes in der Sitzung.
Nach dem Eingeben des Verifizierungscode in der Rezeption wird er an den Hintergrund übergeben und den in der Sitzung gespeicherten Verifizierungscode zur Überprüfung abgerufen.
Beachten Sie, dass der einfache Text des Verifizierungscodes nicht an das vordere Ende übertragen werden kann. Der Front-End-Inhalt ist transparent und unsicher. Der Verifizierungscode wird verwendet, um Roboter zu verhindern, und nicht nur Personen. Wenn der Verifizierungscode eindeutig an das vordere Ende übertragen wird, ist er leicht zu knacken.
3. Bildgenerierung
RandomValidateCodeTil -Erzeugungs -Toolklasse für Verifizierungscodegenerierung
public class randomValidatecodeUtil {public static final String randomCodekey = "randomValidateCodekey"; // Schlüssel private String randstring = "0123456789"; // erzeugen zufällig eine String mit nur Zahlen private String // private string randstring = "abcdefghijklmnopQrstuvwxyz" //starjklmnopqrstuvwxyz "; randstring = "0123456789abcdefghijklmnopqrstuvwxyz"; // zufällige generierte Zeichenfolgen von Zahlen und Buchstaben private int width = 95; // Bildbreite private inthohe = 25; // Bildhöhe privat intelles intlinie LoggerFactory.getLogger (randomValidateCododutil.class); private random random random = new random (); / *** GET FONT*/ private font GetFont () {neue Schriftart zurückgeben ("FixedSys", font.center_baseline, 18); } / *** Farbe erhalten* / private Farbe 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); Neue Farbe zurückgeben (r, g, b); } / *** zufälliges Bild generieren* / public void getrandcode (httpServletRequest -Anforderung, httpServletResponse -Antwort) {httpSession session = request.getSession (); // Die BufferedImage -Klasse ist eine Bildklasse mit einem Puffer, und die Bildklasse ist eine Klasse, mit der Bildinformationen BufferedImage Image = new bufferedImage (Breite, Höhe, BufferedImage.type_int_bgr) beschrieben werden. Graphics g = image.getGraphics (); // Grafikobjekt des Bildobjekts generieren. Sie können verschiedene Zeichenvorgänge auf dem Bild ausführen, indem Sie das Objekt G.FillRect (0, 0, Breite, Höhe); // Bildgröße G.Setfont (neue Schriftart ("Times New Roman", font.roman_baseline, 18)); // Font -Größe G.Setcolor (GetRandcolor (110, 133); i ++) {Dractline (g); } // randomstring randomstring = "" zeichnen; für (int i = 1; i <= stringNum; i ++) {randomString = Drawstring (g, randomstring, i); } logger.info (randomString); // Speichern Sie die generierte zufällige Zeichenfolge auf Sitzungssitzung. RemoveAttribute (RandomCodeKey); Session.SetAttribute (RandomCodeKey, RandomString); g.disponse (); Versuchen Sie es mit {// das Bild im Speicher im Client über fließend Form imageIO.Write (Bild, "JPEG", response.getOutputStream ()); } catch (Ausnahme e) {logger.Error ("" Das Bild im Speicher nicht über den Client ausgeben. >>>> ", e); }} / *** Zeichenfolge zeichnen* / private String -Drawstring (Grafik G, String RandomString, int i) {g.setfont (getfont ()); G.SetColor (neue Farbe (random.Nextint (101), random.nextint (111), random .Nextint (121))); 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); Retailstring zurückgeben; } / *** Zeichnen Sie die Interferenzlinie* / private void Drawline (Graphics g) {int x = random.nextint (width); int y = random.nextint (Höhe); int xl = random.nextint (13); int yl = random.nextint (15); g.drawline (x, y, x + xl, y + yl); } / *** Zufallszeichen erhalten* / public String getrandomstring (int num) {return string.ValueOf (Randstring.Charat (num)); }}Rufen Sie im Controller die Methode auf, um das Bild des Verifizierungscode -Bildes zu generieren und das Bild an das vordere Ende zu übergeben
/*** Verifizierungscode generieren*/@requestmaping (value = "/getVerify") public void getVerify (httpServletRequest Request, httpServletResponse -Antwort) {try {response.setContentTyptype ("Image/JPEG"); // Setzen Sie den entsprechenden Typ und sagen Sie das Browser, das das Browser ausgibt. "No-Cache"); // Setzen Sie die Informationen zum Antwortheader, um dem Browser diese Inhaltsantwort zu richten. response.setDateHeader ("Ablauf", 0); RandomValidatecodeUtil randomValIdateCode = new randomValidateCodeutil (); randomValidateCode.getrandcode (request, Antwort); // Ausgabe -Verifizierungscode -Bildmethode} catch (Ausnahme E) {logger.Error ("" Verifizierungscode nicht erhalten ">>>", e); }} Front-End-Bild erhalten
html
<div> <div> <Eingabe type = "tel" id = "verify_input" placeholder = "Bitte geben Sie den Verifizierungscode" maxLength = "4"> </div> </div> <div> <a href = "javaScript: void (0) ein." rel = "externer nofollow"> <img id = "imgverify" src = "" onclick = "getVerify (this);"> </a> </div> </div>
JS
// Bestätigungscode -Funktion getVerify (obj) {obj.src = httpurl + "/sys/getVerify?" + Math.random ();};}Jedes Mal, wenn Sie auf das Bild klicken und zum ersten Mal die Verifizierungscodeschnittstelle aktualisieren, rufen Sie einfach die Methode Getverify () auf.
4. Überprüfung des Verifizierungscodes
Das Front-End erhält den vom Benutzer eingegebenen Überprüfungscode und übergibt ihn zur Überprüfung an den Hintergrund.
Hintergrundüberprüfungscode
/*** Passwort -Seite Überprüfungscode vergessen*/@requestmapping (value = "/checkverify", method = requestMethod.post, headers = "acaption = application/json") public boolean checkverify (@RequestBody map <String, Object> RequestMap, HttpSession Session) {try {// randoman Number von Sessions -String -String -String -String -String -String ( -InputString). String random = (String) session.getAttribute ("randomValidateCodeKey"); if (random == null) {return false; } if (random.equals (inputStr)) {return true; } else {return false; }} catch (Ausnahme e) {logger.Error ("Verifizierungscode -Überprüfung fehlgeschlagen", e); false zurückgeben; }}Geben Sie nach der Überprüfung des Hintergrunds das Front-End-Überprüfungsergebnis wahr oder falsch zurück.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.