.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的身份驗證組件,但願對您有所幫助,下一節咱們就根據登錄的信息來加載用戶權限菜單以及權限功能的校驗,再次感謝你們的查看!