<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3 login">
<div class="card border-info">
<div class="card-body">
<form action="/" method="post" id="fmLogin">
<div class="form-group row">
<label for="UserName" class="col-sm-3 col-xl-2 col-form-label txtr">用户名</label>
<div class="col-sm-9 col-xl-10">
<input type="text" class="form-control" id="UserName" name="UserNuber" placeholder="请输入您的用户名">
</div>
</div>
<div class="form-group row">
<label for="PassWord" class="col-sm-3 col-xl-2 col-form-label txtr">密 码</label>
<div class="col-sm-9 col-xl-10">
<input type="password" class="form-control" id="PassWord" name="password" placeholder="请输入您的密码">
</div>
</div>
<div class="form-group row">
<label for="IdentifyingCode" class="col-sm-3 col-xl-2 col-form-label txtr">验证码</label>
<div class="col-sm-9 col-xl-10">
<div class="input-group">
<input type="text" class="form-control" id="IdentifyingCode" name="validCode" placeholder="请您输入验证码">
<div class="input-group-prepend">
<img src="/Default/ValidCode" class="input-group-text p-0" id="ValidateCode" />
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="IdentifyingCode" class="col-sm-3 col-xl-2 col-form-label txtr">身 份</label>
<div class="col-sm-9 col-xl-10">
<select id="UserTypeClass" name="UserTypeClass" class="form-control select2 ">
@*<option value="1" >学生</option>
<option value="2" >教师</option>
<option value="3" >管理</option>*@
</select>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-3 offset-lg-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="RememberMe" name="rememberMe" value="true">
<label class="form-check-label" for="RememberMe">
记住我
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-3 offset-lg-2">
<button type="button" class="btn btn-primary px-4" id="btnSubmit">登 陆</button>
<button type="reset" class="btn btn-outline-primary px-4 ml-4" id="">重 置</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="~/Content/js/jquery-3.2.1.min.js"></script>
<script src="~/Content/layui/layui.all.js"></script>
<script src="~/Content/js/customfunction.js"></script>
<script type="text/javascript">
var layer;
$(document).ready(function () {
if (window.top.location.href != window.location.href) {
window.top.location.href = window.location.href;
}
createOption("/Default/SelectUser", "UserTypeClass");
});
layui.use(['layer'], function () {
layer = layui.layer;
})
$("#ValidateCode").click(function () {
$(this).prop("src", "/Default/ValidCode?t=" + new Date().getTime());
});
$("#btnSubmit").click(function () {
//===登录逻辑
//获取值
var UserName = $('#fmLogin [name="UserNuber"]').val();
var password = $('#fmLogin [name="password"]').val();
var validCode = $('#fmLogin [name="validCode"]').val();
var UserTypeID = $('#fmLogin [name="UserTypeClass"]').val();
var rememberMe = $('#fmLogin [name="rememberMe"]').val();
//判断是否填写数据
if (strValIsNotNull(UserName) && strValIsNotNull(password) && strValIsNotNull(validCode)) {
//异步提交
var layerIndex = layer.load();//开启layer加载层
$.post("/Default/UserLogin", {
account: UserName,
password: password,
roleId: UserTypeID,
validCode: validCode,
rememberMe: rememberMe,
}, function (msg) {
layer.close(layerIndex);//关闭加载层
if (msg.State) {
//layer.alert("登录成功");
//登录成功，跳转到主页面
window.location.replace("/Default/Default");//使用replace不会出现后退按钮
} else {
layer.alert(msg.Text);
//清空密码和验证码
$("#password").val("");
$("#ValidateCode").val("");
//验证码刷新
$("#ValidateCode").click();
}
});
} else {
layer.alert("登录信息请填写完整");
}
})
//字符串值不为空
function strValIsNotNull(strVal) {
return strVal != undefined && strVal != null && strVal != '';
}
</script>
</body>以上是视图的HTML，JS代码，同时需要用到jQuery，layui，bootstrap的插件，同时还需要链接到数据库。
写完视图的代码后还需要写，控制器的代码。在控制器中需要有两个拥有视图的控制器，一个做登录页面，一个做登录完成后的跳转页面。
接着，我们需要有一个控制器用来做验证码的生成。一个用来或去用户类型，一个用来验证用户信息。
//验证码
public ActionResult ValidCode()
{
//生成一个随机字符串 验证码
string strRandom = ValidCodeUtils.GetRandomCode(4);
//将验证码存入Session会话
Session["validCode"] = strRandom;
//byte[] 根据验证码产生图片
byte[] imByte = ValidCodeUtils.CreateImage(strRandom);
return File(imByte, @"image/jpeg");
}当然啦验证码并不会这么简单就能创建的。这个只是控制器中的方法。其中调用了已经封装好的方法了。
/// <summary>
/// 获得随机字符串
/// </summary>
/// <param name="intLength">随机数的长度</param>
/// <returns>随机数字符串</returns>
public static string GetRandomCode(int intLength)
{
/*产生数字和密码混合的随机数*/
string strReturn = string.Empty;
Random random = new Random();//随机数
for (int i = 0; i < intLength; i++)
{
char cRerult;
int intRandom = random.Next();//产生一个非负随机整数
/*根据当前随机数来确定字符串*/
//intRandom % 3 获取的是intRandom/3 得到的余数
if (intRandom % 3 == 0)
{
//产生数字
//位数来产生数字
cRerult = (char)(0x30 + (intRandom % 10));
}
else if (intRandom % 3 == 1)
{
//位数产生大写字母:大写字符 65-97 A 65
//68 D 25 Z
cRerult = (char)(0x41 + (intRandom % 0x1a));
}
else
{
//余数为2
//产生小写字母 98-116
cRerult = (char)(0x61 + (intRandom % 0x1a));
}
strReturn += cRerult.ToString();
}
return strReturn;
}
/// <summary>
/// 根据字符串创建验证码
/// </summary>
/// <param name="strRandom">字符串</param>
/// <returns>图片</returns>
public static byte[] CreateImage(string strRandom)
{
//新增图片
Bitmap newBitmap = new Bitmap(strRandom.Length * 20, 38);
Graphics g = Graphics.FromImage(newBitmap);
g.Clear(Color.White);
//在图片上绘制文字
SolidBrush solidBrush = new SolidBrush(Color.Red);
g.DrawString(strRandom, new Font("Aril", 17), solidBrush, 12, 1);
//在图片上绘制干扰线
Random random = new Random();
for (int i = 0; i < 10; i++)
{
//产生一条线，并绘制到画布。 起始点（x,y） 总结点
int x1 = random.Next(newBitmap.Width);
int y1 = random.Next(newBitmap.Height);
int x2 = random.Next(newBitmap.Width);
int y2 = random.Next(newBitmap.Height);
g.DrawLine(new Pen(Color.DarkGray), x1, y1, x2, y2);
}
//绘制图片的前景干扰点
for (int i = 0; i < 100; i++)
{
int x = random.Next(newBitmap.Width);
int y = random.Next(newBitmap.Height);
newBitmap.SetPixel(x, y, Color.FromArgb(random.Next()));
}
//在最外边绘制边框
g.DrawRectangle(new Pen(Color.Blue), 0, 0, newBitmap.Width, newBitmap.Height);
g.DrawRectangle(new Pen(Color.Blue), -1, -1, newBitmap.Width, newBitmap.Height);
//将图转保存到内存流中
MemoryStream ms = new MemoryStream();
newBitmap.Save(ms, ImageFormat.Jpeg);
return ms.ToArray();//将流内容写入byte数组返回
}这个是封装好的随机生成验证码的代码。当有了验证码之后就需要获取用户类型，我们需要通过控制器向数据库获取数据。
//用户类型
public ActionResult SelectUser()
{
List<SelectVo> list = (from tb in myModel.S_Role
select new SelectVo
{
id = tb.roleId,
text = tb.roleName
}).ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}获取到数据后，在将数据传递到视图的JS代码中，并进行引用。最后一步就是验证页面传入的数据是否与数据库的数据相对应，如果相对应，则跳转到其他的视图中。如果不对应则不做跳转并弹出警告框。
//验证用户信息
public ActionResult UserLogin(S_User user)
{
ReturnJson msg = new ReturnJson();
string account = user.account.Trim();//用户名
string password = user.password.Trim(); //密码
string strValidCode = Request["validCode"].Trim();//验证码
string strIsRember = Request["rememberMe"]; //记住否
//获取处session存放的验证码
string sessionValiCode = "";
try
{
sessionValiCode = Session["validCode"].ToString();
}
catch (Exception e)
{
Console.WriteLine(e);//并不会产生输出，主要是为了避免VS提示e未使用的警告
//throw;
}
//判断填入的验证和session中的验证码是否一致
if (sessionValiCode.Equals(strValidCode, StringComparison.InvariantCultureIgnoreCase))
{
try
{
//查询用户信息 Single单条数据据，当没有数据或者有多条数据时会触发异常
//PW_User modUser = myModel.PW_User.Where(m => m.UserName == strUserName).Single();
S_User modUser = myModel.S_User.Single(m => m.account == account);
//将用户输入的密码进行AES265后与数据库中的密码对比
string Password = AESEncryptHelper.Encrypt(password);
if (modUser.password.Equals(password))
{
if (modUser.roleId == user.roleId)
{
//用户身份验证完成 开始处理登录信息
//获取用户类型名称
msg.State = true;
msg.Text = "登录成功";
Session["UserName"] = account;
}
else
{
msg.Text = "用户类型错误！";
}
}
else
{
msg.Text = "该用户密码错误！";
}
}
catch (Exception e)
{
msg.Text = "该用户不存在";
//throw;
}
}
else
{
msg.Text = "验证码错误！";
}
return Json(msg, JsonRequestBehavior.AllowGet);
}为了保证密码的安全性，作者还对密码进行加密操作，同样也是封装了一个函数。
public class AESEncryptHelper
{
/// <summary>
/// 获取密钥
/// </summary>
private static string Key
{
get { return @")O[NB]6,YF}+efcaj{+oESb9d8>Z'e9M"; }
}
/// <summary>
/// 获取向量
/// </summary>
private static string IV
{
get { return @"L+\~f4,Ir)b$=pkf"; }
}
/// <summary>
/// AES加密
/// </summary>
/// <param name="Data">被加密的明文</param>
/// <param name="Key">密钥</param>
/// <param name="Vector">向量</param>
/// <returns>密文</returns>
public static Byte[] AESEncrypt(Byte[] Data, String Key, String Vector)
{
Byte[] bKey = new Byte[32];
Array.Copy(Encoding.UTF8.GetBytes(Key.PadRight(bKey.Length)), bKey, bKey.Length);
Byte[] bVector = new Byte[16];
Array.Copy(Encoding.UTF8.GetBytes(Vector.PadRight(bVector.Length)), bVector, bVector.Length);
Byte[] Cryptograph = null; // 加密后的密文
Rijndael Aes = Rijndael.Create();
try
{
// 开辟一块内存流
using (MemoryStream Memory = new MemoryStream())
{
// 把内存流对象包装成加密流对象
using (CryptoStream Encryptor = new CryptoStream(Memory,
Aes.CreateEncryptor(bKey, bVector),
CryptoStreamMode.Write))
{
// 明文数据写入加密流
Encryptor.Write(Data, 0, Data.Length);
Encryptor.FlushFinalBlock();
Cryptograph = Memory.ToArray();
}
}
}
catch
{
Cryptograph = null;
}
return Cryptograph;
}
/// <summary>
/// AES解密
/// </summary>
/// <param name="Data">被解密的密文</param>
/// <param name="Key">密钥</param>
/// <param name="Vector">向量</param>
/// <returns>明文</returns>
public static Byte[] AESDecrypt(Byte[] Data, String Key, String Vector)
{
Byte[] bKey = new Byte[32];
Array.Copy(Encoding.UTF8.GetBytes(Key.PadRight(bKey.Length)), bKey, bKey.Length);
Byte[] bVector = new Byte[16];
Array.Copy(Encoding.UTF8.GetBytes(Vector.PadRight(bVector.Length)), bVector, bVector.Length);
Byte[] original = null; // 解密后的明文
Rijndael Aes = Rijndael.Create();
try
{
// 开辟一块内存流，存储密文
using (MemoryStream Memory = new MemoryStream(Data))
{
// 把内存流对象包装成加密流对象
using (CryptoStream Decryptor = new CryptoStream(Memory,
Aes.CreateDecryptor(bKey, bVector),
CryptoStreamMode.Read))
{
// 明文存储区
using (MemoryStream originalMemory = new MemoryStream())
{
Byte[] Buffer = new Byte[1024];
Int32 readBytes = 0;
while ((readBytes = Decryptor.Read(Buffer, 0, Buffer.Length)) > 0)
{
originalMemory.Write(Buffer, 0, readBytes);
}
original = originalMemory.ToArray();
}
}
}
}
catch
{
original = null;
}
return original;
}
/// <summary>
/// AES加密
/// </summary>
/// <param name="plainStr">明文字符串</param>
/// <returns>密文</returns>
public static string AESEncrypt(string plainStr)
{
byte[] bKey = Encoding.UTF8.GetBytes(Key);
byte[] bIV = Encoding.UTF8.GetBytes(IV);
byte[] byteArray = Encoding.UTF8.GetBytes(plainStr);
string encrypt = null;
Rijndael aes = Rijndael.Create();
using (MemoryStream mStream = new MemoryStream())
{
using (CryptoStream cStream = new CryptoStream(mStream, aes.CreateEncryptor(bKey, bIV), CryptoStreamMode.Write))
{
cStream.Write(byteArray, 0, byteArray.Length);
cStream.FlushFinalBlock();
encrypt = Convert.ToBase64String(mStream.ToArray());
}
}
aes.Clear();
return encrypt;
}
/// <summary>
/// AES加密
/// </summary>
/// <param name="plainStr">明文字符串</param>
/// <param name="returnNull">加密失败时是否返回 null，false 返回 String.Empty</param>
/// <returns>密文</returns>
public static string AESEncrypt(string plainStr, bool returnNull)
{
string encrypt = AESEncrypt(plainStr);
return returnNull ? encrypt : (encrypt == null ? String.Empty : encrypt);
}
/// <summary>
/// AES解密
/// </summary>
/// <param name="encryptStr">密文字符串</param>
/// <returns>明文</returns>
public static string AESDecrypt(string encryptStr)
{
byte[] bKey = Encoding.UTF8.GetBytes(Key);
byte[] bIV = Encoding.UTF8.GetBytes(IV);
byte[] byteArray = Convert.FromBase64String(encryptStr);
string decrypt = null;
Rijndael aes = Rijndael.Create();
using (MemoryStream mStream = new MemoryStream())
{
using (CryptoStream cStream = new CryptoStream(mStream, aes.CreateDecryptor(bKey, bIV), CryptoStreamMode.Write))
{
cStream.Write(byteArray, 0, byteArray.Length);
cStream.FlushFinalBlock();
decrypt = Encoding.UTF8.GetString(mStream.ToArray());
}
}
aes.Clear();
return decrypt;
}
/// <summary>
/// AES解密
/// </summary>
/// <param name="encryptStr">密文字符串</param>
/// <param name="returnNull">解密失败时是否返回 null，false 返回 String.Empty</param>
/// <returns>明文</returns>
public static string AESDecrypt(string encryptStr, bool returnNull)
{
string decrypt = AESDecrypt(encryptStr);
return returnNull ? decrypt : (decrypt == null ? String.Empty : decrypt);
}
/// <summary>
/// 256位AES加密
/// </summary>
/// <param name="toEncrypt"></param>
/// <returns></returns>
public static string Encrypt(string toEncrypt)
{
// 256-AES key
byte[] keyArray = UTF8Encoding.UTF8.GetBytes(Key);
byte[] toEncryptArray = UTF8Encoding.UTF8.GetBytes(toEncrypt);
RijndaelManaged rDel = new RijndaelManaged();
rDel.Key = keyArray;
rDel.Mode = CipherMode.ECB;
rDel.Padding = PaddingMode.PKCS7;
ICryptoTransform cTransform = rDel.CreateEncryptor();
byte[] resultArray = cTransform.TransformFinalBlock(toEncryptArray, 0, toEncryptArray.Length);
return Convert.ToBase64String(resultArray, 0, resultArray.Length);
}
/// <summary>
/// 256位AES解密
/// </summary>
/// <param name="toDecrypt"></param>
/// <returns></returns>
public static string Decrypt(string toDecrypt)
{
// 256-AES key
byte[] keyArray = UTF8Encoding.UTF8.GetBytes(Key);
byte[] toEncryptArray = Convert.FromBase64String(toDecrypt);
RijndaelManaged rDel = new RijndaelManaged();
rDel.Key = keyArray;
rDel.Mode = CipherMode.ECB;
rDel.Padding = PaddingMode.PKCS7;
ICryptoTransform cTransform = rDel.CreateDecryptor();
byte[] resultArray = cTransform.TransformFinalBlock(toEncryptArray, 0, toEncryptArray.Length);
return UTF8Encoding.UTF8.GetString(resultArray);
}
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
