[golang gin框架] 12.Gin 商城项目-base64Captcha生成图形验证码以及分布式架构中配置Captcha

置顶 zhoupenghui168

已于 2023-04-15 17:35:03 修改

阅读量2.7k

点赞数 3

分类专栏： # gin框架开发 golang # redis 文章标签： base64Captcha mojocn Powered by 金山文档

于 2023-04-03 21:29:32 首次发布

本文链接：https://blog.csdn.net/zhoupenghui168/article/details/129939765

版权

golang 同时被 3 个专栏收录

156 篇文章 78 订阅

订阅专栏

gin框架开发

52 篇文章 29 订阅

订阅专栏

redis

13 篇文章 0 订阅

订阅专栏

一、涉及的库

https://github.com/mojocn/base64Captcha

二、base64Captcha 的基本使用

1.引入captcha

引入captcha,在文件中

import (
    "github.com/mojocn/base64Captcha"
)

然后

go mod tidy

2.定义 captcha model

package models

//验证码属性: https://captcha.mojotv.cn/
import (
    "github.com/mojocn/base64Captcha"
    "image/color"
)

创建store,保存验证码的位置,默认为mem(内存中)单机部署,如果要布置多台服务器,则可以设置保存在redis中
var store = base64Captcha.DefaultMemStore

//配置RedisStore, RedisStore实现base64Captcha.Store接口
//var store base64Captcha.Store = RedisStore{}

//获取验证码
func MakeCaptcha() (string, string, error) {
    //定义一个driver
    var driver base64Captcha.Driver
    //创建一个字符串类型的验证码驱动DriverString, DriverChinese :中文驱动
    driverString := base64Captcha.DriverString{
        Height:          40,                                     //高度
        Width:           100,                                    //宽度
        NoiseCount:      0,                                      //干扰数
        ShowLineOptions: 2 | 4,                                  //展示个数
        Length:          1,                                      //长度
        Source:          "1234567890qwertyuioplkjhgfdsazxcvbnm", //验证码随机字符串来源
        BgColor: &color.RGBA{ // 背景颜色
            R: 3,
            G: 102,
            B: 214,
            A: 125,
        },
        Fonts: []string{"wqy-microhei.ttc"}, // 字体
    }
    driver = driverString.ConvertFonts()
    //生成验证码
    c := base64Captcha.NewCaptcha(driver, store)
    id, b64s, err := c.Generate()
    return id, b64s, err
}

//校验验证码
func VerifyCaptcha(id string, VerifyValue string) bool {
    // 参数说明: id 验证码id, verifyValue 验证码的值, true: 验证成功后是否删除原来的验证码
    if store.Verify(id, VerifyValue, true) {
        return true
    } else {
        return false
    }
}

3.定义控制器获取验证码

在LoginController控制器中定义获取验证码的方法

//获取验证码,验证验证码
func (con LoginController) Captcha(c *gin.Context) {
    id, b64s, err := models.MakeCaptcha()
    if err != nil {
        fmt.Println(err)
    }
    c.JSON(http.StatusOK, gin.H{
        "captchaId":    id,
        "captchaImage": b64s,
    })
}

4.定义控制器验证验证码

在LoginController控制器中定义验证验证码的方法

//执行登录操作
func (con LoginController) DoIndex(c *gin.Context) {
    //获取表单中的数据
    captchaId := c.PostForm("captchaId")     // 验证码id
    verifyValue := c.PostForm("verifyValue") //验证码的值
    //获取用户名以及密码
    username := c.PostForm("username")
    password := c.PostForm("password")

    // 1.判断验证码是否验证成功
    if flag := models.VerifyCaptcha(captchaId, verifyValue); flag {
        //2.查询数据库,判断用户以及密码是否正确
        userinfo := []models.Manager{}
        password = models.Md5(password)
        models.DB.Where("username = ? and password = ? ", username, password).Find(&userinfo)
        if len(userinfo) > 0 {
            //3.执行登录,保存用户信息,执行跳转操作
            session := sessions.Default(c)
            //注意: session.Set没法保存结构体对应的切片,所以需要把结构体转换成json字符串
            userinfoSlice, _ := json.Marshal(userinfo)
            session.Set("userinfo", string(userinfoSlice))
            session.Save()
            con.Success(c, "登录成功", "/admin")
        } else {
            con.Error(c, "用户名或密码错误", "/admin/login")
        }
    } else {
        con.Error(c, "验证码验证失败", "/admin/login")
    }
}

