Go + Vue 接入行为验证码完整指南

前言

在现代 Web 应用中，验证码是防止机器人攻击和恶意请求的重要手段。相比传统的图形验证码，滑动行为验证码具有更好的用户体验。本文将介绍如何使用 go-captcha 库在 Go 后端和 Vue 前端实现滑动验证码功能。
技术栈

• 后端：Go + Gin 框架
  
• 前端：Vue 3 + Element Plus
  
• 验证码库：go-captcha（后端）+ go-captcha-vue（前端）
  
• 缓存：Redis（用于存储验证码数据）
  

一、后端实现

1.1 安装依赖

1. go get github.com/wenlng/go-captcha/v2
2. go get github.com/wenlng/go-captcha-assets
3. go get github.com/gin-gonic/gin
4. go get github.com/redis/go-redis/v9

复制代码

1.2 初始化验证码模块

创建 captcha/init.go 文件：

1. package captcha
3. import (
4.         "errors"
5. )
7. var (
8.         ErrGenData = errors.New("generate data error")
9. )
11. const (
12.         Deviation = 10  // 验证偏差值，允许用户滑动有一定误差
13. )
15. func Init() error {
16.         return initSlide()
17. }

复制代码

1.3 实现滑动验证码核心逻辑

创建 captcha/slide.go 文件：

1. package captcha
3. import (
4.         images "github.com/wenlng/go-captcha-assets/resources/imagesv2"
5.         "github.com/wenlng/go-captcha-assets/resources/tiles"
6.         "github.com/wenlng/go-captcha/v2/base/option"
7.         "github.com/wenlng/go-captcha/v2/slide"
8. )
10. var slideCapt slide.Captcha
12. // initSlide 初始化滑动验证码
13. func initSlide() error {
14.         builder := slide.NewBuilder(
15.                 slide.WithGenGraphNumber(1),
16.                 slide.WithEnableGraphVerticalRandom(true),
17.                 slide.WithImageSize(option.Size{Width: 300, Height: 220}),
18.         )
20.         // 加载背景图片资源
21.         imgs, err := images.GetImages()
22.         if err != nil {
23.                 return err
24.         }
26.         // 加载滑块图形资源
27.         graphs, err := tiles.GetTiles()
28.         if err != nil {
29.                 return err
30.         }
32.         var newGraphs = make([]*slide.GraphImage, 0, len(graphs))
33.         for i := range graphs {
34.                 graph := graphs[i]
35.                 newGraphs = append(newGraphs, &slide.GraphImage{
36.                         OverlayImage: graph.OverlayImage,
37.                         MaskImage:    graph.MaskImage,
38.                         ShadowImage:  graph.ShadowImage,
39.                 })
40.         }
42.         // 设置资源
43.         builder.SetResources(
44.                 slide.WithGraphImages(newGraphs),
45.                 slide.WithBackgrounds(imgs),
46.         )
48.         slideCapt = builder.Make()
50.         return nil
51. }
53. // Slide 验证码数据结构
54. type Slide struct {
55.         // 滑块初始显示坐标
56.         SliderX      int
57.         SliderY      int
58.         SliderWidth  int
59.         SliderHeight int
60.         // 整体大小
61.         MainWidth  int
62.         MainHeight int
63.         // 答案坐标（服务端保存，不返回给前端）
64.         X int
65.         Y int
66.         // 主图与滑块的图片，base64编码
67.         MainImage   string
68.         SliderImage string
69. }
71. // NewSlide 生成新的滑动验证码
72. func NewSlide() (*Slide, error) {
73.         m := &Slide{}
75.         captData, err := slideCapt.Generate()
76.         if err != nil {
77.                 return nil, err
78.         }
80.         dotData := captData.GetData()
81.         if dotData == nil {
82.                 return nil, ErrGenData
83.         }
84.        
85.         // 答案坐标（正确的滑块位置）
86.         m.X = dotData.X
87.         m.Y = dotData.Y
88.        
89.         // 滑块初始显示坐标
90.         m.SliderWidth = dotData.Width
91.         m.SliderHeight = dotData.Height
92.         m.SliderX = dotData.DX
93.         m.SliderY = dotData.DY
94.        
95.         // 图片大小
96.         m.MainWidth = 300
97.         m.MainHeight = 220
99.         // 转换为 base64 编码
100.         m.MainImage, err = captData.GetMasterImage().ToBase64()
101.         if err != nil {
102.                 return nil, err
103.         }
104.         m.SliderImage, err = captData.GetTileImage().ToBase64()
105.         if err != nil {
106.                 return nil, err
107.         }
109.         return m, nil
110. }
112. // VerifySlide 验证滑动位置是否正确
113. func VerifySlide(userX, userY, slideX, slideY int) bool {
114.         return slide.Validate(userX, userY, slideX, slideY, Deviation)
115. }

复制代码

1.4 定义响应结构体

创建 vo/captcha.go 文件：

