前面為了方便我們只是簡單實現(xiàn)了基本業(yè)務(wù)功能的增刪改查，但是登錄功能還沒有實現(xiàn)，而登錄又是系統(tǒng)所必須的，得益于 ASP.NET Core的可擴(kuò)展性因此我們很容易實現(xiàn)我們的登錄功能。今天我將帶著大家一起來實現(xiàn)下我們的ASP.NET Core2.2開發(fā)的CMS系統(tǒng)的登錄及驗證碼功能。如果你覺得文中有任何不妥的地方還請留言或者加入DotNetCore實戰(zhàn)千人交流群637326624跟大伙進(jìn)行交流討論吧！

本文已收錄至《.NET Core實戰(zhàn)項目之CMS 第一章 入門篇-開篇及總體規(guī)劃》
作者：依樂祝
原文地址：https://www.cnblogs.com/yilezhu/p/10309647.html

寫在前面

距離上一篇教程已經(jīng)過去九天了，為什么這么久才更新呢？最近年終事情比較多，也比較忙，再加上上一篇文章的閱讀量不高，也就沒有更新的積極性了，所以更新有點滯后！好吧，我承認(rèn)上面都是我的借口，其實我是想多整點干貨來分享，也在思考怎么樣的寫作方式才更能被大伙所接收吧，所以今天才來更新。本文分兩部分，第一部分是驗證碼的功能實現(xiàn)，第二部分是登錄功能實現(xiàn)~

驗證碼功能實現(xiàn)

這里有人會說，驗證碼功能實現(xiàn)不是很簡單嘛，有必要還單獨(dú)開一個小節(jié)來說明嘛！其實我想說，驗證碼功能的實現(xiàn)的確很簡單，但是如果要實現(xiàn)驗證碼功能的跨平臺使用的話就稍微麻煩點了。好在我前幾天看到了汪宇杰（微軟MVP）的一篇關(guān)于驗證碼的文章，因此稍加修改在我們的CMS系統(tǒng)中進(jìn)行了實現(xiàn)！昨天跟汪宇杰在聊的時候，聽他說，他已經(jīng)把這個驗證碼模塊制作成了Nuget包，更方便大伙的使用，他的這個驗證碼模塊的GitHub：https://github.com/EdiWang/Edi.Captcha.AspNetCore?有興趣的可以看下源碼。

驗證碼實現(xiàn)流程

我們知道一個簡單的驗證碼的實現(xiàn)原理是生成一串隨機(jī)字符（數(shù)字或字母），將字符串保存到Session中，同時生成一張圖片用來顯示在網(wǎng)頁上。當(dāng)用戶提交內(nèi)容到服務(wù)器的時，服務(wù)器檢查用戶輸入的驗證碼是否與Session中的一致，以此判斷驗證碼是否正確。流程如下圖：

實現(xiàn)流程

首先我們需要在項目的生成操作中，如下圖所示：勾選-》“允許不安全代碼”

由于我們需要使用?System.Drawing.Imaging?命名空間里的類型來生成圖片，所以我們也需要安裝一個NuGet包：

Install-Package System.Drawing.Common -Version 4.5.1

上面的流程中你可以看到我們需要用到Session來進(jìn)行驗證碼的存儲，所以我們也需要在ASP.NET Core2.2中啟用Session支持。在Startup.cs里加入：

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

上面的代碼你應(yīng)該能看懂吧，一個在ConfigureServices?中加入依賴，一個在Configure中開啟中間件

注意：Session依賴Cookie才能工作，所以請確保用戶首先接受GDPR cookie策略，這是ASP.NET Core 2.1默認(rèn)模板里添加的

具體的生成代碼，我就不貼出來了，有興趣的朋友可以下載我們的CMS系統(tǒng)的源碼進(jìn)行查看，我只貼出來怎么用，驗證碼的實現(xiàn)代碼路徑如下圖所示：

由于我們后臺系統(tǒng)只有登錄頁面需要用到這個驗證碼，因此我把這個生成驗證碼圖片的操作放在了AccountController.cs控制器里面，代碼如下所示：

上圖描述的很清晰了，所以這里我就不詳細(xì)闡述了，上面包含了生成過程，session存儲過程，返回圖片的處理等等。

頁面中加載圖片，代碼如下：

當(dāng)然為了體現(xiàn)我們的專業(yè)性我們還需要實現(xiàn)點擊圖片刷新驗證碼的功能，如下圖所示：

相應(yīng)的我們要對驗證碼進(jìn)行下驗證，這里我們加入忽略大小寫的驗證規(guī)則：

登錄功能實現(xiàn)

回想一下我們之前的登錄實現(xiàn)過程，登陸成功后再把登錄信息保存到Cookies或者Session里面，而在ASP.NET Core中我們知道，借助ASP.NET Core Identity?我們可以實現(xiàn)一個用于創(chuàng)建和維護(hù)用戶登錄的完整的，功能齊全的身份驗證提供程序。當(dāng)然，這里為了實現(xiàn)我們自己的登錄邏輯,所以我們只使用基于基于cookie的身份驗證,即將基于cookie的身份驗證用作沒有ASP.NET Core Identity的獨(dú)立身份驗證提供程序。

登錄流程

登錄流程如下圖所示：

這里的流程很簡單,相信大伙掃一眼應(yīng)該就能明白.

功能實現(xiàn)

這一小節(jié)我們就來一步一步的實現(xiàn)我們的登錄功能吧,在開始之前呢,先看下我們的登錄界面,如下圖所示:

