vue + springboot realisiert den Login-Bestätigungscode

vue + springboot realisiert den Login-Bestätigungscode

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:
  • Vue-Implementierung eines Beispiels für die Anmeldemethode mit Bestätigungscode
  • Vue implementiert beim Anmelden einen grafischen Überprüfungscode
  • Vue implementiert die Anmeldung per Mobiltelefon-Bestätigungscode
  • Verwenden Sie Vue, um den Effekt der Registrierungsseite zu realisieren. Vue ermöglicht die Anmeldung per SMS-Bestätigungscode.
  • Vue implementiert einen Login-Verifizierungscode
  • Vue implementiert die Anmeldung mit grafischem Bestätigungscode
  • Vue implementiert Bildverifizierungscode beim Anmelden
  • Vue implementiert die Anmeldung per Mobiltelefonnummer und Bestätigungscode (60-Sekunden-Countdown deaktiviert)
  • Vue implementiert die Bestätigungscodefunktion der Anmeldeschnittstelle
  • vue+Element implementiert zufälligen Bestätigungscode für die Anmeldung

<<:  Lösung für das Problem, dass MySQL nach dem Ändern des Standardpfads der Datenbank nicht gestartet werden kann

>>:  Detailliertes Tutorial zur Installation von mysql-8.0.13 (ZIP-Installation) auf einem Windows 10-System

Artikel empfehlen

Konzepte und Methoden für Server-Stresstests (TPS/Parallelität)

Inhaltsverzeichnis 1 Indikatoren im Stresstest 1,...

10 zu wenig genutzte oder missverstandene HTML-Tags

Hier sind 10 HTML-Tags, die zu wenig verwendet od...

Zwei Möglichkeiten zum Einführen von SVG-Symbolen in Vue

So führen Sie SVG-Symbole in Vue ein Methode 1 zu...

5 Lösungen für den CSS-Box-Zusammenbruch

Zunächst: Was ist ein Box-Collapse? Elemente, die...

Lassen Sie uns über die Leistung von MySQLs COUNT(*) sprechen.

Vorwort Im Grunde verwenden Programmierer am Arbe...

Verwendung des Linux-Befehls gzip

1. Befehlseinführung Der Befehl gzip (GNU zip) wi...

So erstellen, speichern und laden Sie Docker-Images

Es gibt drei Möglichkeiten, ein Image zu erstelle...

Countdown-Effekt mit Javascript implementieren

Verwenden Sie Javascript, um den Countdown-Effekt...

Sehen Sie sich den Befehl zum Ändern der MySQL-Tabellenstruktur an

Kurzbeschreibung Der Editor hat häufig Probleme m...

Zusammenfassung des Speicherorts und Tipps für Docker-Konfigurationscontainer

Tipps zur Verwendung von Docker 1. Bereinigen Sie...

Leistung des Node+Express-Testservers

Inhaltsverzeichnis 1 Testumgebung 1.1 Server-Hard...

Flex-Layout erreicht feste Anzahl von Zeilen pro Zeile + adaptives Layout

Dieser Artikel stellt das Flex-Layout vor, um ein...