java

关注公众号 jb51net

关闭
首页 > 软件编程 > java > SpringBoot+vue图片验证码

SpringBoot+vue实现登录图片验证码功能

作者：Mr顺

这篇文章主要给大家介绍一下如何SpringBoot+vue实现登录图片验证码功能，文中有详细的代码示例，具有一定的参考价值,需要的朋友可以参考下

SpringBoot+vue实现登录图片验证码

要在Spring Boot和Vue中实现登录时的图片验证码功能，可以按照以下步骤进行操作：
后端（Spring Boot）实现：
添加相关依赖：在
pom.xml文件中添加以下依赖：

<dependency>
    <groupId>nl.captcha</groupId>
    <artifactId>simplecaptcha</artifactId>
    <version>1.2.2</version>
</dependency>

创建一个验证码生成器：创建一个CaptchaGenerator类，用于生成验证码图片。

import nl.captcha.Captcha;
import nl.captcha.backgrounds.FlatColorBackgroundProducer;
import nl.captcha.gimpy.DropShadowGimpyRenderer;
import nl.captcha.text.producer.DefaultTextProducer;
import nl.captcha.text.renderer.DefaultWordRenderer;
import org.springframework.stereotype.Component;
import javax.imageio.ImageIO;
import java.awt.*;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
@Component
public class CaptchaGenerator {
    public byte[] generateCaptchaImage(String captchaText) {
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        // 创建验证码图片对象
        Captcha captcha = new Captcha.Builder(200, 50)
                .addText(new DefaultTextProducer(), new DefaultWordRenderer())
                .gimp(new DropShadowGimpyRenderer())
                .addBackground(new FlatColorBackgroundProducer(Color.WHITE))
                .build();
        try {
            // 将验证码图片写入输出流
            ImageIO.write(captcha.getImage(), "png", outputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return outputStream.toByteArray();
    }
}

创建一个REST API接口：创建一个
CaptchaController类，用于生成验证码图片的API接口。

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@RestController
@RequestMapping("/api/captcha")
public class CaptchaController {
    private final CaptchaGenerator captchaGenerator;
    @Autowired
    public CaptchaController(CaptchaGenerator captchaGenerator) {
        this.captchaGenerator = captchaGenerator;
    }
    @GetMapping
    public void generateCaptcha(HttpServletResponse response) throws IOException {
        // 生成验证码图片的方法
        byte[] captchaImage = captchaGenerator.generateCaptchaImage("1234");
        // 设置响应的内容类型为图片
        response.setContentType("image/png");
        // 将验证码图片写入响应输出流
        response.getOutputStream().write(captchaImage);
    }
}

启动应用程序：启动Spring Boot应用程序，确保REST API接口可用。
前端（Vue）实现：
创建一个验证码组件：创建一个Captcha.vue组件，用于显示验证码图片。

<template>
  <div>
    <!-- 显示验证码图片，点击图片刷新验证码 -->
    <img :src="captchaImage" alt="Captcha" @click="refreshCaptcha" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      captchaImage: "" // 验证码图片的URL
    };
  },
  mounted() {
    this.refreshCaptcha(); // 组件挂载时刷新验证码
  },
  methods: {
    refreshCaptcha() {
      this.captchaImage = `/api/captcha?t=${Date.now()}`; // 刷新验证码图片的URL，添加时间戳以避免缓存
    }
  }
};
</script>
<style scoped>
img {
  cursor: pointer; // 设置鼠标指针样式为手型
}
</style>

在登录页面使用验证码组件：在你的登录页面的代码中，使用Captcha组件来显示验证码图片，并在表单中添加一个输入框用于用户输入验证码。

<template>
  <div>
    <h1>Login Page</h1>
    <form @submit="submitForm">
      <input type="text" v-model="username" placeholder="Username" />
      <input type="password" v-model="password" placeholder="Password" />
      <!-- 显示验证码图片，并添加点击事件刷新验证码 -->
      <input type="text" v-model="captcha" placeholder="Captcha" />
      <captcha></captcha>
      <button type="submit">Login</button>
    </form>
  </div>
</template>
<script>
import Captcha from "@/components/Captcha.vue";
export default {
  data() {
    return {
      username: "",
      password: "",
      captcha: ""
    };
  },
  methods: {
    submitForm() {
      // 在此处进行登录验证和验证码验证的逻辑
      console.log("Username:", this.username);
      console.log("Password:", this.password);
      console.log("Captcha:", this.captcha);
    }
  },
  components: {
    Captcha
  }
};
</script>

这样，当用户访问登录页面时，会生成并显示一个验证码图片。用户可以点击验证码图片来刷新验证码。在提交登录表单时，你可以在后端进行相应的验证码验证逻辑，以确保用户输入的验证码与生成的验证码一致。
请确保你已正确安装了相关依赖，并根据你的项目结构和需求进行相应的路径和配置调整。以上代码只是一个示例，你可以根据实际情况进行修改和扩展。

扩展

<dependency> 是 Maven 项目中用于管理依赖的标签。在这段代码中，<dependency> 标签用于指定项目所依赖的库（Artifact）的相关信息。
具体来说：
<groupId>：指定库的 Group ID，即库所属的组织或者项目的标识符。在这里，
nl.captcha 表示这个库是由名为 “nl.captcha” 的组织提供。
<artifactId>：指定库的 Artifact ID，即库的唯一标识符。在这里，
simplecaptcha 表示这个库的名称为 “simplecaptcha”。
<version>：指定库的版本号。在这里，
1.2.2 表示使用的是 “simplecaptcha” 库的版本 1.2.2。
通过在 Maven 项目的 pom.xml 文件中添加这段 <dependency> 代码，你就可以告诉 Maven 构建系统，你的项目需要使用 “simplecaptcha” 库，并且指定了具体的版本号。当你构建项目时，Maven 会自动下载并管理这个库的相关依赖。
简而言之，这段代码的目的是在 Maven 项目中添加 “simplecaptcha” 库作为项目的依赖，以便在代码中使用该库提供的功能。
SimpleCaptcha 是一个开源的 Java 库，用于生成和验证图像验证码。它提供了一个简单而灵活的方式来创建各种类型的验证码，包括文本、数字、字母、数学等。
SimpleCaptcha 的主要特点和功能包括：
高度可定制化：SimpleCaptcha 允许你通过配置各种参数来定制生成的验证码，例如验证码的长度、字体样式、字体颜色、背景样式、干扰线等。你可以根据自己的需求创建符合你应用程序风格的验证码。

多种验证码类型：SimpleCaptcha 支持多种验证码类型，包括文本验证码、数字验证码、字母验证码、数学验证码等。你可以选择适合你应用场景的验证码类型。

高度可读性：生成的验证码图像具有良好的可读性，确保用户能够轻松辨认验证码。

防止自动化攻击：通过添加干扰线、噪点等特征，SimpleCaptcha 增加了验证码的复杂度，提高了验证码的安全性，减少了自动化攻击的风险。

简单易用：SimpleCaptcha 提供了简单的 API，使得在你的 Java 应用程序中集成和使用验证码变得非常容易。

可以使用 SimpleCaptcha 来为你的应用程序添加验证码功能，以增强用户验证和安全性。它适用于各种场景，如用户注册、登录、重置密码、防止恶意攻击等。

以上就是SpringBoot+vue实现登录图片验证码功能的详细内容，更多关于SpringBoot+vue图片验证码的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文