驗證碼這東西，有人喜歡有人不喜歡。對於WebApi是否需要驗證碼，沒去研究過，只是原來的SimpleCMS有，就加上吧。

在WeiApi上使用驗證碼，關鍵的地方在於WeiApi是沒有狀態的，也就是說，不能使用Session來儲存驗證碼。因而，在WebApi上使用驗證碼。首先需要解決的是儲存的問題。剛開始先測試AbpSession了，但發現機制和習慣的不同，無法使用，那就只能儲存到資料庫了。儲存到資料庫最大的麻煩是如何判斷當前使用者對應的驗證碼是那個，也就是需要一個唯一值來尋找驗證碼，而且這個唯一值必須在客戶端重新整理圖片的時候一起返回到客戶端，以便提交時，將該值一併提交到伺服器。要將圖片和唯一值一起返回客戶端，也就是說不能以圖片方式返回，不然不好新增唯一值。沿著這個思路想到了將圖片轉換為BASE64程式碼再返回這方式，這樣，返回的就是字串，可以攜帶其他資訊返回了。後來，再想想，居然都已經轉換為字串了，何不直接將圖片字串做個MD5提交到伺服器，然後把這個MD5作為搜尋值，這樣也省了處理多個數值的問題。使用MD5作為唯一值，唯一的思慮是，能確保圖片都是唯一的麼？對於這個問題，筆者覺得，能同時出現相同的圖片，幾乎比中彩票還難，26個字母加上10個數字的6位數排列已經是上十億的可能，再加上字型、燥點和字型顏色等因素，真的中了，那你不是買彩票都對不起自己了。

思路明確後就可以開始工作了。先在Core專案建立VerifyCode的實體，程式碼如下：

    [Table("AppVerifyCodes")]
    public class VerifyCode :Entity<long>
    {
        public const int MaxCodeLength = 6;
        public const int MaxMd5KeyLength = 32;

        [Required]
        [MaxLength(MaxMd5KeyLength)]
        public  string
 
 Md5Key { get; set; }


        [Required]
        [MaxLength(MaxCodeLength)]
        public string Code { get; set; }


        [Required]
        public DateTime Expired { get; set; }


    }

在實體中新增Expired屬性的作用是為驗證碼設定一個過期時間，以避免這個驗證碼比重複利用。在練習中，我將過期時間設定為了10分鐘，在實際使用時，可以設定為30秒或者更小，不行就讓使用者重新整理驗證碼就行。

建立實體後，將它新增到SimpleCmsWithAbpDbContext，然後就可執行Add-Migration

有了實體後，就要新增服務，以便將圖片返回客戶端。一般情況下，通過繼承CrudAppService或AsyncCrudAppService類就可以很簡單的實現一個實體的CRUD操作，在沒有特殊操作的情況下，基本不需要編寫任何程式碼就能實現實體的CRUD操作了。由於驗證碼不需要完整的CRUD操作，只需要一個返回圖片的操作，因而可以從IApplicationService介面、ApplicationService類或模版提供的SimpleCmsWithAbpAppServiceBase類等繼承。SimpleCmsWithAbpAppServiceBase類是在ApplicationService的基礎上添加了GetCurrentUserAsync方法用來返回當前使用者，添加了GetCurrentTenantAsync方法用來返回當前租戶。如果不需要這兩方法，可以直接從ApplicationService基礎。

瞭解瞭如何新增服務後，先在Application專案新增一個名為VerifyCodes的資料夾，並在該資料夾下建立一個名為Dto的資料夾。在Dto資料夾下， 先建立一個名為GetVerifyCodeOutput的類，程式碼如下：

    public class GetVerifyCodeOutput
    {
        public string Image { get; set; }
    }

GetVerifyCodeOutput類將作為驗證碼的Get服務的返回物件。

在VerifyCodes資料夾下，建立一個名為IVerifyCodeAppService的介面，程式碼如下：

    public interface IVerifyCodeAppService : IApplicationService
    {
        Task<GetVerifyCodeOutput> Get();
    }

