前后端分离项目中实现图形验证码-Toy模板网

这篇具有很好参考价值的文章主要介绍了前后端分离项目中实现图形验证码。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

本次我们通过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 进行显示。

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

前后端分离项目中实现图形验证码,vue3,vue.js,前端,javascript