前面为了方便我们只是简单实现了基本业务功能的增删改查,但是登录功能还没有实现,而登录又是系统所必须的,得益于 ASP.NET Core的可扩展性因此我们很容易实现我们的登录功能。今天我将带着大家一起来实现下我们的ASP.NET Core2.2开发的CMS系统的登录及验证码功能。如果你觉得文中有任何不妥的地方还请留言或者加入DotNetCore实战千人交流群637326624跟大伙进行交流讨论吧!

本文已收录至《.NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划

作者:依乐祝

原文地址:https://www.cnblogs.com/yilezhu/p/10309647.html

写在前面

距离上一篇教程已经过去九天了,为什么这么久才更新呢?最近年终事情比较多,也比较忙,再加上上一篇文章的阅读量不高,也就没有更新的积极性了,所以更新有点滞后!好吧,我承认上面都是我的借口,其实我是想多整点干货来分享,也在思考怎么样的写作方式才更能被大伙所接收吧,所以今天才来更新。本文分两部分,第一部分是验证码的功能实现,第二部分是登录功能实现~

验证码功能实现

这里有人会说,验证码功能实现不是很简单嘛,有必要还单独开一个小节来说明嘛!其实我想说,验证码功能的实现的确很简单,但是如果要实现验证码功能的跨平台使用的话就稍微麻烦点了。好在我前几天看到了汪宇杰(微软MVP)的一篇关于验证码的文章,因此稍加修改在我们的CMS系统中进行了实现!昨天跟汪宇杰在聊的时候,听他说,他已经把这个验证码模块制作成了Nuget包,更方便大伙的使用,他的这个验证码模块的GitHub:https://github.com/EdiWang/Edi.Captcha.AspNetCore 有兴趣的可以看下源码。

验证码实现流程

我们知道一个简单的验证码的实现原理是生成一串随机字符(数字或字母),将字符串保存到Session中,同时生成一张图片用来显示在网页上。当用户提交内容到服务器的时,服务器检查用户输入的验证码是否与Session中的一致,以此判断验证码是否正确。流程如下图:

实现流程

  1. 首先我们需要在项目的生成操作中,如下图所示:勾选-》“允许不安全代码”

  2. 由于我们需要使用 System.Drawing.Imaging 命名空间里的类型来生成图片,所以我们也需要安装一个NuGet包:

    Install-Package System.Drawing.Common -Version 4.5.1
  3. 上面的流程中你可以看到我们需要用到Session来进行验证码的存储,所以我们也需要在ASP.NET Core2.2中启用Session支持。在Startup.cs里加入:

     services.AddSession(options =>
    {
    options.IdleTimeout = TimeSpan.FromMinutes(15);
    options.Cookie.HttpOnly = true;
    }); app.UseSession();

    上面的代码你应该能看懂吧,一个在ConfigureServices 中加入依赖,一个在Configure中开启中间件

    注意:Session依赖Cookie才能工作,所以请确保用户首先接受GDPR cookie策略,这是ASP.NET Core 2.1默认模板里添加的

  4. 具体的生成代码,我就不贴出来了,有兴趣的朋友可以下载我们的CMS系统的源码进行查看,我只贴出来怎么用,验证码的实现代码路径如下图所示:

  5. 由于我们后台系统只有登录页面需要用到这个验证码,因此我把这个生成验证码图片的操作放在了AccountController.cs控制器里面,代码如下所示:

    上图描述的很清晰了,所以这里我就不详细阐述了,上面包含了生成过程,session存储过程,返回图片的处理等等。

  6. 页面中加载图片,代码如下:

  7. 当然为了体现我们的专业性我们还需要实现点击图片刷新验证码的功能,如下图所示:

  8. 相应的我们要对验证码进行下验证,这里我们加入忽略大小写的验证规则:

    private bool ValidateCaptchaCode(string userInputCaptcha)
    {
    var isValid = userInputCaptcha.Equals(HttpContext.Session.GetString(CaptchaCodeSessionName), StringComparison.OrdinalIgnoreCase);
    HttpContext.Session.Remove(CaptchaCodeSessionName);
    return isValid;
    }

登录功能实现

回想一下我们之前的登录实现过程,登陆成功后再把登录信息保存到Cookies或者Session里面,而在ASP.NET Core中我们知道,借助ASP.NET Core Identity 我们可以实现一个用于创建和维护用户登录的完整的,功能齐全的身份验证提供程序。当然,这里为了实现我们自己的登录逻辑,所以我们只使用基于基于cookie的身份验证,即将基于cookie的身份验证用作没有ASP.NET Core Identity的独立身份验证提供程序。