還要建立一個名為VerifyCodeAppService的類，程式碼如下：

    public class VerifyCodeAppService:SimpleCmsWithAbpAppServiceBase,IVerifyCodeAppService
    {
        private readonly IRepository<VerifyCode, long> _repository;

        public VerifyCodeAppService(IRepository<VerifyCode, long> repository)
        {
            _repository = repository;
        }

        public async Task<GetVerifyCodeOutput> Get()
        {
            var v = new VerifyCodeCore();
            var code = v.CreateVerifyCode();                //取隨機碼
            v.Padding = 10;
            var bytes = v.CreateImage(code);
            var image = $"data:{MimeTypeNames.ImageJpeg};base64,{Convert.ToBase64String(bytes)}";
            var verifyCode = new VerifyCode()
            {
                Md5Key = GetMd5Key(image),
                Code = code,
                Expired = Clock.Now.AddMinutes(10)
            };
            await _repository.InsertAsync(verifyCode);
            var output = new GetVerifyCodeOutput()
            {
                Image = image
            };
            return output;
        }

        private static string GetMd5Key(string input)
        {
            var md5 = new MD5CryptoServiceProvider();
            var inputBytes = System.Text.Encoding.ASCII.GetBytes(input);
            var hashBytes = md5.ComputeHash(inputBytes);

            // Convert the byte array to hexadecimal string
            var sb = new StringBuilder();
            foreach (var t in hashBytes)
            {
                sb.Append(t.ToString("X2"));
            }
            return sb.ToString();
        }
    }

在Get方法內，先呼叫VerifyCodeCore的CreateVerifyCode方法建立驗證碼，再呼叫CreateImage方法建立影象的二進位制程式碼，並將二進位制程式碼轉換為BASE64程式碼。接下來是建立一個VerifyCode實體並通過儲存的InsertAsync方法將實體新增到資料庫。在這裡呼叫了GetMd5Key方法將圖片字串轉換為了MD5字串。最後，建立GetVerifyCodeOutput的實體並返回。

在這裡要注意的是，由於在.net core 2中並不包含System.Drawing物件，不能處理Bitmap物件，在使用VerifyCodeCore類的時候會出錯，因而，需要在Application專案中新增System.Drawing.Common包，這個包目前還是預覽版狀態，需要在NuGet管理頁中將包括預發行版選上才能找到。

重新生成解決方案，就可在swagger頁的底部看到VerifyCode服務了，開啟訪問地址並單擊Try it out!按鈕就可看到以下的返回資料：

{
  "result": {
    "image": "data:image/jpeg;base64,此處省略圖片輸出"
  },
  "targetUrl": null,
  "success": true,
  "error": null,
  "unAuthorizedRequest": false,
  "__abp": true
}

這說明返回驗證碼沒有問題了。下面要修改驗證碼的驗證問題了。切換到Web.Core專案，在Models資料夾下，開啟AuthenticateModel.cs檔案，並將程式碼修改為以下程式碼：

    public class AuthenticateModel : ICustomValidate
    {
        [Required]
        [StringLength(AbpUserBase.MaxEmailAddressLength)]
        public string UserNameOrEmailAddress { get; set; }

        [Required]
        [StringLength(AbpUserBase.MaxPlainPasswordLength)]
        public string Password { get; set; }

        [Required]
        [StringLength(6)]
        public string VerifyCode { get; set; }

        [Required]
        [StringLength(32)]
        public  string Key { get; set; }

        public bool RememberClient { get; set; }

        public void AddValidationErrors(CustomValidationContext context)
        {
            var verifyCodeRepository =  context.IocResolver.Resolve<IRepository<VerifyCode, long>>();
            var localizationManager = context.IocResolver.Resolve<ILocalizationManager>();
            var record = verifyCodeRepository.FirstOrDefault(m =>m.Md5Key == Key.ToUpper());
            if (record == null || (record.Code.ToUpper() != VerifyCode.ToUpper() || record.Expired < Clock.Now))
            {
                context.Results.Add(new ValidationResult(
                    localizationManager.GetString(SimpleCmsWithAbpConsts.LocalizationSourceName, "verifyCodeInvalid"),
                    new List<string>() {"VerifyCode"}));
            }
            else
            {
                verifyCodeRepository.Delete(record);
            }
        }
    }

