【JavaScript】网页登录程序之验证码篇

最新推荐文章于 2023-02-14 11:16:27 发布

Mr小林

最新推荐文章于 2023-02-14 11:16:27 发布

阅读量792

点赞数 1

分类专栏： ------【Web前端】

本文链接：https://blog.csdn.net/mrlin6688/article/details/50249671

版权

------【Web前端】专栏收录该内容

24 篇文章 0 订阅

订阅专栏

【前言】

相信大家在各大网站、论坛上注册、登录、回帖时，都有遇到过验证码问题。虽然验证码让我们有一点小小的麻烦，但是它给我们带来了很大的好处。它可以防止利用恶意程序批量注册、发帖、灌水还能有效的防止黑客暴力破解密码。验证码虽然一般只有简单的几个字符，但是它的作用着实不小啊！下面我们就一起看看如何实现网站中的验证码。

下面是代码实现：

生成验证码：

using System;  
using System.Web;  
using System.Drawing;  
using System.Drawing.Drawing2D;  
using System.Web.SessionState;  
  
namespace Web.handler  
{  
    /// <summary>  
    /// WaterMark 的摘要说明  
    /// </summary>  
    public class WaterMark : IHttpHandler, IRequiresSessionState  // 要使用session必须实现该接口,记得要导入System.Web.SessionState命名空间  
    {  
        public void ProcessRequest(HttpContext context)  
        {  
            string checkCode = GenCode(5);  // 产生5位随机字符  
            context.Session["Code"] = checkCode; //将字符串保存到Session中，以便需要时进行验证  
            System.Drawing.Bitmap image = new System.Drawing.Bitmap(70, 22);  
            Graphics g = Graphics.FromImage(image);  
            try  
            {  
                //生成随机生成器  
                Random random = new Random();  
  
                //清空图片背景色  
                g.Clear(Color.White);  
  
                // 画图片的背景噪音线  
                int i;  
                for (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, y1, x2, y2);  
                }  
  
                Font font = new System.Drawing.Font("Arial", 12, (System.Drawing.FontStyle.Bold));  
                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(checkCode, font, brush, 2, 2);  
  
                //画图片的前景噪音点  
                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);  
                context.Response.ClearContent();  
                context.Response.ContentType = "image/Gif";  
                context.Response.BinaryWrite(ms.ToArray());  
            }  
            finally  
            {  
                g.Dispose();  
                image.Dispose();  
            }  
        }  
  
        /// <summary>  
        /// 产生随机字符串  
        /// </summary>  
        /// <param name="num">随机出几个字符</param>  
        /// <returns>随机出的字符串</returns>  
        private string GenCode(int num)  
        {  
        //验证码中出现的字符  
            string str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; //str中的值就是将来会在验证码中出现的字符  
            char[] chastr = str.ToCharArray();  
            
            string code = "";  
            Random rd = new Random();  
            int i;  
            for (i = 0; i < num; i++)  
            {  
                //code += source[rd.Next(0, source.Length)];  
                code += str.Substring(rd.Next(0, str.Length), 1);  
            }  
            return code;  
  
        }  
  
        public bool IsReusable  
        {  
            get  
            {  
                return false;  
            }  
        }  
  
    }  
  
}

刷新验证Html和JavaScript

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="nwessystem.Login" %>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>登录窗体</title>  
    <link href="../css/login.css" rel="stylesheet" type="text/css" />  
        <script language="javascript" type="text/javascript">  
            //刷新验证码的js函数  
            function changeCode() {  
                var imgNode = document.getElementById("vimg");                  
  
                //重新加载验证码，达到刷新的目的  
                imgNode.src = "../handler/WaterMark.ashx?t=" + (new Date()).valueOf();  // 这里加个时间的参数是为了防止浏览器缓存的问题     
            }    
</script>  
</head>  
<body>  
     
            <p>验证码：<img src="../handler/WaterMark.ashx" id="vimg" alt="点击刷新验证码" οnclick="changeCode() "  /><asp:TextBox ID="txtCode" runat="server" CssClass="txtcode"></asp:TextBox></p>  
           
</body>  
</html>

登录时验证是否正确：

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using BLL;  
  
namespace nwessystem  
{  
    public partial class Login : System.Web.UI.Page  
    {  
  
        protected void btnLogin_Click(object sender, EventArgs e)  
        {  
            //检验验证码部分  
            string code = txtCode.Text.Trim().ToUpper();  
            string rightCode = Session["Code"].ToString();  
             
            //判断验证码是否正确  
            if (code != rightCode)  
            {  
                //验证码输入错误！  
                Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('验证码错误！');</script>");  
                return;  
            }  
  
            //检验用户名和密码部分  
            string name=txtName.Text.Trim();  
            string pwd=txtPassword.Text.Trim();  
            bool b = LoginManager.Login(name, pwd);  
  
            if (b)  
            {  
                //登录成功  
                Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('登录成功！');</script>");  
            }  
            else  
            {  
                //登录失败  
                Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('登录失败，用户名或密码错误！');</script>");  
            }  
              
        }  
    }  
}

【结语】

这是很常用的知识点，希望在项目中能够有所帮助。

Mr小林

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
【JavaScript】网页登录程序之验证码篇

【前言】相信大家在各大网站、论坛上注册、登录、回帖时，都有遇到过验证码问题。虽然验证码让我们有一点小小的麻烦，但是它给我们带来了很大的好处。它可以防止利用恶意程序批量注册、发帖、灌水还能有效的防止黑客暴力破解密码。验证码虽然一般只有简单的几个字符，但是它的作用着实不小啊！下面我们就一起看看如何实现网站中的验证码。下面是代码实现：生成验证码：using System; u
复制链接

扫一扫

专栏目录