.NET Core實戰項目之CMS 第十六章用戶登錄及驗證碼功能實現

前面為了方便我們只是簡單實現了基本業務功能的增刪改查，但是登錄功能還沒有實現，而登錄又是系統所必須的，得益於 ASP.NET Core的可擴展性因此我們很容易實現我們的登錄功能。今天我將帶著大家一起來實現下我們的ASP.NET Core2.2開發的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

實現流程

首先我們需要在項目的生成操作中，如下圖所示：勾選-》“允許不安全代碼”
由於我們需要使用 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系統的源碼進行查看，我只貼出來怎麼用，驗證碼的實現代碼路徑如下圖所示：
由於我們後臺系統只有登錄頁面需要用到這個驗證碼，因此我把這個生成驗證碼圖片的操作放在了AccountController.cs控制器裡面，代碼如下所示：

上圖描述的很清晰了，所以這裡我就不詳細闡述了，上麵包含了生成過程，session存儲過程，返回圖片的處理等等。
頁面中載入圖片，代碼如下：
當然為了體現我們的專業性我們還需要實現點擊圖片刷新驗證碼的功能，如下圖所示：

相應的我們要對驗證碼進行下驗證，這裡我們加入忽略大小寫的驗證規則：

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的獨立身份驗證提供程式。

登錄流程

登錄流程如下圖所示：

1548227608836

這裡的流程很簡單,相信大伙掃一眼應該就能明白.

功能實現

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

1548230956610

由於我們這裡用到了基於cookie的身份認證,所以如果應用程式沒有使用Microsoft.AspNetCore.App元數據包，那麼你需要再你的項目文件中添加Microsoft.AspNetCore.Authentication.Cookies Nuget包（版本2.1.0或更高版本
在ConfigureServices 方法中,通過添加AddAuthentication以及AddCookie方法來註入身份認證服務,代碼如下:
當然你還得在Configure 中啟用認證服務
接下來就是登錄頁面的載入代碼如下:

這裡有一個returnUrl 用來返回退出前的頁面,預設返迴首頁
這裡頁面js的判斷流程的js代碼我就不貼出來了,如果有興趣你可以訪問文章底部的Github上的源碼進行查看
代碼提交後我們要首先驗證驗證碼是否有效,然後判斷錯誤次數是否超了,然後再次對實體進行規則性驗證,最後才進行登錄的操作,具體的代碼有點長,下麵只貼出部分重要的代碼

判斷驗證碼是否有效:

判斷錯誤次數是否超過規定的最大允許錯誤數:

服務端對實體代碼規則判斷:

登陸的具體代碼:

這裡登錄成功就進行登錄次數,最後登錄時間以及IP的記錄,然後寫入管理員操作日誌中.
最後所有驗證通過後,直接調用HttpContext.SignInAsync 方法即可登錄成功.這裡我們在Claim中存放了很多我們後面需要用到的信息.
頁面中處理返回結果,成功則調整到'ReturnUrl' 不成功則停留在登錄頁面.
好了,登錄功能到現在就演示完成了,我們登錄測試下,然後看一下吧!

當沒有輸入驗證碼時:

當驗證碼長度輸入錯誤時:

登陸成功時進入主界面!
當然我們我們還得實現下退出的功能哦!本來這裡也想加入一些特殊的驗證的,想想還是算了,就這樣簡單的實現下吧!

開源地址

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

總結

本文我帶著你一步一步的實現了登錄頁面的功能,包括驗證及登錄的過程,認證和校驗使用的時asp.net core中基於cookie的身份驗證組件,希望對您有所幫助,下一節我們就根據登陸的信息來載入用戶許可權菜單以及許可權功能的校驗,再次感謝大家的查看!

.NET Core實戰項目之CMS 第十六章 用戶登錄及驗證碼功能實現