之前在项目中，一直使用VUE前端的图片验证码。前几天看到文章，说前端验证容易被绕过，那就准备使用后端验证吧。

用golang就选择github.com/dchest/captcha了，折腾一番后，要点记录如下：

控制器:

package controllers

import (

    "bytes"

    "log"

    "net/http"

    "strconv"

    "strings"

    "time"

    "utils"

    "github.com/dchest/captcha"

    "github.com/gin-gonic/gin"

)

type CheckCodeController struct {

}

/***

*后端图形码验证

*/

func (serviceCheckCode *CheckCodeController) VerifyCode(c *gin.Context) {

    captchaId := c.Query("captchaId")

    pngCode := c.Query("pngCode")

    if captcha.VerifyString(captchaId, pngCode) {

        result := utils.ResultSuccess()   //自己写的用于规范一般状态码传递的package

        c.JSON(http.StatusOK, gin.H{

            "data": result,

        })

    } else {

        result := utils.ResultFailue()

        result.Msg = "图形验证码错误"

        c.JSON(http.StatusOK, gin.H{

            "data": result,

        })

    }

}

/***

刷新验证码,也作为初次获取验证码使用

*/

func (serviceCheckCode *CheckCodeController) ReloadVerifyCode(c *gin.Context) {

    id := captcha.NewLen(4)    //一般用4位数字

    result := utils.ResultSuccess()

    result.Msg = id    //偷懒一下,直接用这个来传递captchaId到前端

    c.JSON(http.StatusOK, gin.H{

        "data": result,

    })

}

/**

显示图形验证码
因为要传递图片,所以要对Header做一些设置

*/

func (serviceCheckCode *CheckCodeController) GenVerifyCode(c *gin.Context) {

    c.Writer.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")

    c.Writer.Header().Set("Pragma", "no-cache")

    c.Writer.Header().Set("Expires", "0")

    c.Writer.Header().Set("Content-Type", "image/png")


    id := c.Param("captchaId")

    id = strings.Replace(id, "/", "", 1)


    var content bytes.Buffer

    captcha.WriteImage(&content, id, 100, 50)  //4位验证码,宽100,高50最清晰

    http.ServeContent(c.Writer, c.Request, id+".png", time.Time{}, bytes.NewReader(content.Bytes()))

    return

}

路由:

checkCodeRoute := router.Group("/check-code")
        {
            checkCodeController := new(controllers.CheckCodeController)
            //刷新图形验证码
            checkCodeRoute.GET("refresh.html", checkCodeController.ReloadVerifyCode)
            //获取图形验证码
            checkCodeRoute.GET("/show/*captchaId", checkCodeController.GenVerifyCode)
            //验证图形码
            checkCodeRoute.GET("/verify", checkCodeController.VerifyCode)
        }

前端:

<template>
  <div>
　　<div>
      <el-input v-model="pngCode" placeholder="请输入图片验证码" style="width: 120px;"></el-input>
        <span @click="getCaptchaImgUrl" class="box-verify"><img id="captchaIdImg" :src="captchaImgUrl" /></span>
      <el-button @click="verifyCaptcha">验证</el-button>
    </div>
  </div>
</template>

<script>
　export default {
　　data() {
      return {
        captchaId: '',
        captchaImgUrl: '',
        pngCode: ''
      }
    },
    methods: {
      getCaptchaImgUrl() {
        this.axios.get('/check-code/refresh.html', {})
        .then(res => {
          this.captchaId = res.data.data.Msg
          let url = window.location.href
          let host = window.location.host
          let n = host.indexOf(":", 0)
          let k = url.indexOf(host.slice(0,n), 0)
          //这里的端口8000是后端gin的端口
          this.captchaImgUrl = url.slice(0,k) + host.slice(0,n) + ':8000/web/check-code/show/' + res.data.data.Msg
        }).catch(err => {
          console.log(err)
        })
        // console.log(this.captchaImgUrl)
      }, 
      verifyCaptcha() {
        // 因为显示图片验证码的时候, header被改成了'Content-Type': 'image/png',所以
        this.axios({
          methods:"GET",
          url:'/check-code/verify', 
          headers:{
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          params: {
            "captchaId": this.captchaId,
            "pngCode": this.pngCode
          }
        }).then(res => {
          if (res.data.data.Code == 200 ) {
            console.log(res.data.data.Msg)
          } else {
            console.log(res.data.data.Msg)
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    mounted() {
      this.getCaptchaImgUrl()
    }
  }
</script>

<!-- 样式 -->
<style>
  .box-verify img{
    vertical-align: middle;
  }
</style>

大功告成!