AuthenticateModel類是登入時用來接收登入資料的模型類。在該類中，添加了VerifyCode和Key兩個屬性用來接收驗證碼和與驗證碼相關的搜尋值，並添加了自定義驗證的AddValidationErrors方法來驗證驗證碼。在AddValidationErrors內，先通過Resolve方法獲取到VerifyCode實體的儲存和本地化資源管理介面ILocalizationManager，再呼叫儲存的FirstOrDefault方法來獲取與驗證碼相關的實體，然後進行驗證。如果記錄不存在，或者記錄的驗證碼不對，或者已經超時，就返回驗證錯誤，否則刪除實體，並繼續執行後續的驗證的操作。

在實現這個的時候，經歷了一些波折，在剛開始的時候，筆者習慣使用Equals方法來驗證欄位與提交值是否相等，但得到的都是錯誤的結果，這就奇怪了。於是，筆者就檢視日誌到底是怎麼回事，但是日誌並沒有記錄查詢時的SQL語句，這就麻煩了。在沒有使用ABP框架時，要記錄實體查詢時的SQL語句很簡單，只要呼叫UseLoggerFactory方法添加工廠類就行了，但是經過搜尋，發現ABP框架使用的日誌包castle.windsor並沒有跟上時代的步伐，為這提供相應的支援，為此，ABP框架的人還去GitHub和castle.windsor的專案負責人進行了交流，最後也沒啥結果。沒辦法，只能自己來解決這個問題了。先在EntityFrameworkCore包新增Microsoft.Extensions.Logging.Log4Net.AspNetCore包，然後開啟SimpleCmsWithAbpDbContextConfigurer.cs檔案，並將程式碼修改為以下程式碼：

    public static class SimpleCmsWithAbpDbContextConfigurer
    {

        public static readonly LoggerFactory MyLoggerFactory
            = new LoggerFactory(new[]
            {
                new Log4NetProvider("log4net.config",new Func<object, Exception, string>((o, exception) =>exception.Message )) 
            });
        public static void Configure(DbContextOptionsBuilder<SimpleCmsWithAbpDbContext> builder, string connectionString)
        {
            //builder.UseSqlServer(connectionString);
            builder.UseLoggerFactory(MyLoggerFactory).UseMySql(connectionString);
        }

        public static void Configure(DbContextOptionsBuilder<SimpleCmsWithAbpDbContext> builder, DbConnection connection)
        {
            //builder.UseSqlServer(connection);
            builder.UseLoggerFactory(MyLoggerFactory).UseMySql(connection);
        }
    }

程式碼主要添加了一個LoggerFactory例項，用於記錄實體的操作日誌。程式碼裡一定要將UseLoggerFactory方法放在UseMySql的前面，不然不起任何作用。好了，現在可以在日誌中記錄SQL 語句了。通過檢視日誌，發現使用Equals方法不能將查詢值傳遞給SQL語句，這就奇怪了，不知道是ABP問題還是Entity Framework Core的問題了。不管了，還成==就沒問題了。

使用帶有 module-zero的模版，本地化資訊可儲存在資料庫，也可儲存在XML檔案中。筆者是將資訊儲存在資料庫中，例如AddValidationErrors使用到的verifyCodeInvalid資訊，可在abplanguagetexts表中新增一條記錄，記錄的內容如下：
- Key：verifyCodeInvalid
- LanguageName：zh-CN
- Source：SimpleCmsWithAbp
- Value：驗證碼錯誤

