.NET Core实战项目之CMS 第十六章 用户登陆及验证码功能实现

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

本文已收录至《.NET Core实战项目之CMS 第一章 入门篇-开篇及整体规划》
做者：依乐祝
原文地址：http://www.javashuo.com/article/p-cdgmpeef-er.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的身份验证组件,但愿对您有所帮助,下一节咱们就根据登录的信息来加载用户权限菜单以及权限功能的校验,再次感谢你们的查看!