Go整合captcha实现验证码功能

更新时间：2023年03月01日 11:41:18 作者：BarryYan

最近在使用Go语言搞一个用户登录&注册的功能，我们油然会产生一种增加验证码的想法。后来在GitHub上找到了这个名叫captcha的插件，于是就利用文档进行了初步的学习，并融入到自己的项目中，整个过程下来感觉这个插件的设计非常巧妙

最近在使用Go语言搞一个用户登录&注册的功能，说到登录&注册相关，我们油然会产生一种增加验证码的想法，因此着手实现，后来在GitHub上找到了这个名叫captcha的插件，于是就利用文档进行了初步的学习，并融入到自己的项目中，整个过程下来感觉这个插件的设计非常巧妙，所以就想写一篇文章分享一下，通过本篇文章，你会学到：

利用captcha生成验证码返回到前端使用
将captcha生成的验证码点击刷新
将captcha生成的验证码利用Redis进行缓存

1 captcha概述

GitHub：https://github.com/dchest/captcha

captcha的使用设计流程

2 实现代码（使用内存缓存）

2.1 后端代码

生成验证码图片API：

//GenerateImg 生成验证码图片名称
func GenerateImg(w http.ResponseWriter, req *http.Request) {
   w.Header().Set("Access-Control-Allow-Origin", "*")             //允许访问所有域
   w.Header().Add("Access-Control-Allow-Headers", "Content-Type") 
   d := struct {
      CaptchaId string
   }{
      captcha.New(),
   }
   bytes, _ := json.Marshal(map[string]interface{}{"code": 0, "msg": "", "count": 0, "data": d.CaptchaId})
   w.Write(bytes)
}

HTTP服务：

func RunHttp(port string) {
   logger := log.Default()

   http.Header{}.Set("Access-Control-Allow-Origin", "*")

   http.HandleFunc("/user/login", controller.UserLogin) //登录API
   http.HandleFunc("/img", controller.GenerateImg)  //生成验证码图片API
   http.Handle("/verify/", captcha.Server(captcha.StdWidth, captcha.StdHeight)) //刷新验证码API

   logger.Println("Http Server Running port:", port, "...")
   http.ListenAndServe(":"+port, nil)
}

启动HTTP服务：

func main() {
   web.RunHttp("8000")
}

验证码验证：

//UserLogin 用户登录
func UserLogin(w http.ResponseWriter, req *http.Request) {
   w.Header().Set("Access-Control-Allow-Origin", "*")
   w.Header().Add("Access-Control-Allow-Headers", "Content-Type")
   ......
   var m map[string]string
   body, err := ioutil.ReadAll(req.Body)
   if err != nil {
      panic(err)
   }
   json.Unmarshal(body, &m)
   var k = m["verify_key"]
   var v = m["verify_value"]
   res := captcha.VerifyString(k, v)
   if res { // 验证通过
     ......
   } else { // 验证未通过
     ......
   }
   ......
}

2.2 前端代码

......

<form class="layui-form" id="form">
    <h3 style="font-size: 20px;text-align: center;margin-bottom: 30px;">登录</h3>
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-inline">
            <input type="text" id="loginName" placeholder="请输入账号" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="password" id="loginPwd" placeholder="请输入密码" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">验证码</label>
        <div class="layui-input-inline">
            <input type="text" id="loginV" placeholder="请输入验证码" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="button" onclick="login()">立即提交</button>
            <button type="button" onclick="toRegister()" class="layui-btn layui-btn-primary">注册</button>
        </div>
    </div>
</form>
<img id="verify" onclick="reload()"></img>
......
<input type="hidden" id="verify_key">
</body>
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script src="//cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    const base_url = 'http://localhost:8000'

    init()

    function init() {
        $.ajax({
            url: base_url + "/img",
            type: "GET",
            success: function (res) {
                var obj = JSON.parse(res)
                $("#verify").attr("src", base_url + "/verify/" + obj.data + ".png")
                $("#verify_key").attr("value", obj.data)
            }
        })
    }

    function reload() {
        var url = $("#verify").attr("src");
        $("#verify").attr("src", url + "?reload=" + (new Date()).getTime())
    }

    function login() {
        var loginName = $("#loginName").val()
        var loginPwd = $("#loginPwd").val()
        var verify_key = $("#verify_key").val()
        var loginV = $("#loginV").val()
        var data = {
            'login_name': loginName,
            'pwd': loginPwd,
            'verify_key': verify_key,
            'verify_value': loginV
        }
        $.ajax({
            url: base_url + "/user/login",
            type: "POST",
            data: JSON.stringify(data),
            success: function (res) {
               ......
            },
            ......
        })
    }

   ......
   