這裡要注意的是CreationTime欄位的值不能為0，不然會出現錯誤，隨便添加個時間就行了。還有就是關於Source的值，如果要自定義源的話，需要將源新增到本地化管理中，不然會提示找不到源。為了簡便起見，使用SimpleCmsWithAbpConsts.LocalizationSourceName常數指定的源挺好，在本專案裡，LocalizationSourceName的值是SimpleCmsWithAbp，因而Source的值為SimpleCmsWithAbp。

重新生成解決方案，驗證碼驗證功能就已經可用了。最後要修改的是客戶端。

由於預設的服務訪問介面都有字首api/services/app，為了能方便處理這種情況，需要先修改SimpleCMS.util.Url類，將get方法修改成以下程式碼：

    defaultPath: '/api/services/app',

    get: function(controller, action, notDefaultPath) {
        var me = this;
        if (!Ext.isString(controller) || Ext.isEmpty(controller)) Ext.raise('非法的控制器名稱');
        if (!Ext.isString(action) && !Ext.isNumber(action)) Ext.raise('非法的操作名稱');
        return Ext.String.format(me.urlFormat, ROOTPATH + (notDefaultPath ? '' : me.defaultPath), controller, me.defaultActions[action] || me.actions[action] || action);
    },

方法主要添加了一個notDefaultPath引數，用來指定是否新增預設路徑，如果不設定該值，則新增，否則就不新增。

在客戶端需要一個MD5類用來將圖片的字串轉換為MD5字串，在Sencha官方論壇找到了這個類，具體地址為Ext.util.MD5 。類下載後，在app\util\資料夾下新增一個名為MD5.js的檔案，然後將下載的程式碼貼上到類裡，將類名修改為SimpleCMS.util.MD5 ，並在app.js中新增對它的引用，build一次就能用了。

使用WebApi，表單就不能直接提交了，需要將表單內的資料轉換為JSON格式提交，而要實現這個，只要在表單中將jsonSubmit設定為true就行了，但是每次都要設定就太麻煩了，通過重寫方式可一勞永逸的解決這個問題，但嘗試重寫Ext.form.Basic發現不起作用，重寫Ext.form.action.Submit才行。

資料是能以JSON提交，但發現WebApi在驗證錯誤的時候，返回的是400錯誤，而登入失敗返回的是500錯誤，而且，驗證錯誤的返回格式與Ext JS的預設格式也不同，這些都需要通過重寫Ext.form.action.Submit來實現，完成的後代碼如下：

Ext.define('Overrides.form.action.Submit', {
    override: "Ext.form.action.Submit",

    jsonSubmit: true,

    onFailure: function(response) {
        var me = this,
            form = me.form,
            formActive = form && !form.destroying && !form.destroyed,
            result;

        me.response = response;
        //this.failureType = Ext.form.action.Action.CONNECT_FAILURE;

        if (response.status === 400) {
            result = me.processResponse(response);
            if (result.error.validationErrors) {
                me.form.markInvalid(me.processValidationErrors(result.error.validationErrors));
                me.failureType = "validationErrors";
            }
        } else {
            me.failureType = Ext.form.Action.CONNECT_FAILURE;
        }


        if (formActive) {
            form.afterAction(me, false);
        }
    },

    processValidationErrors: function(errors) {
        var result = {},
            ln = errors.length,
            i = 0,
            error, j, jn, fields, field;
        for (i; i < ln; i++) {
            error = errors[i];
            fields = error.members;
            jn = fields.length;
            for (j = 0; j < jn; j++) {
                field = result[fields[j]];
                if (!field) field = result[fields[j]] = [];
                field.push(error['message']);
            }
        }
        return result;
    }


});

以上的程式碼參考了Sencha官方論壇的Aren’t Http Status Codes enough? 這個帖子，不過，帖子中重寫的是failure方法，不起左右，要重寫onFailure方法才行。

