图形验证码 captcha的使用

Posted 2023-04-19 随心的博客

使用效果：

 

 

使用说明：

1、点击图片 或者 点击看不清 换一张，会自动更换。

  2、输入错误，也会自动再更换一张。确保安全

 

验证码文件：common/captcha.go 

package common

import (
	"github.com/gin-gonic/gin"
	"github.com/go-playground/validator/v10"
	"github.com/mojocn/base64Captcha"
	"image/color"
	"net/http"
)

var store = base64Captcha.DefaultMemStore
// 获取验证码
func GetCaptcha(c *gin.Context) 
	//配置验证码
	driverString := base64Captcha.DriverString
		Height:          60,
		Width:           200,
		NoiseCount:      0,     //噪点数
		ShowLineOptions: 2 | 4, //干扰线
		Length:          4,
		Source:          "123456789abcdefghijklmnopqrstuvwxwz",
		BgColor: &color.RGBA
			R: 100,
			G: 100,
			B: 100,
			A: 100,
		,
		Fonts: []string"wqy-microhei.ttc",
	

	var driver base64Captcha.Driver = driverString.ConvertFonts()
	//生成验证码
	cap := base64Captcha.NewCaptcha(driver, store)
	id, b64s, err := cap.Generate()
	body := map[string]interface"code": 1, "data": b64s, "captchaId": id, "msg": "success"
	if err != nil 
		body = map[string]interface"code": 0, "msg": err.Error()
	
	c.JSON(http.StatusOK, body)


// 自定义验证码的验证器
func VerifyCaptcha(f validator.FieldLevel) bool 
	captcha := f.Parent().FieldByName("Captcha").Interface().(string)
	captcha_id := f.Parent().FieldByName("CaptchaId").Interface().(string)

	if store.Verify(captcha_id, captcha, true) 
		return true
	
	return false

　

Html调用代码：

<div class="row cl">
<div class="formControls col-xs-8 col-xs-offset-3">
<input name="captcha" id="captcha" class="input-text size-L" type="text" placeholder="验证码" onblur="if(this.value==\'\')this.value=\'验证码:\'" onclick="if(this.value==\'验证码:\')this.value=\'\';" value="验证码:" >
<img id="captcha_img" src="/admin/getCaptcha" onclick="showCaptcha()" >
 <input type="hidden" name="captcha_id" id="captcha_id" />
<a id="kanbuq" href="javascript:showCaptcha();">看不清，换一张</a>
</div>
 </div>


<script type="text/javascript" src="/static/h-ui.lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" >
//显示验证码
    function showCaptcha()
        $.get("/admin/getCaptcha",function (res)
            $("#captcha_img").attr("src",res.data)
            $("#captcha_id").val(res.captchaId)

        )
    
showCaptcha()
</script>

　　完结

但行好事，莫问前程！

本文来自博客园，作者：yangphp，转载请注明原文链接：https://www.cnblogs.com/ypeih/p/17334582.html

NodeJs生成SVG图形验证码

背景：短信接口有调用限制，如果受到恶意攻击，很容易就爆掉，所以需要一系列验证机制，后端采用签名加密的方式，而前端要做人机识别，有两个要求：

1）不能使用文本式的验证码，很简单就能拿到

2）所有验证逻辑要在服务端进行，不然很容易被绕过

解决方法：使用svg-captcha插件在node.js中生成svg格式的验证码。

1、安装

npm install --save svg-captcha

2、使用方法

var svgCaptcha = require(‘svg-captcha‘);
var data = svgCaptcha.create({
   //options 
})
console.log(data)
//{data: ‘<svg>......</svg>‘, text: ‘fdsafasdf‘}

在express中使用

var svgCaptcha = require(‘svg-captcha‘);
var router = require(‘express‘).Router();

router.get(‘/get-img-verify‘, function (req, res) {
    console.log(req.query);
    var option = req.query;
    // 验证码，有两个属性，text是字符，data是svg代码
    var code = svgCaptcha.create(option);
    // 保存到session,忽略大小写
    req.session["randomcode"] = code.text.toLowerCase();
    // 返回数据直接放入页面元素展示即可
    res.send({
        img: code.data
    });
});

客户端获取验证码

/*
     * 获取图片验证码
     */
    getImageCode: function () {
        var _this = this;
        $("#image_code").val("");
        $.ajax({
            type:"get",
            url: "/get-img-verify",
            data: {　　    　  
                size: 6,  //验证码长度
                width: 200,
                height: 150,
                background: "#f4f3f2",//干扰线条数
                noise: 2,
                fontSize: 32,
                ignoreChars: ‘0o1i‘,   //验证码字符中排除‘0o1i‘
                color: true // 验证码的字符是否有颜色，默认没有，如果设定了背景，则默认有           
            },
            dataType: ‘json‘
        }).done(function (data) {
            $(".getImageCode").html(data.img);
            $(".getImageCode").off("click").on("click", function () {
                _this.getImageCode();
            });
        });
    }                            

3、验证方法

所有的验证逻辑都要在服务端进行，不然这个验证码就没什么卵用了，所以正确的逻辑应该是，当去请求敏感接口的时候，把客户端输入的验证码连同接口需要的参数一块传给node层，在node里判断用户输入的验证码是不是跟之前存到session里的验证码一致，如果不一致，则验证不通过，直接返回数据，不请求后台；如果一致，则验证通过，再由node发起请求，去调用后台接口。

router.get(‘/cerification-codeService/send-verification-code‘, function (req, res, next) {
    var url = urlMap.useraccountserver + ‘/cerification-codeService/new-send-verification-code‘;
    var imageCode = req.query.imageCode.toLowerCase();
    var qs = req.query;
    for (let key in qs) {
        if (key === ‘imageCode‘) {
            delete qs[key];
        }
    }
    if (imageCode !== req.session["randomcode"]) {
        res.send({
            code: 4
        });
        return false;
    }
    var options = {
        url: url,
        method: ‘GET‘,
        json: true,
        qs: qs
    };

    clusterUtility.API.optionsFilter(req, options);
    request(options, function (error, response, body) {
        res.send(body);
    });
});

插件还有一些其他的配置项及API，具体可见  https://github.com/lemonce/svg-captcha