图片登陆验证功能的实现

最新推荐文章于 2022-07-14 16:55:53 发布

真水无香No1

最新推荐文章于 2022-07-14 16:55:53 发布

阅读量815

点赞数

分类专栏： JavaScript Asp.net html

本文链接：https://blog.csdn.net/sq_201067/article/details/8876003

版权

JavaScript 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

Asp.net

8 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

首先HTML端代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>教师教学经验共享平台</title>
    <link href="css/css.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">
        function ChangeCode() {

            var date = new Date();
            var myImg = document.getElementById("ImageCheck");
            var GUID = document.getElementById("lblGUID");

            if (GUID != null) {
                if (GUID.innerHTML != "" && GUID.innerHTML != null) {
                    myImg.src = "admin/VdCode.aspx?GUID=" + GUID.innerHTML + "&flag=" + date.getMilliseconds()

                }
            }
            return false;
        }
    </script>
</head>
<body>
    <form runat="server" id="from1">
    <div class="zhong">
        <ucl:head1 runat="server" ID="top" />
        <div class="main">
            <div style="border: 1px solid #ccc; height: 300px;">
                <div style="background: url(images/bg_12.png); text-align: left; height: 30px; line-height: 30px">
                     用户登录</div>
                <table width="50%" border="0" cellspacing="5" align="left" cellpadding="0">
                    <tr>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td width="32%" height="37" align="right" valign="middle">
                            登录账号：
                        </td>
                        <td width="68%" valign="middle" align="left">
                            <input type="text" name="textfield" id="txtName" style="width: 200px" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td height="37" valign="middle" align="right">
                            登录密码：
                        </td>
                        <td valign="middle" align="left">
                            <input type="password" name="textfield2" id="txtPwd" style="width: 200px" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td height="37" valign="middle" align="right">
                            验 证 码：<asp:Label ID="lblGUID" runat="server" Style="display: none"></asp:Label>
                        </td>
                        <td valign="middle" align="left">
                            <input type="text" name="textfield3" id="CheckCode" runat="server" style="float: left" />
                            <a id="A2" href="" οnclick="ChangeCode();return false;">
                                <asp:Image ID="ImageCheck" runat="server" ImageUrl="admin/VdCode.aspx?GUID=GUID"
                                    ImageAlign="AbsMiddle" ToolTip="看不清，换一个"></asp:Image>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                        </td>
                        <td align="left">
                            <asp:ImageButton ImageUrl="images/login.png" runat="server" ID="ibLogin" OnClick="ibLogin_Click" />
                        </td>
                    </tr>
                </table>
                <table width="50%" border="0" cellspacing="5" align="right" cellpadding="0">
                    <tr>
                        <td style="height: 200px; width: 1px; background: #ccc;">
                        </td>
                        <td align="center">
                            现在还没有账号<a href="reg.aspx">立即注册</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="bottom">
            教师教学经验共享平台
        </div>
    </div>
    </form>
</body>
</html>

后台代码实现：

public partial class VdCode : System.Web.UI.Page
{
        private void Page_Load(object sender, System.EventArgs e)
        {
            string checkCode = GetRandomCode(4);
            Session["CheckCode"] = checkCode;
            SetPageNoCache();
            CreateImage(checkCode);
        }

        /// <summary>
        /// 设置页面不被缓存
        /// </summary>
        private void SetPageNoCache()
        {
            Response.Buffer = true;
            Response.ExpiresAbsolute = System.DateTime.Now.AddSeconds(-1);
            Response.Expires = 0;
            Response.CacheControl = "no-cache";
            Response.AppendHeader("Pragma", "No-Cache");
        }

        private string CreateRandomCode(int codeCount)
        {
            string allChar = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,i,J,K,M,N,P,Q,R,S,T,U,W,X,Y,Z";
            string[] allCharArray = allChar.Split(',');
            string randomCode = "";
            int temp = -1;

            Random rand = new Random();
            for (int i = 0; i < codeCount; i++)
            {
                if (temp != -1)
                {
                    rand = new Random(i * temp * ((int)DateTime.Now.Ticks));
                }
                int t = rand.Next(35);
                if (temp == t)
                {
                    return CreateRandomCode(codeCount);//性能问题
                }
                temp = t;
                randomCode += allCharArray[t];
            }
            return randomCode;
        }
        private string GetRandomCode(int CodeCount)
        {
            string allChar = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,i,J,K,M,N,P,Q,R,S,T,U,W,X,Y,Z";
            string[] allCharArray = allChar.Split(',');
            string RandomCode = "";
            int temp = -1;

            Random rand = new Random();
            for (int i = 0; i < CodeCount; i++)
            {
                if (temp != -1)
                {
                    rand = new Random(temp * i * ((int)DateTime.Now.Ticks));
                }

                int t = rand.Next(33);

                while (temp == t)
                {
                    t = rand.Next(33);
                }

                temp = t;
                RandomCode += allCharArray[t];
            }

            return RandomCode;
        }
        private void CreateImage(string checkCode)
        {
            int iwidth = (int)(checkCode.Length * 14);
            System.Drawing.Bitmap image = new System.Drawing.Bitmap(iwidth, 20);
            Graphics g = Graphics.FromImage(image);
            Font f = new System.Drawing.Font("Arial ", 10);//, System.Drawing.FontStyle.Bold);
            Brush b = new System.Drawing.SolidBrush(Color.Black);
            Brush r = new System.Drawing.SolidBrush(Color.FromArgb(166, 8, 8));

            //g.FillRectangle(new System.Drawing.SolidBrush(Color.Blue),0,0,image.Width, image.Height);
            //			g.Clear(Color.AliceBlue);//背景色
            g.Clear(System.Drawing.ColorTranslator.FromHtml("#99C1CB"));//背景色

            char[] ch = checkCode.ToCharArray();
            for (int i = 0; i < ch.Length; i++)
            {
                if (ch[i] >= '0' && ch[i] <= '9')
                {
                    //数字用红色显示
                    g.DrawString(ch[i].ToString(), f, r, 3 + (i * 12), 3);
                }
                else
                {   //字母用黑色显示
                    g.DrawString(ch[i].ToString(), f, b, 3 + (i * 12), 3);
                }
            }

            //for循环用来生成一些随机的水平线
            //			Pen blackPen = new Pen(Color.Black, 0);
            //			Random rand = new Random();
            //			for (int i=0;i<5;i++)
            //			{
            //				int y = rand.Next(image.Height);
            //				g.DrawLine(blackPen,0,y,image.Width,y);
            //			}

            System.IO.MemoryStream ms = new System.IO.MemoryStream();
            image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
            //history back 不重复 
            Response.Cache.SetNoStore();//这一句 		
            Response.ClearContent();
            Response.ContentType = "image/Jpeg";
            Response.BinaryWrite(ms.ToArray());
            g.Dispose();
            image.Dispose();
        }        
    }