In diesem Artikelbeispiel wird der spezifische Code von vue+springboot zur Implementierung des Anmeldebestätigungscodes zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Schauen Sie sich zunächst das Effektbild an Fügen Sie der Anmeldeseite einen HTML-Bestätigungscode hinzu Fügen Sie eine Kaptcha-Abhängigkeit in die Backend-POM-Datei ein. <Abhängigkeit> <groupId>com.github.penggle</groupId> <artifactId>Kaptcha</artifactId> <version>2.3.2</version> </Abhängigkeit> Erstellen Sie die Toolklasse „KaptchaConfig“ Paket com.brilliance.module.system.controller.util; importiere com.google.code.kaptcha.impl.DefaultKaptcha; importiere com.google.code.kaptcha.util.Config; importiere org.springframework.context.annotation.Bean; importiere org.springframework.context.annotation.Configuration; importiere java.util.Properties; @Konfiguration öffentliche Klasse KaptchaConfig { @Bohne öffentliche DefaultKaptcha getDefaultKaptcha() { DefaultKaptcha defaultKaptcha = neues DefaultKaptcha(); Eigenschafteneigenschaften = neue Eigenschaften(); // Bildbreite Properties.setProperty("kaptcha.image.width", "180"); // Bildhöhe Properties.setProperty("kaptcha.image.height", "50"); // Bildrand Properties.setProperty("kaptcha.border", "yes"); // Rahmenfarbe Properties.setProperty("kaptcha.border.color", "105,179,90"); // Schriftfarbe Properties.setProperty("kaptcha.textproducer.font.color", "blue"); // Schriftgröße Properties.setProperty("kaptcha.textproducer.font.size", "40"); //Sitzungsschlüssel Eigenschaften.setProperty("kaptcha.session.key", "code"); // Länge des Prüfcodes Properties.setProperty("kaptcha.textproducer.char.length", "4"); // Schriftarteigenschaften.setProperty("kaptcha.textproducer.font.names", "Songti, Kaiti, Microsoft YaHei"); Konfiguration Konfiguration = neue Konfiguration (Eigenschaften); defaultKaptcha.setConfig(Konfiguration); Standard-Kaptcha zurückgeben; } } Im Controller wird der generierte Bestätigungscode zur späteren Überprüfung in Redis gespeichert (die Konfiguration und Abhängigkeiten von Redis finden Sie auf Baidu). @RestController @RequestMapping("/api/Benutzer") @Api(tags = "Systembenutzerverwaltung") öffentliche Klasse SysUserController erweitert AbstractController { @Autowired privater SysUserService sysUserService; @Autowired privates DefaultKaptcha StandardKaptcha; @Autowired RedisVorlage redisVorlage; @GetMapping("/Bildcode erstellen") public void createImageCode(HttpServletRequest Anfrage, HttpServletResponse Antwort) throws IOException { response.setHeader("Cache-Control", "kein Speichern, kein Cache"); Antwort.setContentType("Bild/JPEG"); // Textüberprüfungscode generieren String text = defaultKaptcha.createText(); // Bildverifizierungscode generieren BufferedImage image = defaultKaptcha.createImage(text); // Hier verwenden wir Redis, um den Wert des Bestätigungscodes zwischenzuspeichern und die Ablaufzeit auf 60 Sekunden festzulegen redisTemplate.opsForValue().set("imageCode",text,60, TimeUnit.SECONDS); ServletOutputStream aus = response.getOutputStream(); ImageIO.write(Bild, "jpg", aus); aus.spülen(); aus.schließen(); } Nach der Generierung muss der Bestätigungscode auf der Anmeldeoberfläche überprüft werden, um festzustellen, ob er korrekt ist. Fügen Sie auf der äußeren Ebene der Anmeldeschaltfläche eine Anforderungsbeurteilung hinzu, um zu überprüfen, ob der eingegebene Bestätigungscode korrekt ist, und geben Sie basierend auf dem Rückgabewert eine Fehlermeldung aus @PostMapping("/Vergleichscode") öffentliches ERGEBNIS Vergleichscode(@RequestBody String Überprüfungscode) { if(!redisTemplate.hasKey("imageCode")) { return RESULT.error(500,"Verifizierungscode ist abgelaufen"); } Zeichenfolgencode = redisTemplate.opsForValue().get("imageCode").toString(); wenn(StringUtils.equals(verificationCode,code)) { return RESULT.ok(); } anders { return RESULT.error(500,"Falscher Bestätigungscode eingegeben"); } } Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
Inhaltsverzeichnis 1 Indikatoren im Stresstest 1,...
Zunächst stellt sich häufig die Frage: Welche Bez...
Hier sind 10 HTML-Tags, die zu wenig verwendet od...
So führen Sie SVG-Symbole in Vue ein Methode 1 zu...
Da immer mehr Projekte bereitgestellt werden, wer...
Zunächst: Was ist ein Box-Collapse? Elemente, die...
Vorwort Im Grunde verwenden Programmierer am Arbe...
1. Befehlseinführung Der Befehl gzip (GNU zip) wi...
Es gibt drei Möglichkeiten, ein Image zu erstelle...
Verwenden Sie Javascript, um den Countdown-Effekt...
Kurzbeschreibung Der Editor hat häufig Probleme m...
Tipps zur Verwendung von Docker 1. Bereinigen Sie...
Inhaltsverzeichnis 1 Testumgebung 1.1 Server-Hard...
Dieser Artikel stellt das Flex-Layout vor, um ein...
Der Vorgang der Installation der MySQL-Datenbank ...