狐表后端生成复杂验证码图片,发送给网站使用,提高登陆安全性

发表日期: 2023-07-21

想让狐表生成这样的验证码图片?

image.png   image.png    image.png


  1. 场景说明

一般系统登录,都会有验证码,是由后端生成随机数,然后变成图片,发送给前端。前端展示给用户看,用户识别后填报,最后提交登陆

1.jpg

2.实现方法

在狐表的HttpRequest事件里,放入以下代码,说明一下:

  1. 建议验证码少使用oO01iL这种容易混淆的,提高用户体验

  2. 支持设置图片宽高度

  3. 支持随机颜色

  4. 支持位置随机

  5. 支持角度旋转

  6. 支持设定划痕干扰线的数量

  7. 支持设置干扰散点的数量

Select Case e.Path
    Case "login.htm" '登陆页面
        Dim wb As New weui
        wb.AddForm("", "form1", "login.htm")
        With wb.AddInputGroup("form1", "ipg1", "登录")
            If e.PostValues.ContainsKey("isj") AndAlso e.PostValues.ContainsKey("imm") Then '判断是否是验证失败后的重新登录
                wb.AddTopTips("", "toptip1", "用户名或密码错误!").msec = 2000 '如果用户通过登录按钮访问,则给用户一个2秒的提示.
            End If
            With .AddInputCell("ic1") '通过InputCell增加输入框(1表示突出显示,2表示红色警示图标)
                .AddLabel("lsj", "手机", 0) '增加标签(0显示在左边)
                .AddInput("isj", "text", 1).PlaceHolder = "请输入手机号" '增加输入框(0靠左显示,1居中显示,2靠右显示)
            End With
            With .AddInputCell("ic2")
                .AddLabel("lmm", "密码", 0)
                .AddInput("imm", "password", 1).PlaceHolder = "请输入密码"
            End With
            With .AddInputCell("ic5") '通过InputCell增加输入框
                .AddLabel("lyzm", "验证码", 0) '增加标签,0显示在左边
                .AddInput("yzm", "text", 1) '增加输入框,1表示显示在中间
                .AddImage("pim", "/getVimg.htm", 2).Attribute = "onclick=""this.src = 'getVimg.htm?rand=' + Math.random() """ '增加一个图片,2比表示显示在右边
            End With
            'End With
            .AddSwitch("jizhumima", "记住密码")
            With wb.AddButtonGroup("form1", "btg1", True)
                .Add("btn1", "登录", "", "submit") '"/index.htm")
            End With
            With wb.AddButtonGroup("form1", "btg2", False)
                .Add("btn2", "免费注册", "", "/register.htm").Kind = 1
                .Add("btn3", "忘记密码", "", "/getback.htm").Kind = 1
            End With
        End With
        e.WriteString(wb.Build) '生成网页
    Case "getVimg.htm" '验证码图片获取地址
        Dim codeLength As Integer = 4 ' 验证码长度
        Dim chars As String = "ABCEFGHJKMPRTVWXY2346789" '验证码内容
        Dim random As New Random()
        Dim result As New StringBuilder(codeLength)
        For i As Integer = 0 To codeLength - 1
            result.Append(chars(random.Next(chars.Length)))
        Next
        Dim captchaCode As String = result.ToString()
        
        '生成验证码图片,并发送给前端
        Dim bmp As New Bitmap(80, 40)
        Using g As Graphics = Graphics.FromImage(bmp)
            g.Clear(Color.White) '白色背景
            
            Dim fnt As New Font("Arial", 18, FontStyle.Bold) '元素字体
            
            '随机位置和角度旋转绘制每个字符
            For i As Integer = 0 To captchaCode.Length - 1
                Dim x As Integer = i * 20 + random.Next( - 5, 5) ' 随机X坐标偏移
                Dim y As Integer = 8 + random.Next( - 5, 5) ' 随机Y坐标偏移
                Dim charColor As Color = Color.FromArgb(random.Next(256), random.Next(256), random.Next(256)) ' 随机颜色
                
                Dim rotationAngle As Single = random.Next( - 20, 20) ' 随机角度旋转
                Dim charSize As SizeF = g.MeasureString(captchaCode(i), fnt)
                Dim charRectangle As New RectangleF(x, y, charSize.Width, charSize.Height)
                
                Dim brush As New SolidBrush(charColor)
                g.TranslateTransform(charRectangle.Left + charRectangle.Width / 2, charRectangle.Top + charRectangle.Height / 2)
                g.RotateTransform(rotationAngle)
                g.DrawString(captchaCode(i), fnt, brush, - charSize.Width / 2, - charSize.Height / 2)
                g.ResetTransform()
            Next
            
            '添加随机颜色的随机线条
            For i As Integer = 0 To 4 ' 添加5条线
                Dim lineColor As Color = Color.FromArgb(random.Next(256), random.Next(256), random.Next(256)) ' 随机颜色
                Dim pen As New Pen(lineColor)
                Dim startX As Integer = random.Next(bmp.Width)
                Dim startY As Integer = random.Next(bmp.Height)
                Dim endX As Integer = random.Next(bmp.Width)
                Dim endY As Integer = random.Next(bmp.Height)
                g.DrawLine(pen, startX, startY, endX, endY)
            Next
            
            ' 添加随机颜色的随机干扰点
            For i As Integer = 0 To 50 ' 添加50个干扰点
                Dim pointColor As Color = Color.FromArgb(random.Next(256), random.Next(256), random.Next(256)) ' 随机颜色
                Dim x As Integer = random.Next(bmp.Width)
                Dim y As Integer = random.Next(bmp.Height)
                bmp.SetPixel(x, y, pointColor)
            Next
        End Using
        
        Using ms As New System.IO.MemoryStream()
            bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Png)
            
            '将验证码图片发送给客户端
            '如果跨域,请在这里增加请求头配置
            e.Response.ContentType = "image/Png"
            e.Response.OutputStream.Write(ms.ToArray(), 0, CInt(ms.Length))
        End Using
End Select

3.测试效果

启动Http服务,例如127.0.0.1:7070

访问http://127.0.0.1:7070/login.html页面,看到验证码,然后点击也能刷新。

剩下就是自己思考怎么改造,融入你自己的Weui或者第三方框架Web网站

image.png


还可以直接访问验证码页面http://127.0.0.1:7070/getVimg.htm,测试图片生成效果

image.png



随便看看
商务联系QQ : 2385350359

Copyright 2016-2023 江门蓬江区华越科技公司 版权所有 | 承接软件定制开发,欢迎联系
粤ICP备19148806号-5