登录流程

登录流程如下图所示:

这里的流程很简单,相信大伙扫一眼应该就能明白.

功能实现

这一小节我们就来一步一步的实现我们的登录功能吧,在开始之前呢,先看下我们的登录界面,如下图所示:

  1. 由于我们这里用到了基于cookie的身份认证,所以如果应用程序没有使用Microsoft.AspNetCore.App元数据包,那么你需要再你的项目文件中添加Microsoft.AspNetCore.Authentication.Cookies Nuget包(版本2.1.0或更高版本

  2. ConfigureServices 方法中,通过添加AddAuthentication以及AddCookie方法来注入身份认证服务,代码如下:

  3. 当然你还得在Configure 中启用认证服务

  4. 接下来就是登录页面的加载代码如下:

    这里有一个returnUrl 用来返回退出前的页面,默认返回首页

  5. 这里页面js的判断流程的js代码我就不贴出来了,如果有兴趣你可以访问文章底部的Github上的源码进行查看

  6. 代码提交后我们要首先验证验证码是否有效,然后判断错误次数是否超了,然后再次对实体进行规则性验证,最后才进行登录的操作,具体的代码有点长,下面只贴出部分重要的代码

    判断验证码是否有效:

    判断错误次数是否超过规定的最大允许错误数:

    服务端对实体代码规则判断:

    登陆的具体代码:

    这里登录成功就进行登录次数,最后登录时间以及IP的记录,然后写入管理员操作日志中.

    最后所有验证通过后,直接调用HttpContext.SignInAsync 方法即可登录成功.这里我们在Claim中存放了很多我们后面需要用到的信息.

  7. 页面中处理返回结果,成功则调整到'ReturnUrl' 不成功则停留在登录页面.

  8. 好了,登录功能到现在就演示完成了,我们登录测试下,然后看一下吧!

    当没有输入验证码时:

    当验证码长度输入错误时:

    登陆成功时进入主界面!

  9. 当然我们我们还得实现下退出的功能哦!本来这里也想加入一些特殊的验证的,想想还是算了,就这样简单的实现下吧!

开源地址

这个系列教程的源码我会开放在GitHub以及码云上,有兴趣的朋友可以下载查看!觉得不错的欢迎Star

GitHub:https://github.com/yilezhu/Czar.Cms

码云:https://gitee.com/yilezhu/Czar.Cms

如果你觉得这个系列对您有所帮助的话,欢迎以各种方式进行赞助,当然给个Star支持下也是可以滴!另外一种最简单粗暴的方式就是下面这种直接关注我们的公众号了:

总结

本文我带着你一步一步的实现了登录页面的功能,包括验证及登录的过程,认证和校验使用的时asp.net core中基于cookie的身份验证组件,希望对您有所帮助,下一节我们就根据登陆的信息来加载用户权限菜单以及权限功能的校验,再次感谢大家的查看!

.NET Core实战项目之CMS 第十六章 用户登录及验证码功能实现的更多相关文章

  1. .NET Core实战项目之CMS 第十五章 各层联动工作实现增删改查业务

    连着两天更新叙述性的文章大家可别以为我转行了!哈哈!今天就继续讲讲我们的.NET Core实战项目之CMS系统的教程吧!这个系列教程拖得太久了,所以今天我就以菜单部分的增删改查为例来讲述下我的项目分层 ...

  2. .NET Core实战项目之CMS 第十二章 开发篇-Dapper封装CURD及仓储代码生成器实现

    本篇我将带着大家一起来对Dapper进行下封装并实现基本的增删改查.分页操作的同步异步方法的实现(已实现MSSQL,MySql,PgSQL).同时我们再实现一下仓储层的代码生成器,这样的话,我们只需要 ...

  3. .NET Core实战项目之CMS 第十四章 开发篇-防止跨站请求伪造(XSRF/CSRF)攻击处理

    通过 ASP.NET Core,开发者可轻松配置和管理其应用的安全性. ASP.NET Core 中包含管理身份验证.授权.数据保护.SSL 强制.应用机密.请求防伪保护及 CORS 管理等等安全方面 ...

  4. .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面 千呼万唤始出来,首先,请允许我长吸一口气!真没想到一份来自28岁老程序员 ...

  5. .NET Core实战项目之CMS 第四章 入门篇-Git的快速入门及实战演练

    写在前面 上篇文章我带着大家通过分析了一遍ASP.NET Core的源码了解了它的启动过程,然后又带着大家熟悉了一遍配置文件的加载方式,最后引出了依赖注入以及控制反转的概念!如果大家把前面几张都理解了 ...

  6. .NET Core实战项目之CMS 第九章 设计篇-白话架构设计

    前面两篇文章给大家介绍了我们实战的CMS系统的数据库设计,源码也已经上传到服务器上了.今天我们就好聊聊架构设计,在开始之前先给大家分享一下这几天我一直在听的<从零开始学架构>里面关于架构设 ...

  7. .NET Core实战项目之CMS 第十一章 开发篇-数据库生成及实体代码生成器开发

    上篇给大家从零开始搭建了一个我们的ASP.NET Core CMS系统的开发框架,具体为什么那样设计我也已经在第十篇文章中进行了说明.不过文章发布后很多人都说了这样的分层不是很合理,什么数据库实体应该 ...

  8. .NET Core实战项目之CMS 第十三章 开发篇-在MVC项目结构介绍及应用第三方UI

    作为后端开发的我来说,前端表示真心玩不转,你如果让我微调一个位置的样式的话还行,但是让我写一个很漂亮的后台的话,真心做不到,所以我一般会选择套用一些开源UI模板来进行系统UI的设计.那如何套用呢?今天 ...

  9. .NET Core实战项目之CMS 第二章 入门篇-快速入门ASP.NET Core看这篇就够了

    作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/9985451.html 本来这篇只是想简单介绍下ASP.NET Core MVC项目的(毕竟要照顾到很多新 ...

随机推荐

  1. c/c++再学习:C++中public、protect、private的访问权限控制

    C++中public.protect.private的访问权限控制 访问权限 一个类的public成员变量.成员函数,可以通过类的成员函数.类的实例变量进行访问 一个类的protected成员变量.成 ...

  2. net core体系-web应用程序-4asp.net core2.0 项目实战(CMS)-第一章 入门篇-开篇及总体规划

    .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划   原文地址:https://www.cnblogs.com/yilezhu/p/9977862.html 写在前面 千呼万唤始出来 ...

  3. 2018-2019-2 20175305实验一《Java开发环境的熟悉》实验报告

    2018-2019-2 20175305实验一<Java开发环境的熟悉>实验报告 实验题目 实验一Java开发环境的熟悉-1 1).实验目的及要求 1.建立"自己学号exp1&q ...

  4. VSTO 获取sheet单元格行列数

    Public Sub Igor() Dim Dtsheet As Excel.Worksheet Dim TotalC As Long '原始数据范围列 Dim TotalR As Long '原始数 ...

  5. MySQL系列

    目录: 一.初识数据库 二.库相关操作 三.表相关操作 四.记录相关操作 五.数据备份.pymysql模块 六.视图.触发器.事务.存储过程.函数 七.ORM框架SQLAlchemy 八.索引原理与慢 ...

  6. 动态规划——Best Time to Buy and Sell Stock IV

    这是这个系列题目的第四个,题目大意和之前的差不多,但是这次提供最多k次的操作,操作还是不能同时操作即必须结束前一个操作才能进行后一个操作. 状态比较好理解,就是题目要求的缩小版,dp[k][i]表示进 ...

  7. C# 神奇的Web services 请求超时问题 排查分析

    服务器上有两个接口,一个是Web Services(asmx文件)接口,一个是MVC API (普通的GET请求接口) 神奇的事情是这样的,只要我使用WebRequest请求两次,再使用Web Ser ...

  8. Windows下Flume的安装

    flume(日志收集系统) Flume是Cloudera提供的一个高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统,Flume支持在日志系统中定制各类数据发送方,用于收集数据:同时,Flum ...

  9. vue 源码学习三 vue中如何生成虚拟DOM

    vm._render 生成虚拟dom 我们知道在挂载过程中, $mount 会调用 vm._update和vm._render 方法,vm._updata是负责把VNode渲染成真正的DOM,vm._ ...

  10. JUnit介绍(转)

    测试的重要性毋庸再说,但如何使测试更加准确和全面,并且独立于项目之外并且避免硬编码,JUnit给了我们一个很好的解决方案.一.引子    首先假设有一个项目类SimpleObject如下:    pu ...