</script>

2.3 注意点

跨域问题：可加入如下代码

w.Header().Set("Access-Control-Allow-Origin", "*")             //允许访问所有域
w.Header().Add("Access-Control-Allow-Headers", "Content-Type")

3 自定义Store（使用Redis缓存）

3.1 自定义对象并实现Store抽象

Redis初始化：

var (
   RDB          *redis.Client
   TokenTimeOut = time.Second * 3600
)

func init() {
   RDB = redis.NewClient(&redis.Options{
      Addr:     "127.0.0.1:6379",
      Password: "",
      DB:       0,
   })
}

自定义结构体&实现Store抽象：

type StoreImpl struct {
   RDB        *redis.Client
   Expiration time.Duration
}

func (impl *StoreImpl) Set(id string, digits []byte) {
   impl.RDB.Set(context.Background(), id, string(digits), impl.Expiration)
}

func (impl *StoreImpl) Get(id string, clear bool) (digits []byte) {
   bytes, _ := impl.RDB.Get(context.Background(), id).Bytes()
   return bytes
}

3.2 配置captcha，加入自定义Store实现

//GenerateImg 生成验证码图片名称
func GenerateImg(w http.ResponseWriter, req *http.Request) {
   w.Header().Set("Access-Control-Allow-Origin", "*")             //允许访问所有域
   w.Header().Add("Access-Control-Allow-Headers", "Content-Type") //header的类型
   //需要在New之前进行指定
   captcha.SetCustomStore(&verify.StoreImpl{
      RDB:        dao.RDB,
      Expiration: time.Second * 1000,
   })
   d := struct {
      CaptchaId string
   }{
      captcha.New(),
   }
   bytes, _ := json.Marshal(map[string]interface{}{"code": 0, "msg": "", "count": 0, "data": d.CaptchaId})
   w.Write(bytes)
}

3.3 注意点

需要在captcha.New()之前进行captcha.SetCustomStore()
在captcha.SetCustomStore()之后，自定义的方法实现Store接口时需要完整实现，也就是能真正的实现存储或缓存功能，否则验证码无法生成

到此这篇关于Go整合captcha实现验证码功能的文章就介绍到这了,更多相关Go captcha验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

golang操作Redis的实现示例
本文主要介绍了golang操作Redis的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-04-04
Golang中channel的原理解读(推荐)
channel主要是为了实现go的并发特性，用于并发通信的，也就是在不同的协程单元goroutine之间同步通信。接下来通过本文给大家介绍Golang中channel的原理解读，感兴趣的朋友一起看看吧
2021-10-10
golang中的io.ReadCloser与ioutil.NopCloser使用
这篇文章主要介绍了golang中的io.ReadCloser与ioutil.NopCloser使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
一文掌握go的sync.RWMutex锁
这篇文章主要介绍了一文掌握go的sync.RWMutex锁,本文是为了在面试中能快速口述RW锁，并非为了完整解答RW锁的机制，需要的朋友可以参考下
2023-03-03
一文带你了解Go语言中的单元测试
写过单元测试的开发人员应该理解，单元测试最核心的价值是为了证明：为什么我写的代码是正确的？也就是从逻辑角度帮你检查你的代码。本文就来和大家详细聊聊Go语言中的单元测试，需要的可以参考一下
2022-07-07
详解Golang中日志库glog的使用
golang/glog 是 C++ 版本 google/glog 的 Go 版本实现,基本实现了原生 glog 的日志格式,下面大家就跟随小编一起了解一下glog的具体使用吧
2023-09-09
GO语言协程创建使用并通过channel解决资源竞争
这篇文章主要为大家介绍了GO语言协程创建使用并通过channel解决资源竞争，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪
2022-04-04
轻松读懂Golang中的数组和切片
这篇文章主要给大家介绍了关于Golang中数组和切片的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者Golang具有一定的参考学习价值,需要的朋友可以参考下
2022-03-03
一站式解决方案：在Windows和Linux上快速搭建Go语言开发环境
本文将介绍如何在Windows和Linux操作系统下搭建Go语言开发环境,以帮助您更高效地进行Go语言开发,需要的朋友可以参考下
2023-10-10
go panic时如何让函数返回数据?
今天小编就为大家分享一篇关于go panic时如何让函数返回数据?，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-04-04