5.静态页面显示验证码

在templates/login/index.tml下,生成带验证码的登录表单

    {{ define "admin/login/login.html" }}
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      <title>用户登录</title>
        <link rel="stylesheet" href="/static/admin/css/login.css">
        <script type="text/javascript" src="/static/admin/bootstrap/js/jquery-1.10.1.js"></script>
        <script type="text/javascript" src="/static/admin/js/login.js"></script>
    </head>
    <body>
    <div class="container">
            <div id="login">
                    <form action="/admin/doLogin" method="post" id="myform">
                        <input type="hidden" name="captchaId" id="captchaId">
                        <div class="l_title">商城后台管理系统</div>
                        <dl>
                            <dd>管理员姓名：<input class="text" type="text" name="username" id="username"></dd>
                            <dd>管理员密码：<input class="text" type="password" name="password" id="password"></dd>
                            <dd>验　证　码：<input id="verifyValue" type="text" name="verifyValue">
                                <img id="captchaImg" >
                             </dd>
                            <dd><input type="submit" class="submit" name="dosubmit" value=""></dd>
                        </dl>
                    </form>
                </div>
    </div>
    </body>
    </html>
    {{ end }}

6.Login.js 验证验证码

Login.js 获取验证码,验证码改变js方法

$(function () {
    loginApp.init();
})

var loginApp = {
    init: function () {
        this.getCaptcha()  // 调用获取验证码方法
        this.captchaImgChange()  // 调用验证码改变方法
    },
    getCaptcha: function () { // 获取验证码
        $.get("/admin/captcha?t=" + Math.random(), function (response) { // ? t= 随机数,防止浏览器缓存
            //把验证码赋值给input
            $("#captchaId").val(response.captchaId)
            $("#captchaImg").attr("src", response.captchaImage)
        })
    },
    captchaImgChange: function () { // 验证码改变
        var that = this;
        $("#captchaImg").click(function () {
            that.getCaptcha()
        })
    }
}

7.base64Captcha 的数据存储到 Redis 中

默认的保存验证码的位置为mem(内存中)单机部署,如果要布置多台服务器,则可以设置保存在redis中

7.1自定义 store 需要实现 Store 这个接口

package base64Captcha

// Store An object implementing Store interface can be registered with SetCustomStore
// function to handle storage and retrieval of captcha ids and solutions for
// them, replacing the default memory store.
//
// It is the responsibility of an object to delete expired and used captchas
// when necessary (for example, the default memory store collects them in Set
// method after the certain amount of captchas has been stored.)
type Store interface {
    // Set sets the digits for the captcha id.
    Set(id string, value string) error

    // Get returns stored digits for the captcha id. Clear indicates
    // whether the captcha must be deleted from the store.
    Get(id string, clear bool) string

    //Verify captcha's answer directly
    Verify(id, answer string, clear bool) bool
}

7.2 新建 redisCore.go

package models

//redis官网: github.com/go-redis
//下载go-redis: go get github.com/redis/go-redis/v9
//连接redis数据库核心代码

import (
    "context"
    "github.com/redis/go-redis/v9"
)

//全局使用,就需要把定义成公有的
var ctxRedis = context.Background()

var (
    RedisDb *redis.Client
)

