前后端分离项目中实现图形验证码

news2024/10/1 21:43:38

图形验证码在我们的日常生活中时经常用到的，一般用于用户的登录、注册等。

图形验证码在互联网应用中的作用是提高安全性、防止滥用和保护用户隐私。它是一种简单而有效的人机验证技术，帮助保护系统和用户免受自动化攻击的影响。

本次我们通过spring boot后端项目生成图形验证码，通过vue3前端项目来展示验证码；

在vue3前端项目中新建一个Captcha.vue文件，用来展示图形验证码。

新建一个spring boot后端项目，并引入hutool依赖，来提供图形验证码

前端：

在Captcha.vue文件中用img标签来展示验证码：

<img :src="codeImage" @click="getCode" style="transform: scale(0.9);"/>

可以看到，在img标签中绑定了src属性为codeImage，这个属性需要我们在script标签中定义，并用ref框起来，定义为响应式。它是用来接收后端传回的图片验证码的

定义了一个点击方法为getCode，这个方法同样需要我们在script标签中定义，这个方法是用来向后端发送请求，来获取图形验证码的；

const getCode=async()=>{
  let {data}=await axios.get('http://localhost:8888/getCaptcha')
  codeImage.value=data.data

}

使用onMounted生命周期函数使getCode获取验证码方法在这个组件挂载时执行，这样进入这个组件之后就能直接看到这个图形验证码了；

后端：

新建一个spring boot项目，并引入hutool的依赖：

  <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.8.18</version>
        </dependency>

在后端使用Cors来允许跨域请求：

@Component
public class MyWebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  //指定允许跨域请求的路径模式为"/**"，表示所有的路径都将允许跨域访问。
                .allowedOrigins("*") // 允许访问资源的域名
                .allowedMethods("*") // 允许的HTTP方法
                .allowedHeaders("*") // 允许的请求头
                .allowCredentials(false) // 是否允许发送凭证信息
                .maxAge(3600); // 预检请求的有效期
    }


}

新建一个CaptchaController类，在这个类中实现验证码的生成：

@RestController
@RequestMapping("/getCaptcha")
public class CaptchaController {

    @Autowired
    private RedisTemplate<String,String> redisTemplate;

@GetMapping
public String getCaptcha(){

//  150、50为图形的长、宽。 4表示生成4位验证码，2表示干扰线是2位，并放入redis
    CircleCaptcha circleCaptcha = CaptchaUtil.createCircleCaptcha(150, 50, 4, 2);
    String codeValue = circleCaptcha.getCode();
    String imageBase64 = circleCaptcha.getImageBase64();

    redisTemplate.opsForValue().set(codeValue,codeValue,5, TimeUnit.MINUTES);
//    "data:images/png;base64,"+imageBase64    直接显示
    return "data:images/png;base64,"+imageBase64;


}

由于验证码不是什么太重要的东西，所以我直接使用base64编码的方式来传递了，由于我们生成的是图形验证码，所以需要在生成的base64编码前拼上"data:images/png;base64,"。在这里，我将生成的验证码存入了redis中，并设置5分钟过期。将来验证时，直接从redis中取数据验证即可；

这样才能使前端直接显示出图形验证码；

在这里解释一个base64编码：

Base64 编码是一种将二进制数据转换为文本字符串的方法。将图片数据进行 Base64 编码的主要目的是方便在文本格式下传输和处理图片数据，而不需要使用二进制格式。Base64 编码后的数据可以直接嵌入到文本中，比如在 HTML、CSS 或 JSON 中，无需担心特殊字符的处理。

显示图片时，通常需要一个能够解析并渲染图片的方式。在前端开发中，<img> 标签是用于显示图片的常见方式，它的 src 属性可以接受图片的 URL。使用 Base64 编码的方式，可以将图片数据直接嵌入到 src 属性中，从而实现在浏览器中显示图片。

需要注意的是，Base64 编码会增加数据的体积约 33% 左右，因为每三个字节的二进制数据会被编码为四个字符。这会导致传输和处理的效率稍微降低。但对于较小的图片或需要嵌入在文本中的情况，使用 Base64 编码是一个方便的选择。对于大型图片或需要频繁进行传输和处理的情况，建议直接使用图片的 URL 进行显示。

现在，我们已经完成了所有的操作。我们现在分别启动前后端的项目。