登录流程图

示例预览

构建步骤

当然,你也可以直接之前前往coding仓库查看源码,要是发现bug记得提醒我啊~ LoginDemo地址

1. 首先你得有一个项目

2. 然后你需要一个登录页面

完整Login.cshtml视图代码戳这里-共计55行

效果预览图

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录界面</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
body { color: #fff; font-family: "微软雅黑"; font-size: 14px; background: url('https://dn-coding-net-production-pp.qbox.me/96ec8cc7-0e5f-4217-b853-4a88c15579f3.png') no-repeat; }
.wrap1 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; height: 450px; }
/*把整个屏幕真正撑开--而且能自己实现居中*/
.main_content { background: url(https://dn-coding-net-production-pp.qbox.me/2ed70a05-04ad-4ccf-81d4-bc1fad2b6e41.png) repeat; margin-left: auto; margin-right: auto; text-align: left; float: none; border-radius: 8px; }
.form-group { position: relative; }
.login_btn { display: block; background: #3872f6; color: #fff; font-size: 15px; width: 100%; line-height: 50px; border-radius: 3px; border: none; }
.login_input { width: 100%; border: 1px solid #3872f6; border-radius: 3px; line-height: 40px; padding: 2px 5px 2px 30px; background: none; }
.icon_font { position: absolute; top: 12px; left: 10px; font-size: 18px; color: #3872f6; }
.font16 { font-size: 16px; }
.mg-t20 { margin-top: 20px; }
@media (min-width:200px) {.pd-xs-20 { padding: 20px; }}
@media (min-width:768px) {.pd-sm-50 { padding: 50px; }}
#grad { background: -webkit-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Firefox 3.6 - 15 */ background: linear-gradient(#4990c1, #52a3d2, #6186a3); /* 标准的语法 */ }
/*==jquery.validate css==*/
.field-validation-error { color: #e14430 !important; padding-top: 5px; }
.input-validation-error { border-color: #d38e99; }
</style>
</head>
<body>
<div class="container wrap1">
<h2 class="mg-b20 text-center">后台管理系统</h2>
<div class="col-sm-8 col-md-5 center-auto pd-sm-50 pd-xs-20 main_content">
<p class="text-center font16">用户登录</p>
<form asp-action="Login" method="post" >
<div class="form-group mg-t20">
<i class="icon_font glyphicon glyphicon-user"></i>
<input type="text" class="login_input" asp-for="UserName" placeholder="请输入用户名" autofocus />
<span asp-validation-for="UserName"></span>
</div>
<div class="form-group mg-t20">
<i class="icon_font glyphicon glyphicon-lock"></i>
<input type="password" class="login_input" asp-for="UserPwd" placeholder="请输入密码" />
<span asp-validation-for="UserPwd"></span>
</div>
<div class="checkbox mg-b25 hide">
<label>
<input type="checkbox">记住我的登录信息
</label>
</div>
<button type="submit" class="login_btn">登 录</button>
</form>
</div>
</div>
</body>
</html>

3. 然后你需要一个登录的控制器AccountController

控制器里面至少拥有一个呈现登录页的action,一个接收登录请求的action,一个退出的action

·登录· 判断是否存在用户,将用户名或者用户ID加密后记录到cookie中,跳转到管理页

·退出· 将cookie移出掉,跳转到登录页

加密的方法可自行切换为其他的加密方法

    public class AccountController : Controller
{
private readonly IUserService _userService;
public AccountController(IUserService userService)
{
_userService = userService;
} public IActionResult Login()
{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Login(AccountModel model)
{
//验证模型是否正确
if (!ModelState.IsValid)
{
return View(model);
}
//调用服务验证用户名密码
if (!_userService.Login(model.UserName, model.UserPwd))
{
ModelState.AddModelError(nameof(model.UserPwd), "用户名或密码错误");
return View();
}
//加密用户名写入cookie中,AdminAuthorizeAttribute特性标记取出cookie并解码除用户名
var encryptValue = _userService.LoginEncrypt(model.UserName, ApplicationKeys.User_Cookie_Encryption_Key);
HttpContext.Response.Cookies.Append(ApplicationKeys.User_Cookie_Key, encryptValue);
return Redirect("/");
}
public IActionResult Logout()
{
HttpContext.Response.Cookies.Delete(ApplicationKeys.User_Cookie_Key);
return Redirect(WebContext.LoginUrl);
}
}

4. 然后还需要一个身份验证的特性标记AdminAuthorizeAttribute

本文只是简单的验证是否登录,关于更复杂的权限验证可参考文章:http://www.cnblogs.com/morang/p/7606843.html,以及示例项目

将此特性标记加到需要的地方即可在访问时验证用户是否登录,未登录则跳转到登录页。

    public class AdminAuthorizeAttribute : Attribute, IAuthorizationFilter
{
public void OnAuthorization(AuthorizationFilterContext filterContext)
{
if (string.IsNullOrEmpty(WebContext.AdminName))
{
if (filterContext.HttpContext.Request.Headers["X-Requested-With"] == "XMLHttpRequest")
{
filterContext.Result = new JsonResult("未登录");
}
else
{
filterContext.Result = new RedirectResult("Account/Login");
}
return;
}
}
}

上面特性标记代码中的WebContext.AdminName是如何取到的呢?还需要结合如下代码

    //服务定位器
public static class ServiceLocator
{
public static IServiceProvider Instance { get; set; }
public static T GetService<T>() where T : class
{
return Instance.GetService<T>();
} }
//一些通用的信息
public static class WebContext
{
public static string AdminName
{
get
{
//获取cookie
var hasCookie = ServiceLocator.GetService<IHttpContextAccessor>()
.HttpContext
.Request.Cookies
.TryGetValue(ApplicationKeys.User_Cookie_Key, out string encryptValue);
if (!hasCookie || string.IsNullOrEmpty(encryptValue))
return null;
var adminName = ServiceLocator.GetService<IUserService>().LoginDecrypt(encryptValue, ApplicationKeys.User_Cookie_Encryption_Key);
return adminName;
}
}
public const string LoginUrl = "/account/login";
}
//全局的一些Key值
public class ApplicationKeys
{
public const string User_Cookie_Encryption_Key = "User_Cookie_Encryption_Key"; public const string User_Cookie_Key = "User_Cookie_Key";
} //Startup
public void ConfigureServices(IServiceCollection services)
{
services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();//用于获取请求上下文
services.AddTransient<IUserService, UserService>();
services.AddMvc();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
//app.UseMvc()..
//最末的时候赋值
ServiceLocator.Instance = app.ApplicationServices;
}

代码说明

  1. 首先定义了一个存放服务的静态对象:ServiceLocator
  2. 在程序启动后将IApplicationBuilder.ApplicationServices赋值给ServiceLocator.Instance,这样就能够在任何地方使用ServiceLocator.Instance获取到注入的服务

    (为了更好的获取实例添加了一个T GetService<T>()方法)
  3. 在WebContext中取获取Cookie值:ServiceLocator.GetService<IHttpContextAccessor>().HttpContext.Request.Cookies
  4. 解密获取的cookie得到用户名:ServiceLocator.GetService<IUserService>().LoginDecrypt(encryptValue, ApplicationKeys.User_Cookie_Encryption_Key);
  5. 所以在后台就能使用WebContext.AdminName获取到当前登录用户名,或者根据用户名获取登录信息

总结

  • 自定义特性标记和过滤器之间差开一个IFilterMetadata,换言之:特性标记实现了IFilterMetadata就等于是个过滤器(个人理解)
  • asp.net core中模型绑定使用asp-for
  • asp.net core注入服务: 在 Startup.ConfigureServices方法中注入 services.AddTransient<IUserService, UserService>()
  • asp.net core获取HttpContext对象 参考:ASP.NET Core开发之HttpContext

ASP.NET Core中提供了一个IHttpContextAccessor接口,HttpContextAccessor 默认实现了它简化了访问HttpContext

它必须在程序启动时在IServicesCollection中注册,这样在程序中就能获取到HttpContextAccessor,并用来访问HttpContext

services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();

Demo下载地址

探索学习中,若有错误或者不足指出还望园友指出。

asp.net core后台系统登录的快速构建的更多相关文章

  1. ASP.NET Core模块化前后端分离快速开发框架介绍之4、模块化实现思路

    源码 GitHub:https://github.com/iamoldli/NetModular 演示地址 地址:https://nm.iamoldli.com 账户:admin 密码:admin 前 ...

  2. ASP.NET Core模块化前后端分离快速开发框架介绍之2、快速创建一个业务模块

    源码地址 GitHub:https://github.com/iamoldli/NetModular 演示地址 地址:https://nm.iamoldli.com 账户:admin 密码:admin ...

  3. 在 ASP.NET Core Web API中使用 Polly 构建弹性容错的微服务

    在 ASP.NET Core Web API中使用 Polly 构建弹性容错的微服务 https://procodeguide.com/programming/polly-in-aspnet-core ...

  4. ASP.NET Core模块化前后端分离快速开发框架介绍之1、开篇

    源码地址 GitHub:https://github.com/iamoldli/NetModular 演示地址 地址:https://nm.iamoldli.com 账户:admin 密码:admin ...

  5. ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件-开源

    ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件- ...

  6. ASP.NET Core AD 域登录

    在选择AD登录时,其实可以直接选择 Windows 授权,不过因为有些网站需要的是LDAP获取信息进行授权,而非直接依赖Web Server自带的Windows 授权功能. 当然如果使用的是Azure ...

  7. 【.NET Core】ASP.NET Core之IdentityServer4(1):快速入门

    [.NET Core]ASP.NET Core之IdentityServer4 本文中的IdentityServer4基于上节的jenkins 进行docker自动化部署. 使用了MariaDB,EF ...

  8. .NET 黑魔法 - asp.net core 日志系统

    asp.net core 里如何记录日志呢? 这要从asp.net core的依赖注入说起,在asp.net core里的依赖注入真是无所不在,各种面向切面的接口与事件. 好吧,来点干货. 首先,我们 ...

  9. ASP.NET Core AD 域登录 (转载)

    在选择AD登录时,其实可以直接选择 Windows 授权,不过因为有些网站需要的是LDAP获取信息进行授权,而非直接依赖Web Server自带的Windows 授权功能. 当然如果使用的是Azure ...

随机推荐

  1. iconfont 字库入门到精通

    字库使用必备三步骤 第一步:使用font-face声明字体 @font-face {font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9* ...

  2. macaca测试web小例子

    上午刚把macaca的环境在公司的电脑上吧web 端的环境给搭建好,于是乎,看看网上的例子,看看官方的文档 https://macacajs.github.io/wd.py/ 可以在这个链接看到原滋原 ...

  3. 对Appium的认识 get

    介绍 Appium是一个开源.跨平台的测试框架,可以用来测试原生及混合的移动端应用.Appium支持iOS.Android及FirefoxOS平台测试.Appium使用WebDriver的json w ...

  4. javaScript手记(01)

    --------------------javaScript基础1.嵌入页面的方式 1.行间事件(主要用于事件): <input type="button" name=&qu ...

  5. C# 单例模式(Singleton Pattern)(转SuagrMatl)

    单例模式的定义: 确保一个类只有一个实例,并提供一个全局访问点. 首先实例大家应该都明白就是类生成对象的过程简单的就是String s=new String(),则s就是个实例. Q:如何只生成一个实 ...

  6. Python Counter class

    Counter class https://docs.python.org/2/library/collections.html#collections.Counter # class collect ...

  7. java_jstl 标签库

    jstl标签库的使用以及介绍 jstl:jsp标准标签库,是jsp的标签集合,它里面封装了jsp通用的核心功能,比如:建构化的任务,迭代,条件判断,xml 文档的操作,国际化标签,sql标签,还提供框 ...

  8. 制作Visual Studio 2017 (VS 2017) 离线安装包

    史上功能最强大的Visual Studio 2017版本发布,但是由于版本更新速度加快和与第三方工具包集成的原因,微软研发团队没有为这个版本提供离线下载的安装文件.如果用户处在一个与外网隔离的网络环境 ...

  9. MySQL (八)-- 事务、变量、触发器

    1 事务 需求:有一张银行账户表,A用户给B用户转账,A账户先减少,B账户增加,但是A操作完之后断电了. 解决方案:A减少钱,但是不要立即修改数据表,B收到钱之后,同时修改数据表. 事务:一系列要发生 ...

  10. 团队作业8——第二次项目冲刺(Beta阶段)--第五天

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 学号 成员 贡献比 201421123001 廖婷婷 15% 201421123002 翁珊 16% 201421123004 ...