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

前面为了方便我们只是简单实现了基本业务功能的增删改查,但是登录功能还没有实现,而登录又是系统所必须的,得益于 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中的一致,以此判断验证码是否正确。流程如下图:

1548225417095

实现流程

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

1548225619909

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

Install-Package System.Drawing.Common -Version 4.5.1

上面的流程中你可以看到我们需要用到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默认模板里添加的

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

1548226057970

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

1548226289884

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

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

1548226424653

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

1548226525971

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

登录功能实现

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpyjsy.html