在onFailure方法內，如果返回的狀態碼是400，則判斷是否存在error.validationErrors的資料，如果存在，是否是驗證錯誤，需要從error.validationErrors中，將資料提取出來，將資料轉換為Ext JS認識的錯誤格式。轉換過程主要是從返回的每個錯誤中的members中獲取欄位名稱，在新的物件中以欄位名稱作為屬性名稱，message的值作為錯誤資訊陣列中的一個值。

重寫類寫好以後，需要build一次以載入重寫類。完成build後，開啟登入檢視app\view\authentication\Login.js，將裡面的欄位的name都修改為與AuthenticateModel類中屬性對應的名稱。修改完name後，開啟app\view\authentication\AuthenticationController.js檔案，修改verifyCodeUrl屬性、onLoginButton方法和onRefrestVcode方法，具體程式碼如下：

    onLoginButton: function () {
        var me = this,
            view = me.getView(),
            f = view.getForm(),
            src = view.down('image').getSrc();
        if (f.isValid()) {
            f.submit({
                //jsonSubmit:true,
                params:{key: SimpleCMS.util.MD5(src)},
                url: URI.get('api/TokenAuth', 'Authenticate', true),
                waitMsg: I18N.LoginSubmitWaitMsg,
                waitTitle: I18N.LoginSubmitWaitTitle,
                success: function (form, action) {
                    window.location.reload();
                },
                failure: function(form,action){
                    this.onRefrestVcode();
                    FAILED.form(form,action);
                },
                scope: me
            });
        }
    },

    verifyCodeUrl: URI.get('VerifyCode', 'Get'),
    onRefrestVcode: function () {
        var me = this,
            view = me.getView(),
            img = view.down('image');
        Ext.Ajax.request({
            url: me.verifyCodeUrl,
            scope: me,
            success: function(response, opts) {
                var obj = Ext.decode(response.responseText),
                    view = this.getView();
                if(view && obj.success && obj.result && obj.result.image){
                    view.down('image').setSrc(obj.result.image);
                }
            },       
            failure: function(response, opts) {
                TOAST.toast('獲取驗證碼失敗', this.getView().el, 'bl' );
            }            
        })    
    },

在onLoginButton方法中，主要修改的地方是在提交前，先獲取Ext.Img元件的src屬性的值，呼叫SimpleCMS.util.MD5方法將圖片字串轉換為MD5字元，並作為Key值提交到伺服器。由於提交地址為/api/TokenAuth/Authenticate，不是預設的WebApi提交地址，因而需要在呼叫get方法時新增第3個引數。在failure的回撥中，只有出現錯誤，就重新整理一次驗證碼，不能再使用舊的驗證碼，因為舊的驗證碼已經刪除了。

在onRefrestVcode方法中，主要修改的地方就是需要通過Ajax的方式來獲取驗證碼，而不能直接使用修改訪問地址的方式來重新整理驗證碼。在獲取到驗證碼後，將返回的字串值作為圖片的src值就行了。

由於登入失敗都是以500錯誤返回的，因而需要修改SimpleCMS.util.Failed以處理這種情況，具體修改程式碼如下：

    form: function(form, action) {
        if (action.failureType === 'validationErrors') return;
        if (action.response.status === 500) {
            var result = Ext.decode(action.response.responseText);
            if (result.error && result.error.message) {
                TOAST.toast(
                    result.error.message + (result.error.details ? result.error.details : ''),
                    form.owner.el,
                    'bl'
                );
            }
            return;
        }
        FAILED.ajax(action.response);
    }

程式碼先判斷failureType是否為驗證錯誤，如果是，說明已經處理過了，不用處理，直接返回。如果狀態碼為500，就判斷結果是否包含error和error.message兩個資料，如果包含，說明有錯誤資訊，就在視窗上使用Ext.window.Toast來輸出資訊。如果是其他情況，呼叫ajax方法來處理錯誤資訊。

在最後，還需要開啟application.js檔案，在onAjaxBeforeRequest方法中，將options.jsonData = true;這句刪除，不然表單提交的時候不會提交任何資料。

至此，驗證碼功能已經實現了。