//自动初始化数据库
func init() {
    RedisDb = redis.NewClient(&redis.Options{
        Addr:     "127.0.0.1:6379",
        Password: "", // no password set
        DB:       0,  // use default DB
    })

    //连接redis
    _, err := RedisDb.Ping(ctxRedis).Result()
    //判断连接是否成功
    if err != nil {
        println(err)
    }
}

7.3 新建 redisStore.go

package models

/**
使用redis需实现Store中的三个方法
type Store interface {
    // Set sets the digits for the captcha id.
    Set(id string, value string)

    // Get returns stored digits for the captcha id. Clear indicates
    // whether the captcha must be deleted from the store.
    Get(id string, clear bool) string

    //Verify captcha's answer directly
    Verify(id, answer string, clear bool) bool
}
 */

import (
    "context"
    "fmt"
    "time"
)

var ctx = context.Background()

const CAPTCHA = "captcha:"

type RedisStore struct {
}

//实现设置 captcha 的方法
func (r RedisStore) Set(id string, value string) error {
    key := CAPTCHA + id
    err := RedisDb.Set(ctx, key, value, time.Minute*2).Err()
    return err
}

//实现获取 captcha 的方法
func (r RedisStore) Get(id string, clear bool) string {
    key := CAPTCHA + id
    //获取 captcha
    val, err := RedisDb.Get(ctx, key).Result()
    if err != nil {
        fmt.Println(err)
        return ""
    }
    //如果clear == true, 则删除
    if clear {
        err := RedisDb.Del(ctx, key).Err()
        if err != nil {
            fmt.Println(err)
            return ""
        }
    }
    return val
}

//实现验证 captcha 的方法
func (r RedisStore) Verify(id, answer string, clear bool) bool {
    v := RedisStore{}.Get(id, clear)
    return v == answer
}

7.4 配置 store 实现 base64Captcha.Store 这个接口

修改上面第二步中的代码

package models

//验证码属性: https://captcha.mojotv.cn/
import (
    "github.com/mojocn/base64Captcha"
    "image/color"
)

//创建store,保存验证码的位置,默认为mem(内存中)单机部署,如果要布置多台服务器,则可以设置保存在redis中
//var store = base64Captcha.DefaultMemStore

//配置RedisStore, RedisStore实现base64Captcha.Store接口
var store base64Captcha.Store = RedisStore{}

//获取验证码
func MakeCaptcha() (string, string, error) {
    //定义一个driver
    var driver base64Captcha.Driver
    //创建一个字符串类型的验证码驱动DriverString, DriverChinese :中文驱动
    driverString := base64Captcha.DriverString{
        Height:          40,                                     //高度
        Width:           100,                                    //宽度
        NoiseCount:      0,                                      //干扰数
        ShowLineOptions: 2 | 4,                                  //展示个数
        Length:          1,                                      //长度
        Source:          "1234567890qwertyuioplkjhgfdsazxcvbnm", //验证码随机字符串来源
        BgColor: &color.RGBA{ // 背景颜色
            R: 3,
            G: 102,
            B: 214,
            A: 125,
        },
        Fonts: []string{"wqy-microhei.ttc"}, // 字体
    }
    driver = driverString.ConvertFonts()
    //生成验证码
    c := base64Captcha.NewCaptcha(driver, store)
    id, b64s, err := c.Generate()
    return id, b64s, err
}

//校验验证码
func VerifyCaptcha(id string, VerifyValue string) bool {
    // 参数说明: id 验证码id, verifyValue 验证码的值, true: 验证成功后是否删除原来的验证码
    if store.Verify(id, VerifyValue, true) {
        return true
    } else {
        return false
    }
}

ok,base64Captcha生成图形验证码以及分布式架构中配置Captcha操作就完成了

[上一节][golang gin框架] 11.Gin 商城项目后台管理系统-控制器配置,views模板分离,局部刷新架构

[下一节][golang gin框架] 13.Gin 商城项目-配置公共基类实现公共的成功,失败提示页面用户登录、退出登录、以及权限判断