.Net 登陆的时候添加验证码

程序员文章站 2022-05-13 22:38:59

一、ASPX 登陆界面验证码 1、登陆验证码图片和输入验证码框 2、js $(function () { $("#loginBtn").click(function () { var Pwd = $("#PwdTbx").val(); var md5pwd = $.md5(Pwd); $("#Pwd ......

一、aspx 登陆界面验证码

1、登陆验证码图片和输入验证码框

<asp:textbox id="txtvalicode" runat="server" width="50px"></asp:textbox>
<asp:image id="valicode" imageurl="createvaliimg.aspx" runat="server" style="position:relative;top:4px;" />

2、js

 $(function () {
            $("#loginbtn").click(function () {
                var pwd = $("#pwdtbx").val();
                var md5pwd = $.md5(pwd);
                $("#pwdtbx").val(md5pwd);

            });
            $("#txtvalicode").val("");

            $("#valicode").click(function () {
                location.reload();
            });
            
        });

view code

3、创建生产验证码的aspx页 createvaliimg.aspx

<%@ page language="c#" autoeventwireup="true" codefile="createvaliimg.aspx.cs" inherits="createvaliimg" %>

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

view code

后台代码

using system;
using system.collections.generic;
using system.drawing;
using system.linq;
using system.web;
using system.web.ui;
using system.web.ui.webcontrols;

public partial class createvaliimg : system.web.ui.page
{
    protected void page_load(object sender, eventargs e)
    {
        string validatenum = createrandomnum(4);
        createimage(validatenum);
        session["validatenum"] = validatenum;
    }

    //生产随机数
    private string createrandomnum(int numcount)
    {
        string allchar = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,o,p,q,r,s,t,u,w,x,y,z,a,b,c,d,e,f,g,h,i,j,k,m,n,o,p,q,s,t,u,w,x,y,z";
        string[] allchararray = allchar.split(',');//拆分成数组
        string randomnum = "";
        int temp = -1;                             //记录上次随机数的数值，尽量避免产生几个相同的随机数
        random rand = new random();
        for (int i = 0; i < numcount; i++)
        {
            if (temp != -1)
            {
                rand = new random(i * temp * ((int)datetime.now.ticks));
            }
            int t = rand.next(35);
            if (temp == t)
            {
                return createrandomnum(numcount);
            }
            temp = t;
            randomnum += allchararray[t];


        }
        return randomnum;
    }
    //生产图片
    private void createimage(string validatenum)
    {
        if (validatenum == null || validatenum.trim() == string.empty)
            return;
        //生成bitmap图像
        system.drawing.bitmap image = new system.drawing.bitmap(validatenum.length * 12 + 12, 22);
        graphics g = graphics.fromimage(image);
        try
        {
            //生成随机生成器
            random random = new random();
            //清空图片背景
            g.clear(color.white);
            //画图片的背景噪音线
            for (int i = 0; i < 25; i++)
            {
                int x1 = random.next(image.width);
                int x2 = random.next(image.width);
                int y1 = random.next(image.height);
                int y2 = random.next(image.height);
                g.drawline(new pen(color.silver), x1, x2, y1, y2);
            }
            font font = new system.drawing.font("arial", 12, (system.drawing.fontstyle.bold | system.drawing.fontstyle.italic));
            system.drawing.drawing2d.lineargradientbrush brush = new system.drawing.drawing2d.lineargradientbrush(new rectangle(0, 0, image.width, image.height), color.blue, color.darkred, 1.2f, true);
            g.drawstring(validatenum, font, brush, 2, 2);
            //画图片的前景噪音点
            for (int i = 0; i < 100; i++)
            {
                int x = random.next(image.width);
                int y = random.next(image.height);
                image.setpixel(x, y, color.fromargb(random.next()));

            }
            //画图片的边框线
            g.drawrectangle(new pen(color.silver), 0, 0, image.width - 1, image.height - 1);
            system.io.memorystream ms = new system.io.memorystream();
            //将图像保存到指定流
            image.save(ms, system.drawing.imaging.imageformat.gif);
            response.clearcontent();
            response.contenttype = "image/gif";
            response.binarywrite(ms.toarray());
        }
        finally
        {
            g.dispose();
            image.dispose();
        }
    }
}

view code

4、运行效果

5、登陆提交账号密码验证码的时候验证

if (valicode != session["validatenum"].tostring()){ ... }

二、mvc中使用验证码

1、在登陆页添加输入验证码框和图片

 验证码 <input id="txtvalicode" type="text"  style="width:60px;" />
       <img id="valicode" src="/login/createvaliimg"   style="position:relative;top:4px;" />

2、登陆界面js、点击验证码图片刷新验证码

  $(function () {     
        $("#txtvalicode").val("");
        $("#valicode").click(function () {
            location.reload();
        });
    });

3、在controller里添加 createvaliimg 方法生产验证码，供界面里img url调用

 public void createvaliimg()
        {
            string validatenum = createrandomnum(4);
            createimage(validatenum);
            session["validatenum"] = validatenum;
        }

        //生产随机数
        private string createrandomnum(int numcount)
        {
            string allchar = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,o,p,q,r,s,t,u,w,x,y,z,a,b,c,d,e,f,g,h,i,j,k,m,n,o,p,q,s,t,u,w,x,y,z";
            string[] allchararray = allchar.split(',');//拆分成数组
            string randomnum = "";
            int temp = -1;                             //记录上次随机数的数值，尽量避免产生几个相同的随机数
            random rand = new random();
            for (int i = 0; i < numcount; i++)
            {
                if (temp != -1)
                {
                    rand = new random(i * temp * ((int)datetime.now.ticks));
                }
                int t = rand.next(35);
                if (temp == t)
                {
                    return createrandomnum(numcount);
                }
                temp = t;
                randomnum += allchararray[t];


            }
            return randomnum;
        }
        //生产图片
        private void createimage(string validatenum)
        {
            if (validatenum == null || validatenum.trim() == string.empty)
                return;
            //生成bitmap图像
            system.drawing.bitmap image = new system.drawing.bitmap(validatenum.length * 12 + 12, 22);
            graphics g = graphics.fromimage(image);
            try
            {
                //生成随机生成器
                random random = new random();
                //清空图片背景
                g.clear(color.white);
                //画图片的背景噪音线
                for (int i = 0; i < 25; i++)
                {
                    int x1 = random.next(image.width);
                    int x2 = random.next(image.width);
                    int y1 = random.next(image.height);
                    int y2 = random.next(image.height);
                    g.drawline(new pen(color.silver), x1, x2, y1, y2);
                }
                font font = new system.drawing.font("arial", 12, (system.drawing.fontstyle.bold | system.drawing.fontstyle.italic));
                system.drawing.drawing2d.lineargradientbrush brush = new system.drawing.drawing2d.lineargradientbrush(new rectangle(0, 0, image.width, image.height), color.blue, color.darkred, 1.2f, true);
                g.drawstring(validatenum, font, brush, 2, 2);
                //画图片的前景噪音点
                for (int i = 0; i < 100; i++)
                {
                    int x = random.next(image.width);
                    int y = random.next(image.height);
                    image.setpixel(x, y, color.fromargb(random.next()));

                }
                //画图片的边框线
                g.drawrectangle(new pen(color.silver), 0, 0, image.width - 1, image.height - 1);
                system.io.memorystream ms = new system.io.memorystream();
                //将图像保存到指定流
                image.save(ms, system.drawing.imaging.imageformat.gif);
                response.clearcontent();
                response.contenttype = "image/gif";
                response.binarywrite(ms.toarray());
            }
            finally
            {
                g.dispose();
                image.dispose();
            }
        }

view code

4、运行效果

.Net 登陆的时候添加验证码