Gin 中使用 base64Captcha 生成图形验证码

这篇具有很好参考价值的文章主要介绍了Gin 中使用 base64Captcha 生成图形验证码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

验证码库
https://github.com/mojocn/base64Captcha
中文文档
Go进阶37:重构我的base64Captcha图形验证码项目 | 🐶❤️🦀
在models文件夹中写一个验证码的文件,Captcha.go
package models

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

// 设置自带的 store 存在服务器内存中
var store = base64Captcha.DefaultMemStore

// GetCaptcha 获取验证码
func GetCaptcha() (string, string, error) {
	// 生成验证码
	var driver base64Captcha.Driver
	//driver = base64Captcha.NewDriverString(80, 240, 0, 0, 4, "1234567890", nil)
	//设置验证码的配置
	driverString := base64Captcha.DriverChinese{
		Height:          40,           //设置验证码图片的高度
		Width:           100,          //设置验证码图片的宽度
		NoiseCount:      0,            //设置干扰线的数量
		ShowLineOptions: 2 | 4,        //设置线条的类型
		Length:          4,            //设置验证码的长度
		Source:          "1234567890", //设置验证码的字符源
		BgColor: &color.RGBA{ //设置验证码图片的背景颜色
			R: 3,
			G: 102,
			B: 214,
			A: 125,
		},
		Fonts: []string{"wqy-microhei.ttc"}, //设置验证码的字体
	}

	//生成验证码
	driver = driverString.ConvertFonts()

	//生成base64图片
	c := base64Captcha.NewCaptcha(driver, store)
	//验证码id base64图片字符串 验证码字符串 error
	id, b64s, _, err := c.Generate()
	return id, b64s, err
}

// VerifyCaptcha 验证验证码
func VerifyCaptcha(id string, VerifyValue string) bool {
	//验证验证码,参数1是验证码的id,参数2是用户输入的验证码
	if store.Verify(id, VerifyValue, true) {
		return true
	} else {
		return false
	}
}

在登录控制器中添加获取验证码的方法,LoginController.go

package admin

import (
	"gin1/models"
	"github.com/gin-gonic/gin"
	"net/http"
)

type LoginController struct {}

func (con LoginController) Index(c *gin.Context) {
	c.HTML(http.StatusOK, "admin/login/login.html", gin.H{})
}
func (con LoginController) DoLogin(c *gin.Context) {
	// 获取参数
	verifyValue := c.PostForm("verifyValue")
	captchaId := c.PostForm("captchaId")
	// 验证验证码
	if !models.VerifyCaptcha(captchaId, verifyValue) {
		c.JSON(http.StatusBadRequest, gin.H{"code": 400, "msg": "验证码错误"})
		return
	} else {
		c.JSON(http.StatusOK, gin.H{"code": 200, "msg": "验证码正确"})
		return
	}

}

// GetCaptcha 获取验证码
func (con LoginController) GetCaptcha(c *gin.Context) {
	// 生成验证码,返回验证码id,base64图片字符串
	id, base64, err := models.GetCaptcha()
	if err != nil {
		c.JSON(http.StatusBadRequest, gin.H{"code": 400, "msg": "验证码生成失败"})
		return
	}
	//定义一个map,用来存储验证码id和base64图片字符串
	data := make(map[string]interface{})
	data["id"] = id
	data["image"] = base64
	c.JSON(http.StatusOK, gin.H{"code": 200, "msg": "验证码生成成功", "data": data})
}

设置路由,Admin.go

package routers

import (
	"gin1/controllers/admin"
	"gin1/middlewares"
	"github.com/gin-gonic/gin"
)

func AdminRoutersInit(r *gin.Engine) {
	//middlewares.InitMiddleware中间件
	adminRouters := r.Group("/admin", middlewares.Init)
	{
		//后台首页
		adminRouters.GET("/", admin.MainController{}.Index)
		//欢迎页
		adminRouters.GET("/welcome", admin.MainController{}.Welcome)
		//登录页
		adminRouters.GET("/login", admin.LoginController{}.Index)
		//登录操作
		adminRouters.POST("/doLogin", admin.LoginController{}.DoLogin)
		//获取验证码
		adminRouters.GET("/getCaptcha", admin.LoginController{}.GetCaptcha)

	}
}

登录页面,Login.html

