Membership添加验证码登录

1.在公共类ImageHelper中编写公共方法，产生随机验证码

　　　　　　　　/// <summary>
            /// 产生随机验证码
            /// </summary>
            /// <returns></returns>
            public string GetString()
            {
                string randString = "";
                Random random = new Random();
                do
                {
                    //使用DateTime.Now.Millisecond作为生成随机数的参数，增加随机性
                    randString += RandCharString.Substring(random.Next(DateTime.Now.Millisecond) % RandCharString.Length, );
                }
                while (randString.Length < );
                return randString;
            }
　　　　　　　　/// <summary>
            /// 获得图片
            /// </summary>
            /// <param name="checkCode"></param>
            /// <returns></returns> public Image GetImage(string checkCode)
　　　　　　　　public Image GetImage(string checkCode)
            {
                //颜色列表，用于验证码、噪线、噪点
                Color[] color = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.Brown, Color.DarkBlue };
                //字体列表，用于验证码
                string[] font = { "Times New Roman", "MS Mincho", "Book Antiqua", "Gungsuh", "PMingLiU", "Impact" };
                Random rnd = new Random();
                Bitmap bmp = new Bitmap(, );
                Graphics g = Graphics.FromImage(bmp);
                g.Clear(Color.White);
                //画噪线
                for (int i = ; i < ; i++)
                {
                    int x1 = rnd.Next();
                    int y1 = rnd.Next();
                    int x2 = rnd.Next();
                    int y2 = rnd.Next();
                    Color clr = color[rnd.Next(color.Length)];
                    g.DrawLine(new Pen(clr), x1, y1, x2, y2);
                }
                //画验证码字符串
                for (int i = ; i < checkCode.Length; i++)
                {
                    string fnt = font[rnd.Next(font.Length)];
                    Font ft = new Font(fnt, );
                    Color clr = color[rnd.Next(color.Length)];
                    g.DrawString(checkCode[i].ToString(), ft, new SolidBrush(clr), (float)i *  + , (float));
                }
                //画噪点
                for (int i = ; i < ; i++)
                {
                    int x = rnd.Next(bmp.Width);
                    int y = rnd.Next(bmp.Height);
                    Color clr = color[rnd.Next(color.Length)];
                    bmp.SetPixel(x, y, clr);
                }
                g.Dispose();
                return bmp;
            }

2.新建一个页面，前台不要添加代码，在cs中添加一下函数

    protected void Page_Load(object sender, EventArgs e)
    {        
　　　　　ImageHelper.ImageHelper randImage = new ImageHelper.ImageHelper();//调用公共类方法
        string checkCode = randImage.GetString();//获取随机串
        System.Drawing.Image bmp = randImage.GetImage(checkCode);
        HttpCookie cookie = new HttpCookie("CheckCode",checkCode);//新建Cookie值
        Response.AppendCookie(cookie);
        //清除该页输出缓存，设置该页无缓存
        Response.Buffer = true;
        Response.ExpiresAbsolute = System.DateTime.Now.AddMilliseconds();
        Response.Expires = ;
        Response.CacheControl = "no-cache";
        Response.AppendHeader("Pragma", "No-Cache");
        //将验证码图片写入内存流，并将其以 "image/Png" 格式输出
        MemoryStream ms = new MemoryStream();
        try
        {
            bmp.Save(ms, ImageFormat.Png);
            Response.ClearContent();
            Response.ContentType = "image/Png";
            Response.BinaryWrite(ms.ToArray());
        }
        finally
        {
            //显式释放资源
            bmp.Dispose();
        }
}

3.登录页面前台

<table width="40%">
        <tr>
            <td>
                <asp:Label runat="server" Text="用户名"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="txtUserName" CssClass="red"
                            ErrorMessage="必须填写“用户名”。"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label runat="server" Text="密码"></asp:Label>
            </td>
            <td>
                <asp:TextBox runat="server" ID="txtPassword" TextMode="Password"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtPassword" CssClass="red"
                            ErrorMessage="必须填写“密码”" ></asp:RequiredFieldValidator>
            </td>
        </tr>
    </table>
    <table width="50%">
        <tr>
            <td>
                <asp:TextBox ID="txtCheckCode" runat="server" Width="">
                </asp:TextBox>
                 <asp:Image ID="img" runat="server" />
                    <a href="javascript:change()">看不清？换一张</a>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtCheckCode" CssClass="red"
                    ErrorMessage="校验码必填"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnLogin"
                    runat="server" Text="登录" onclick="btnLogin_Click" />
            </td>
        </tr>
    </table>

其中，“看不清？换一张”连接的点击事件函数

<script type="text/javascript">
    function change() {
        document.getElementById('<%=img.ClientID %>').src = document.getElementById('<%=img.ClientID %>').src + '?';
    }
</script>
这里，使用'<%=img.ClientID %>'获取Image控件的ID值，是因为使用了母板页，导致获取的ID将不是原先定义的“img”，而是“Maincontent_img”，
运行程序，在图片上右击-查看元素可发现

aaarticlea/png;base64,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" alt="" />

如果document.getElementById('img').src就获取不到Image的地址了

4.登录页面后台

    protected void Page_Load(object sender, EventArgs e)
    {

        img.ImageUrl = "Check.aspx";
    }
    protected void btnLogin_Click(object sender, EventArgs e)
    {

        string str = Request.Cookies["CheckCode"].Value.ToString();//获取Cookies值
        if (txtCheckCode.Text.Trim().Equals(str))
        {
            bool isok = Membership.ValidateUser(txtUserName.Text.Trim(), txtPassword.Text.Trim());//验证登录用户名、密码
            if (isok)
            {
                FormsAuthentication.SetAuthCookie(txtUserName.Text.Trim(), false);//验证通过，登录账户
                Response.Redirect("Default.aspx");
            }
            else
            {
                Page.ClientScript.RegisterStartupScript(this.GetType(), "err", "alert('登录失败');", true);
            }
        }
        else
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(), "err", "alert('验证码输入错误');", true);
        }

    }

到此，就能够通过Membership实现带有验证码的登录了