1. package vo
3. type GetCaptchaRes struct {
4.         ID           string `json:"id"`           // 验证码唯一标识
5.         SliderX      int    `json:"sliderX"`      // 滑块初始X坐标
6.         SliderY      int    `json:"sliderY"`      // 滑块初始Y坐标
7.         SliderWidth  int    `json:"sliderWidth"`  // 滑块宽度
8.         SliderHeight int    `json:"sliderHeight"` // 滑块高度
9.         SliderImage  string `json:"sliderImage"`  // 滑块图片（base64）
10.         MainWidth    int    `json:"mainWidth"`    // 主图宽度
11.         MainHeight   int    `json:"mainHeight"`   // 主图高度
12.         MainImage    string `json:"mainImage"`    // 主图（base64）
13. }

复制代码

1.5 实现 HTTP 处理器

创建 handler/captcha_handler.go 文件：

1. package handler
3. import (
4.         "encoding/json"
5.         "time"
7.         "github.com/gin-gonic/gin"
8.         "github.com/redis/go-redis/v9"
9.         "github.com/rs/xid"
10.        
11.         "your-project/captcha"
12.         "your-project/vo"
13. )
15. type CaptchaHandler struct {
16.         redis *redis.Client
17. }
19. func NewCaptchaHandler(redis *redis.Client) *CaptchaHandler {
20.         return &CaptchaHandler{
21.                 redis: redis,
22.         }
23. }
25. // GetCaptcha 获取验证码
26. func (h *CaptchaHandler) GetCaptcha(c *gin.Context) {
27.         // 生成验证码
28.         m, err := captcha.NewSlide()
29.         if err != nil {
30.                 c.JSON(500, gin.H{"error": "Failed to create captcha"})
31.                 return
32.         }
34.         // 序列化验证码数据
35.         value, err := json.Marshal(m)
36.         if err != nil {
37.                 c.JSON(500, gin.H{"error": "Failed to marshal captcha"})
38.                 return
39.         }
41.         // 生成唯一ID并存储到 Redis，有效期1分钟
42.         uuid := xid.New().String()
43.         err = h.redis.Set(c, uuid, value, time.Minute).Err()
44.         if err != nil {
45.                 c.JSON(500, gin.H{"error": "Failed to store captcha"})
46.                 return
47.         }
49.         // 返回给前端的数据（不包含答案坐标）
50.         res := &vo.GetCaptchaRes{
51.                 ID:           uuid,
52.                 SliderX:      m.SliderX,
53.                 SliderY:      m.SliderY,
54.                 SliderWidth:  m.SliderWidth,
55.                 SliderHeight: m.SliderHeight,
56.                 SliderImage:  m.SliderImage,
57.                 MainWidth:    m.MainWidth,
58.                 MainHeight:   m.MainHeight,
59.                 MainImage:    m.MainImage,
60.         }
62.         c.JSON(200, gin.H{"code": 0, "data": res})
63. }
65. // VerifyCaptcha 验证滑动验证码
66. func (h *CaptchaHandler) VerifyCaptcha(c *gin.Context) {
67.         var data struct {
68.                 ID string `json:"id"` // 验证码标识
69.                 X  int    `json:"x"`  // 用户滑动的X坐标
70.                 Y  int    `json:"y"`  // 用户滑动的Y坐标
71.         }
72.        
73.         if err := c.ShouldBindJSON(&data); err != nil {
74.                 c.JSON(400, gin.H{"error": "Invalid arguments"})
75.                 return
76.         }
78.         // 从 Redis 获取验证码数据
79.         value, err := h.redis.Get(c, data.ID).Result()
80.         if err != nil {
81.                 c.JSON(400, gin.H{"error": "验证码已过期或不存在"})
82.                 return
83.         }
85.         // 反序列化验证码数据
86.         slide := captcha.Slide{}
87.         err = json.Unmarshal([]byte(value), &slide)
88.         if err != nil {
89.                 c.JSON(500, gin.H{"error": "验证码数据错误"})
90.                 return
91.         }
93.         // 验证滑动位置
94.         if !captcha.VerifySlide(data.X, data.Y, slide.X, slide.Y) {
95.                 c.JSON(400, gin.H{"error": "验证码验证失败"})
96.                 return
97.         }
99.         // 验证成功后删除 Redis 中的数据（防止重复使用）
100.         h.redis.Del(c, data.ID)
102.         c.JSON(200, gin.H{"code": 0, "message": "验证成功"})
103. }

复制代码

1.6 注册路由

在 main.go 中注册路由：

1. package main
3. import (
4.         "github.com/gin-gonic/gin"
5.         "github.com/redis/go-redis/v9"
6.        
7.         "your-project/captcha"
8.         "your-project/handler"
9. )
11. func main() {
12.         // 初始化验证码模块
13.         if err := captcha.Init(); err != nil {
14.                 panic(err)
15.         }
17.         // 初始化 Redis 客户端
18.         rdb := redis.NewClient(&redis.Options{
19.                 Addr: "localhost:6379",
20.         })
22.         // 创建 Gin 路由
23.         r := gin.Default()
25.         // 创建处理器
26.         captchaHandler := handler.NewCaptchaHandler(rdb)
28.         // 注册路由
29.         api := r.Group("/api")
30.         {
31.                 api.POST("/captcha", captchaHandler.GetCaptcha)
32.                 api.POST("/captcha/verify", captchaHandler.VerifyCaptcha)
33.         }
35.         r.Run(":8080")
36. }