{{ 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">小米商城后台管理系统-IT营</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="verify" type="text" name="verifyValue">
                    <img id="captchaImg" src="">
                </dd>
                <dd><input type="submit" class="submit" name="dosubmit" value=""></dd>
            </dl>
        </form>
    </div>
</div>

</body>
</html>

{{end}}

登录页的js,login.js文章来源地址https://www.toymoban.com/news/detail-828315.html

$(function(){
    app.init();
})
var app={
    init:function(){
        this.getCaptcha()
        this.captchaImgChage()
    },
    getCaptcha:function(){
        $.get("/admin/getCaptcha?t="+Math.random(),function(response){
            console.log(response)
            $("#captchaId").val(response.data.id)
            $("#captchaImg").attr("src",response.data.image)
        })
    },
    captchaImgChage:function(){
        var that=this;
        $("#captchaImg").click(function(){
            that.getCaptcha()
        })
    }
}

到了这里,关于Gin 中使用 base64Captcha 生成图形验证码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 爬虫突破验证码技术 - 2Captcha

    验证码(CAPTCHA),全称为\\\"Completely Automated Public Turing test to tell Computers and Humans Apart\\\",是一种区分用户是计算机还是人的公共全自动程序。最初,验证码主要是一些混杂字母和数字的图片,但随着技术的发展,出现了更多种类的验证码,例如reCAPTCHA、GeeTest拼图验证码、hCaptc

    2024年02月16日
    浏览(37)
  • 爬虫识别验证码技术 - 2Captcha

    验证码(CAPTCHA),全称为\\\"Completely Automated Public Turing test to tell Computers and Humans Apart\\\",是一种区分用户是计算机还是人的公共全自动程序。最初,验证码主要是一些混杂字母和数字的图片,但随着技术的发展,出现了更多种类的验证码,例如reCAPTCHA、GeeTest拼图验证码、hCaptc

    2024年02月16日
    浏览(48)
  • Selenium+2Captcha 自动化+验证码识别实战

    本文深入探讨了使用Selenium库进行网页自动化操作,并结合2Captcha服务实现ReCAPTCHA验证码的破解。内容涵盖Selenium的基础知识、验证码的分类、2Captcha服务的使用,以及通过实例进行的详细讲解,最后对实践进行总结和优化思考,为读者提供了一条完整的验证码破解实践路线图

    2024年02月14日
    浏览(51)
  • burpsuite安装插件captcha-killer识别验证码

    我安装的是burpsuite v.2021版本,于2020年后,使用的captcha-killer链接地址如下: (burp版本为2020年前的可查看文末链接1) GitHub - Ta0ing/captcha-killer-java8 https://github.com/Ta0ing/captcha-killer-java8 下载zip文件并解压文件 打开burpsuite,Extender扩展 - Add添加.jar文件 -Select file选择文件 - Next -

    2023年04月08日
    浏览(68)
  • springboot的文件缓存(easy-captcha 验证码)

    springboot使用缓存的方法 (这里我们来说使用 springboot 默认的文件缓存) 其实 springboot 使用了 CatchManager 来管理缓存,有了它, 我们就可以缓一的使用各种各样的缓存, 比如 ConcurrentCatchMap redis 等缓存, 它们的使用方法都是一样的 用法 引入 yml 中配置 开启缓存 在任何一个

    2024年02月10日
    浏览(47)
  • Brup+Captcha-killer+ddddocr实现验证码识别

    实验前准备:Burp(2020以后的版本jdk11) captcha-killer(burp插件针对不同版本的burp存在不同的版本) ddddocr(开源验证码识别接口最新版已支持python3.10版本) 项目地址:https://github.com/f0ng/captcha-killer-modified https://github.com/sml2h3/ddddocr burp的安装和破解在此不做赘述,首先我们到上面

    2023年04月09日
    浏览(46)
  • 对有验证码的后台网页进行爆破-captcha-killer-modified

    实例:以pikachu靶场为目标 攻击目标url:http://xxxx/pikachu-master/vul/burteforce/bf_server.php(xxxx为自己的靶机地址,我的就是127.0.0.1) 攻击目标的验证码图片接口的url:http://127.0.0.1/pikachu-master/inc/showvcode.php 通过burp工具抓包(设置burp代理之后,点击login抓包包) 右击选择发送到captcha

    2024年02月08日
    浏览(41)
  • Java21 + SpringBoot3集成easy-captcha实现验证码显示和登录校验

    近日心血来潮想做一个开源项目,目标是做一款可以适配多端、功能完备的模板工程,包含后台管理系统和前台系统,开发者基于此项目进行裁剪和扩展来完成自己的功能开发。 本项目为前后端分离开发,后端基于 Java21 和 SpringBoot3 开发,后端使用 Spring Security 、 JWT 、 Spr

    2024年01月23日
    浏览(63)
  • gin中使用swagger生成接口文档

    想要使用 gin-swagger 为你的代码自动生成接口文档,一般需要下面三个步骤: 按照swagger要求给接口代码添加声明式注释,具体参照声明式注释格式。 使用swag工具扫描代码自动生成API接口文档数据 使用gin-swagger渲染在线接口文档页面 第一步:添加注释 在程序入口main函数上以

    2024年01月25日
    浏览(42)
  • 开源项目AJ-Captcha使用小结

    在网上看到开源项目AJ-Captcha,想把它加入到自己的项目中,遇到了一些问题,记录一下。 AJ-Captcha: 行为验证码(滑动拼图、点选文字),前后端(java)交互,包含vue/h5/Android/IOS/flutter/uni-app/react/php/go/微信小程序的源码和实现 (gitee.com) 1. 该项目不兼容Jdk17+spring boot3.0,所以我单独部

    2024年02月12日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包