Golang表单验证码生成与校验实战

go get github.com/mojocn/base64Captcha

package main

import (
    "encoding/json"
    "github.com/gin-gonic/gin"
    "github.com/mojocn/base64Captcha"
)

var store = base64Captcha.DefaultMemStore

func generateCaptcha(c *gin.Context) {
    // 配置验证码参数
    driver := &base64Captcha.DriverString{
        Height:   80,
        Width:    240,
        Length:   4,
        Source:   "1234567890",
        ShowLine: true,
        NoiseCount: 0,
    }

    cp := base64Captcha.NewCaptcha(driver, store)
    id, b64s, err := cp.Generate()
    if err != nil {
        c.JSON(500, gin.H{"error": "生成失败"})
        return
    }

    c.JSON(200, gin.H{
        "captcha_id": id,
        "captcha_image": b64s,
    })
}

func verifyCaptcha(c *gin.Context) {
    var req struct {
        CaptchaId string `json:"captcha_id"`
        Value     string `json:"value"`
    }

    if err := c.ShouldBindJSON(&req); err != nil {
        c.JSON(400, gin.H{"error": "参数错误"})
        return
    }

    if !store.Verify(req.CaptchaId, req.Value, true) {
        c.JSON(400, gin.H{"error": "验证码错误或已过期"})
        return
    }

    c.JSON(200, gin.H{"message": "验证成功"})
}

<img id="captcha-img" />
<input type="text" id="captcha-input" placeholder="请输入验证码"/>
<button onclick="submit()">提交</button>

<script>
let captchaId;

async function loadCaptcha() {
    const res = await fetch("/api/captcha");
    const data = await res.json();
    document.getElementById("captcha-img").src = data.captcha_image;
    captchaId = data.captcha_id;
}

async function submit() {
    const value = document.getElementById("captcha-input").value;
    const res = await fetch("/api/verify", {
        method: "POST",
        body: JSON.stringify({ captcha_id: captchaId, value }),
        headers: { "Content-Type": "application/json" }
    });
    alert((await res.json()).message);
}

loadCaptcha(); // 初始化加载
</script>

func main() {
    r := gin.Default()
    r.GET("/api/captcha", generateCaptcha)
    r.POST("/api/verify", verifyCaptcha)
    r.Run(":8080")
}