复制代码

二、前端实现

2.1 安装依赖

1. npm install go-captcha-vue
2. npm install element-plus

复制代码

2.2 创建验证码组件

创建 components/SlideCaptcha.vue 文件：

1. <template>
2.   
3.     <el-button
4.       :disabled="!canSend"
5.       @click="handleClick"
6.       
7.     >
8.       {{ btnText }}
9.     </el-button>
11.    
12.     <el-dialog
13.       v-model="showDialog"
14.       width="326px"
15.       :close-on-click-modal="false"
16.       :show-close="false"
17.       :append-to-body="true"
18.     >
19.       <GoCaptchaSlide
20.         v-if="captchaData"
21.         :config="captchaConfig"
22.         :data="captchaData"
23.         :events="captchaEvents"
24.       />
25.     </el-dialog>
26.   
27. </template>

复制代码

2.3 使用验证码组件

在需要使用验证码的页面中：

1. <template>
2.   
3.     <el-form>
4.       <el-form-item label="手机号">
5.         <el-input v-model="mobile" placeholder="请输入手机号" />
6.       </el-form-item>
7.       
8.       <el-form-item label="验证码">
9.         <el-input v-model="code" placeholder="请输入验证码">
10.           <template #append>
11.             <SlideCaptcha
12.               @success="handleCaptchaSuccess"
13.               btn-text="获取验证码"
14.             />
15.           </template>
16.         </el-input>
17.       </el-form-item>
18.       
19.       <el-form-item>
20.         <el-button type="primary" @click="handleLogin">登录</el-button>
21.       </el-form-item>
22.     </el-form>
23.   
24. </template>

复制代码

2.4 HTTP 工具函数

创建 utils/http.js 文件：

1. import axios from 'axios'
3. const http = axios.create({
4.   baseURL: 'http://localhost:8080',
5.   timeout: 10000
6. })
8. // 请求拦截器
9. http.interceptors.request.use(
10.   config => {
11.     // 可以在这里添加 token
12.     return config
13.   },
14.   error => {
15.     return Promise.reject(error)
16.   }
17. )
19. // 响应拦截器
20. http.interceptors.response.use(
21.   response => {
22.     const res = response.data
23.     if (res.code !== 0) {
24.       return Promise.reject(new Error(res.error || 'Error'))
25.     }
26.     return res
27.   },
28.   error => {
29.     return Promise.reject(error)
30.   }
31. )
33. export const httpPost = (url, data) => {
34.   return http.post(url, data)
35. }
37. export const httpGet = (url, params) => {
38.   return http.get(url, { params })
39. }

复制代码

三、核心流程说明

3.1 验证码生成流程

• 前端点击"获取验证码"按钮
  
• 前端调用 /api/captcha 接口
  
• 后端生成验证码图片和答案坐标
  
• 后端将完整数据（包含答案）存储到 Redis，有效期1分钟
  
• 后端返回验证码ID和图片数据（不包含答案）给前端
  
• 前端展示滑动验证码弹窗
  

3.2 验证码验证流程

• 用户拖动滑块到目标位置
  
• 前端获取滑块坐标，调用 /api/captcha/verify 接口
  
• 后端从 Redis 获取验证码答案数据
  
• 后端比对用户滑动坐标与答案坐标（允许一定偏差）
  
• 验证成功后删除 Redis 数据，返回成功响应
  
• 前端收到成功响应后执行后续业务逻辑
  

3.3 安全性说明

• 答案不暴露：验证码答案坐标只存储在服务端 Redis 中，不返回给前端
  
• 一次性使用：验证成功后立即删除 Redis 数据，防止重复使用
  
• 时效性：验证码有效期1分钟，过期自动失效
  
• 偏差容忍：允许用户滑动有一定误差（默认10像素），提升用户体验
  

四、常见问题

4.1 验证码图片不显示

检查 base64 编码是否正确，确保前端正确解析 data:image/png;base64, 前缀。
4.2 验证总是失败

检查偏差值设置是否合理，可以适当增大 Deviation 常量的值。
4.3 Redis 连接失败

确保 Redis 服务已启动，检查连接地址和端口是否正确。
4.4 跨域问题

在 Gin 中添加 CORS 中间件：

1. import "github.com/gin-contrib/cors"
3. r.Use(cors.Default())

复制代码

五、总结

本文介绍了如何使用 go-captcha 库在 Go + Vue 项目中实现滑动验证码功能。核心要点：

• 后端使用 go-captcha 生成验证码图片和答案
  
• 使用 Redis 存储验证码数据，保证安全性和时效性
  
• 前端使用 go-captcha-vue 组件展示验证码
  
• 验证流程简单清晰，用户体验良好
  

完整代码可以直接应用到新项目中，只需根据实际情况调整路由、响应格式等细节即可。
参考资源

• go-captcha GitHub
  
• go-captcha-vue GitHub
  
• Gin 框架文档
  
• Vue 3 官方文档
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！