go语言实现验证码登录（完整代码）

效果图： 

为了提高系统的安全性和使用户得到更好的体验感，可以在登录时添加验证码功能

一.如何添加验证码：

生成验证码图片：使用第三方库生成验证码图片，可以包含数字、字母或其他图形，并将验证码文本保存到内存或数据库中。常用的库 github.com/mojocn/base64Captcha，下面使用 github.com/mojocn/base64Captcha，以数字验证码为例实现验证码登录。

1.安装base64Captcha库

大家使用如下命令就可以下载下来使用

go get github.com/mojocn/base64Captcha

2.封装一个验证码数据

因为生成验证码的方法产生3个变量，需要保存到内存中，下面会详细介绍

type CaptchaData struct {
	CaptchaId string `json:"captcha_id"` //验证码id
	Data      string `json:"data"`       //验证码数据base64类型
	Answer    string `json:"answer"`     //验证码数字  
}

3.数字验证码显示格式

// 数字驱动
var digitDriver = base64Captcha.DriverDigit{
	Height:   50,
	Width:    200,
	Length:   4,   //验证码长度
	MaxSkew:  0.7, //倾斜
	DotCount: 1,   //背景的点数，越大，字体越模糊
}

4.声明一个变量，将验证码保存到内存里

// 使用内存驱动
var store = base64Captcha.DefaultMemStore

5.生成验证码和校验验证码的方法

CaptchaGenerate函数用于生成验证码，调用了base64Captcha.NewCaptcha方法生成验证码，并返回包含验证码ID、base64图像数据和数字验证码的结构体。在GenCaptcha函数中，通过调用CaptchaGenerate函数生成验证码，并将生成的验证码以JSON格式返回给调用方。如果生成验证码过程中出现错误，则记录错误日志并返回。

CaptchaVerify函数用于验证用户输入的验证码是否正确，调用了store.Verify方法进行验证。在CaptchaVerify函数中，首先解析请求参数为CaptchaData结构体，然后根据CaptchaData的验证码id和数字验证码验证验证码是否正确，返回相应的信息。

func CaptchaGenerate() (CaptchaData, error) {
	var ret CaptchaData
	c := base64Captcha.NewCaptcha(&digitDriver, store)
	id, b64s, answer, err := c.Generate()
	if err != nil {
		return ret, err
	}
	ret.CaptchaId = id
	ret.Data = b64s
	ret.Answer = answer
	return ret, nil
}
func CaptchaVerify(data CaptchaData) bool {
	return store.Verify(data.CaptchaId, data.Answer, true)
}

二.在controller写路由方法，调用验证码生成和验证的方法

func GenCaptcha(c *gin.Context) {
	captcha, err := tools.CaptchaGenerate()
	if err != nil {
		zap.L().Error("GenCaptcha tools.CaptchaGenerate() failed", zap.Error(err))
		return
	}
	c.JSON(http.StatusOK, captcha)
}
func CaptchaVerify(c *gin.Context) {
	var param tools.CaptchaData
	if err := c.ShouldBind(&param); err != nil {
		zap.L().Error("CaptchaVerify c.ShouldBind(&param) failed", zap.Error(err))
		return
	}
	fmt.Println("param:", param)
	if !tools.CaptchaVerify(param) {
		c.JSON(http.StatusOK, "验证失败")
		return
	}
	c.JSON(http.StatusOK, "验证成功")
}

三.最后在登录方法里加上判断输入的验证码是否与发送的验证码一致

if !tools.CaptchaVerify(tools.CaptchaData{
		CaptchaId: p.CaptchaId,
		Answer:    p.CaptchaValue,
	}) {
		ResponseErr(c, CodeInvalidCaptcha)
		return
	}

四.前端代码

OK，此时go语言验证码登录代码就已经完整了。前端我用的ajax交互，<script>代码如下，可以参考

    <div id="login" class="tabcontent">
        <h2>登录</h2>
        <form id="loginForm">
            <div>
                <label for="username">用户姓名：</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div>
                <label for="password">用户密码：</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div>
                <label for="captcha_id"></label>
                <input type="hidden" id="captcha_id" name="captcha_id">
            </div>
            <div id="img_captcha">

            </div>
            <div>
                <label for="captcha_value">验证码：</label>
                <input type="text" id="captcha_value" name="captcha_value">
            </div>
            <button type="submit">登录</button>

        </form>
    </div>
<script>
    function loadCaptcha(){
        $.ajax({
            type: "GET",
            url: "/api/v1/captcha",
            contentType: "application/json;charset=UTF-8",
            success: function(response) {
                console.log(response);
                $("#img_captcha").empty();
                var img=new Image();
                img.onload=function (){
                    $("#img_captcha").append(img);
                }
                img.src=response["data"];
                $("#captcha_id").val(response["captcha_id"]);
            },
            error: function() {
                alert("请求失败");
            }
        });
    }

    $(document).ready(function() {
        loadCaptcha();
        $("#loginForm").submit(function(event) {
            event.preventDefault();
            var username = $("#username").val();
            var password = $("#password").val();
            var captcha_id = $("#captcha_id").val();
            var captcha_value = $("#captcha_value").val();
            var data = {
                "username":username,
                "password":password,
                "captcha_id":captcha_id,
                "captcha_value":captcha_value,
            };
            $.ajax({
                type: "POST",
                url: "/api/v1/login",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(data, null, 0),
                success: function(response) {
                    console.log(response); // 在浏览器的开发者工具中查看对象内容
                    if (response["code"]===1000){
                        location.href="view/pages/index.html";
                    } else {
                        alert(JSON.stringify(response));
                    }
                },
                error: function(xhr, status, error) {
                    // 在这里可以处理登录失败的情况，比如显示错误信息给用户等
                    alert(error);
                }
            });
        });
        $("#img_captcha").on("click",function (){
            loadCaptcha();
        });
    });
</script>

最终实现的效果图：