gin框架生成和验证图像验证码

红太狼 2024-02-17 10:13 21阅读 0赞

这里使用Go语言的一个包 base64Captcha 来生成和验证图像验证码。  
使用base64Captcha包，可以方便地生成验证码，并在服务器端进行验证。它提供了一些配置选项，如验证码的长度、宽度、高度、字体样式、噪点等，以及验证结果的检查。  
base64Captcha 包的一些主要功能：  
1.生成图像验证码:可以生成包含随机字符或数字的图像验证码。  
2.Base64编码:将验证码图像以Base64编码的形式返回，方便嵌入到HTML页面或通过API返回给客户端。  
3.验证验证码:可以验证用户输入的验证码是否与生成的验证码匹配。  
4.配置选项:提供了一些配置选项，如验证码长度、宽度、高度、字体样式、噪点等，可以根据需求进行自定义配置。

## 效果图 ##

![在这里插入图片描述][c27c1f3548454cafbabea2812178a22f.png]

## 代码分析 ##

本篇文章以 **数字验证码**为例 展开讲解：  
**先**创建一个结构体来存储验证码的相关属性

var digitDriver = base64Captcha.DriverDigit{
        
    	Height: 50 ,  // 生成图片高度
    	Width: 150,  // 生成图片宽度
    	Length: 5,  // 验证码长度
    	MaxSkew: 1,  // 文字的倾斜度 越大倾斜越狠 ， 越不容易看懂
    	DotCount: 1,  // 背景的点数，越大，字体越模糊
    }

**然后** 进行验证码的创建

var store = base64Captcha.DefaultMemStore
    func CaptchaGenerate() (CaptchaData , error) {
        
    	var ret CaptchaData
    	// 注意，这里直接使用digitDriver会报错。必须传一个指针。
    	c := base64Captcha.NewCaptcha(&digitDriver, store)   // 验证码生成器
    	id, b64s,err := c.Generate()
    	if err != nil {
        
    		return ret,err
    	}
    	ret.CaptchaId = id
    	ret.Data = b64s
    	return ret,nil
    }

现在验证码的后端生成已经完成，**下一步**去前端写  
这里面是一个用户名输入框，一个密码输入框，还有一个验证码的输入框。  
还有一个用来记录验证码ID的隐藏输入框，它存在的目的就是记录ID的，这个ID是用来存储验证码中的具体值的。

这是用来生成 验证码图片的。  
采用**ajax异步请求**

//  生成验证码 图 的
        function loadCaptcha() {
        
            $.ajax({
        
                url: "/captcha",
                type: "get",
                dataType: "json",
                success:function (data) {
        
                    $("#img_captcha").empty()
                    var img = new Image()
                    img.onload = function () {
        
                        $("#img_captcha").append(img)
                    }
                    img.src = data.data.data  // 给图片传路径
                    $("#captcha_id").val(data.data.captcha_id)
                },
                error:function () {
        
                    alert("请求失败！")
                },
            })
        }

到这里，前端生成验证码时需要请求一个http的GET请求，**然后**我们去路由那里添加上这个路由处理函数

g.GET( "/captcha",func(context *gin.Context) {
        
    		captcha,err :=tools.CaptchaGenerate()
    		if err != nil {
        
    			context.JSON(http.StatusOK,tools.ECode{
        
    				Code:    10005,
    				Message: err.Error(),
    			})
    			return
    		}
    
    		context.JSON(200,tools.ECode{
        
    			Data: captcha,
    			})
    		})

好了截止到现在，一个验证码图片生成已经写号了。**接下来**要进行验证码输入是否正确比对。  
点击登录按钮后，将账号，密码，验证码都传入后端进行比对。

$(document).ready(function () {
        
            loadCaptcha()
            $("#login_sub").on("click",function () {
        
                $.ajax({
        
                    url:"/login",
                    data : {
        
                        name:$("#name").val(),
                        password:$("#pwd").val(),
                        captcha_id : $("#captcha_id").val(),
                        captcha_value :$("#captcha_value").val(),
                    },
                    type:"post",
                    dataType : "json",
                    success :function (data) {
        
                        // console.log(data)
                        if (data.message === "账号或密码错误"){
        
                            alert(data.message)
                            loadCaptcha()
                            $("#captcha_value").val("") // 清空 验证码输入框
                            $("#pwd").val("")  // 清空 密码输入框
                        }else if (data.message === "登录成功"){
        
                            alert(data.message)
                            pageRedirect()
                            // setTimeout(pageRedirect(),3000)  加个定时器 可以避免一些网络攻击
                        } else {
        
                            loadCaptcha()
                            alert(data.message)
                            $("#captcha_value").val("") // 清空 验证码输入框
                        }
                    },
                    error:function () {
        
                        alert("请求失败! ")
                    }
                });
            });
    
            $("#img_captcha").on("click",function () {
        
                loadCaptcha()
            })
    
        });
        function pageRedirect() {
        
            window.location.replace("/index")  // 使用重定向，无法回退
        }

这里重点是 store.Verify() 函数的使用，这个函数需要传递进去三个参数：第一个是 验证码的 id，第二个是 输入框输入的验证码值，第三个是 验证码比对是否为严格模式（子母大小写，顺序等）。  
如果信息比对正确 则 返回 false，信息比对错误 返回 true。

func CaptchaVerify(data CaptchaData) bool  {
        
    	return store.Verify(data.CaptchaId , data.Data , true)
    }
    	//  这是判断校验码的
    	if !tools.CaptchaVerify(tools.CaptchaData{
        
    		CaptchaId: user.CaptchaId,
    		Data: user.CaptchaValue,
    	}){
        
    		context.JSON(200 , tools.ECode{
        
    			Code: 10010,
    			Message: "验证码校验失败",
    		})
    		return
    	}

好了，验证码图片生成和比对验证就这些了！

[c27c1f3548454cafbabea2812178a22f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/83272c3abccf498ebf861f606100b032.png