由于我們這里用到了基于cookie的身份認(rèn)證,所以如果應(yīng)用程序沒有使用Microsoft.AspNetCore.App元數(shù)據(jù)包，那么你需要再你的項目文件中添加Microsoft.AspNetCore.Authentication.Cookies Nuget包（版本2.1.0或更高版本

在ConfigureServices?方法中,通過添加AddAuthentication以及AddCookie方法來注入身份認(rèn)證服務(wù),代碼如下:

當(dāng)然你還得在Configure?中啟用認(rèn)證服務(wù)

接下來就是登錄頁面的加載代碼如下:

這里有一個returnUrl?用來返回退出前的頁面,默認(rèn)返回首頁

這里頁面js的判斷流程的js代碼我就不貼出來了,如果有興趣你可以訪問文章底部的Github上的源碼進(jìn)行查看

代碼提交后我們要首先驗證驗證碼是否有效,然后判斷錯誤次數(shù)是否超了,然后再次對實體進(jìn)行規(guī)則性驗證,最后才進(jìn)行登錄的操作,具體的代碼有點長,下面只貼出部分重要的代碼

判斷驗證碼是否有效:

判斷錯誤次數(shù)是否超過規(guī)定的最大允許錯誤數(shù):

服務(wù)端對實體代碼規(guī)則判斷:

登陸的具體代碼:

這里登錄成功就進(jìn)行登錄次數(shù),最后登錄時間以及IP的記錄,然后寫入管理員操作日志中.
最后所有驗證通過后,直接調(diào)用HttpContext.SignInAsync?方法即可登錄成功.這里我們在Claim中存放了很多我們后面需要用到的信息.

頁面中處理返回結(jié)果,成功則調(diào)整到'ReturnUrl' 不成功則停留在登錄頁面.

好了,登錄功能到現(xiàn)在就演示完成了,我們登錄測試下,然后看一下吧!

當(dāng)沒有輸入驗證碼時:

當(dāng)驗證碼長度輸入錯誤時:

登陸成功時進(jìn)入主界面!

當(dāng)然我們我們還得實現(xiàn)下退出的功能哦!本來這里也想加入一些特殊的驗證的,想想還是算了,就這樣簡單的實現(xiàn)下吧!

開源地址

這個系列教程的源碼我會開放在GitHub以及碼云上，有興趣的朋友可以下載查看！覺得不錯的歡迎Star
GitHub：https://github.com/yilezhu/Czar.Cms
碼云：https://gitee.com/yilezhu/Czar.Cms
如果你覺得這個系列對您有所幫助的話，歡迎以各種方式進(jìn)行贊助，當(dāng)然給個Star支持下也是可以滴！另外一種最簡單粗暴的方式就是下面這種直接關(guān)注我們的公眾號了：

總結(jié)

本文我?guī)е阋徊揭徊降膶崿F(xiàn)了登錄頁面的功能,包括驗證及登錄的過程,認(rèn)證和校驗使用的時asp.net core中基于cookie的身份驗證組件,希望對您有所幫助,下一節(jié)我們就根據(jù)登陸的信息來加載用戶權(quán)限菜單以及權(quán)限功能的校驗,再次感謝大家的閱讀!

相關(guān)文章：

• .NET Core實戰(zhàn)項目之CMS 第一章 入門篇-開篇及總體規(guī)劃

• .NET Core實戰(zhàn)項目之CMS 第二章 入門篇-快速入門ASP.NET Core看這篇就夠了

• .NET Core實戰(zhàn)項目之CMS 第三章 入門篇-源碼解析配置文件及依賴注入

• .NET Core實戰(zhàn)項目之CMS 第四章 入門篇-Git的快速入門及實戰(zhàn)演練

• .NET Core實戰(zhàn)項目之CMS 第五章 入門篇-Dapper的快速入門看這篇就夠了

• .NET Core實戰(zhàn)項目之CMS 第六章 入門篇-Vue的快速入門及其使用

• .NET Core實戰(zhàn)項目之CMS 第七章 設(shè)計篇-用戶權(quán)限極簡設(shè)計全過程

• .NET Core實戰(zhàn)項目之CMS 第八章 設(shè)計篇-內(nèi)容管理極簡設(shè)計全過程

• .NET Core實戰(zhàn)項目之CMS 第九章 設(shè)計篇-白話架構(gòu)設(shè)計

• .NET Core實戰(zhàn)項目之CMS 第十章 設(shè)計篇-系統(tǒng)開發(fā)框架設(shè)計

• .NET Core實戰(zhàn)項目之CMS 第十一章 開發(fā)篇-數(shù)據(jù)庫生成及實體代碼生成器開發(fā)

• .NET Core實戰(zhàn)項目之CMS 第十二章 開發(fā)篇-Dapper封裝GURD及倉儲代碼生成器實現(xiàn)

• .NET Core實戰(zhàn)項目之CMS 第十三章 開發(fā)篇-在MVC項目結(jié)構(gòu)介紹及應(yīng)用第三方UI

• .NET Core實戰(zhàn)項目之CMS 第十四章 開發(fā)篇-防止跨站請求偽造（XSRF/CSRF）攻擊處理

• .NET Core實戰(zhàn)項目之CMS 第十五章 各層聯(lián)動工作實現(xiàn)增刪改查業(yè)務(wù)
  

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

---

.NET社區(qū)新聞，深度好文，歡迎訪問公眾號文章匯總 http://www.csharpkit.com

總結(jié)

以上是生活随笔為你收集整理的.NET Core实战项目之CMS 第十六章 用户登录及验证码功能实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。