循序漸進VUE+Element 前端應用開發(33）- 郵件參數配置和模板郵件發送處理

循序漸進VUE+Element 前端應用開發(33）— 郵件參數配置和模板郵件發送處理

2021 年 1 月 7 日
筆記
循序漸進VUE+Element

在系統處理中，有時候需要發送郵件通知用戶，如新增用戶的郵件確認，密碼找回，以及常規訂閱消息、通知等內容處理，都可以通過郵件的方式進行處理。本篇隨筆介紹結合VUE+Element 前端，實現系統的郵件參數配置管理，以及基於郵件模板的方式進行郵件的發送。

1、郵件參數的配置管理

郵件參數一般需要配置如用戶名、密碼、郵件地址，顯示名稱，以及其他郵件所需的必要配置，一般我們可以通過界面管理的方式進行常規的參數配置，如下界面所示。

其中的登錄密碼，現在一般是授權登錄密碼，而不是原始的賬號密碼了。以163為例，可以在設置中添加一個授權密碼。

前端參數的配置管理，我們構建一個Api類，用於調用ABP後端的Api接口，如下所示。

查看窗體中顯示郵件參數數據的代碼如下所示。

    showAbpEmail() {
      this.resetForm('emailForm')
      setting.GetEmailSettingsForApplication().then(data => {
        if (data.result) {
          Object.assign(this.abpEmailForm, data.result)
        }
        this.isAbpEmail = true // 編輯狀態
      })
    },

2、ABP後端郵件的發送處理

系統參數配置完成後，我們需要根據這些郵件參數進行郵件的發送，ABP框架基於.net core 的實現，我們發送郵件，需要添加一個Abp.MailKit的依賴，如下所示。

然後在模塊的依賴上，添加對應的AbpMailkitModule的依賴即可。

一般來說，我們發送郵件，還需要重寫DefaultMailKitSmtpBuilder的配置處理項，以便自定義發送處理過程。

    /// <summary>
    /// 重寫默認的SmtpBuilder類
    /// </summary>
    public class MyMailKitSmtpBuilder : DefaultMailKitSmtpBuilder
    {
        private readonly ISmtpEmailSenderConfiguration _smtpEmailSenderConfiguration;
        private readonly IAbpMailKitConfiguration _abpMailKitConfiguration;
        public MyMailKitSmtpBuilder(ISmtpEmailSenderConfiguration smtpEmailSenderConfiguration, IAbpMailKitConfiguration abpMailKitConfiguration)
            : base(smtpEmailSenderConfiguration, abpMailKitConfiguration)
        {
            _smtpEmailSenderConfiguration = smtpEmailSenderConfiguration;
            _abpMailKitConfiguration = abpMailKitConfiguration;
        }

        /// <summary>
        /// 配置發送處理
        /// </summary>
        /// <param name="client"></param>
        protected override void ConfigureClient(SmtpClient client)
        {
            client.CheckCertificateRevocation = false;
            client.ServerCertificateValidationCallback = (sender, certificate, chain, errors) => true;

            client.Connect(_smtpEmailSenderConfiguration.Host, _smtpEmailSenderConfiguration.Port, GetSecureSocketOption());

            if (_smtpEmailSenderConfiguration.UseDefaultCredentials)
            {
                return;
            }

            var username = _smtpEmailSenderConfiguration.UserName;
            var password = _smtpEmailSenderConfiguration.Password;
            //password = SimpleStringCipher.Instance.Decrypt(originalPass);//如果不重寫自定義配置MySmtpEmailSenderConfiguration，那麼密碼需要解密
            client.Authenticate(username, password);

            //base.ConfigureClient(client);
        }
    }

但是由於基類處理中，默認的郵件配置密碼是直接從數據庫讀取信息的，沒有進行加密，如基類SmtpEmailSenderConfiguration的實現如下。

但是我們應用程序的設置信息，密碼是經過加密過的，因此需要重寫這個配置項，進行對應的密碼解密。

    /// <summary>
    /// 郵件發送參數配置類
    /// </summary>
    public class MySmtpEmailSenderConfiguration : SmtpEmailSenderConfiguration
    {
        public MySmtpEmailSenderConfiguration(ISettingManager settingManager) : base(settingManager)
        {

        }

        /// <summary>
        /// 重寫密碼處理，需要解密密碼
        /// </summary>
        public override string Password => SimpleStringCipher.Instance.Decrypt(GetNotEmptySettingValue(EmailSettingNames.Smtp.Password));
    }

最後，在Module中初始化中處理下對應的自定義發送和自定義配置項的處理類。

這樣默認注入的發送郵件的接口就正常了，我們接下來就是根據郵件的模板進行內容發送即可。

3、郵件模板的處理

一般的郵件模板，是一個獨立的文件方式，文件中定義一些預設的內容，然後實際處理的時候，替換這些變量即可。

郵件模板的內容替換，我喜歡用基於模板引擎的方式處理變量的替換，一般我用NVelocity來進行處理。

我在早期介紹過一些關於NVelocity的知識，需要可以參考：

《使用NVelocity生成內容的幾種方式》

《強大的模板引擎開源軟件NVelocity》

《Database2Sharp版本更新之自定義模板生成》

《使用NVelocity0.5實現服務器端頁面自動生成》

例如，我在文本中定義一個連接：//www.iqidi.com/h5/EmailValidate?callback=${callback} 其中${callback} 就是變量定義，可以在運行中進行變量替換的。

我們在Host項目中定義一些郵件文件模板，如下所示。

然後在使用的應用服務類中注入對應的郵件發送接口以供使用。

具體的郵件發送，就是讀取模板內容，進行替換變量，然後調用接口進行郵件的發送即可。

        /// <summary>
        /// 發送校驗的電子郵件
        /// </summary>
        /// <returns></returns>
        public async Task SendEmailValidate(SendEmailActivationLinkDto input)
        {
            var user = await GetUserByChecking(input.EmailAddress);
            //user.SetNewEmailConfirmationCode();

            #region 根據模板生成郵件正文

            //使用相對路徑進行構造處理
            string template = string.Format("/UploadFiles/Email/EmailValidate.html");
            var helper = new NVelocityHelper(template);
            //${標題} ${內容} ${稱呼} ${日期}
            var tilte = "郵箱驗證通知";
            helper.AddKeyValue("title", tilte);
            helper.AddKeyValue("callname", "");
            helper.AddKeyValue("date", DateTime.Now.ToLongDateString());

            //郵箱校驗碼
            var callback = Guid.NewGuid().ToString();
            helper.AddKeyValue("callback", callback);

            var html = helper.ExecuteString();

            #endregion

            #region 構建郵件內容對象 發送郵件
            string toEmail = "[email protected]";

            await _emailSender.SendAsync(new System.Net.Mail.MailMessage
            { 
                To = { toEmail },
                Subject = tilte,
                Body = html,
                IsBodyHtml = true
            });

            #endregion

            LogHelper.Logger.Info(string.Format("校驗郵件發送給:{0}, {1}", toEmail, "發送郵件成功"));
        }

為了處理模板內容的方便，我們把規則放在輔助類 NVelocityHelper 中處理即可。

上面就是整個發送模板郵件的過程代碼了。

發送郵件成功後，我們可以在郵箱中查看到對應的郵件，我們一般根據自己的業務需要定義不同的郵件模板即可。

郵件發送成功後，查看郵件效果如下所示。

Tags: 循序漸進VUE+Element