循序漸進VUE+Element 前端應用開發(32）--- 手機短信動態碼登陸處理

本文轉載自查看原文 2021-01-06 15:49 1534 循序漸進VUE+Element

在一些系統中，有時候用戶忘記密碼，可以通過向自己手機發送動態驗證碼的方式實現系統登錄功能。本篇隨筆介紹如何結合后端ABP框架的短信發送和緩存模塊的處理，實現手機短信動態碼登陸處理。

一般的登錄方式，分為普通賬號登錄，動態密碼登陸，掃描二維碼登錄等幾種方式，其他方式這里不講，主要介紹動態碼登錄方式。

1、短信驗證碼的發送處理

我在上篇隨筆《ABP框架中短信發送處理，包括阿里雲短信和普通短信商的短信發送集成》中介紹了如何使用ABP框架實現短信的發送處理，因此我們前后端通過短信的方式，可以實現動態密碼的登陸處理。

因此在授權登陸的控制器中，我們增加短信發送的接口注入使用，如下所示。

然后通過定義兩個接口，一個是發送動態驗證碼給用戶手機的接口，一個是根據用戶手機和動態驗證碼的方式進行登錄處理接口。

然后我們在這個驗證身份的控制器上增加兩個方法即可。

用例也就是分了兩個處理方法。

在處理發送短信驗證碼之前，我們來介紹一下短信驗證碼的處理規則，我們發送短信成功后，把驗證碼存在系統緩存里面，一般系統緩存是存放在Redis里面，緩存需要一個鍵和定義好的類對象進行存儲。

我們定義好存儲的對象類，再在系統中使用即可。

    /// <summary>
    /// 短信登陸動態密碼緩存對象
    /// </summary>
    [Serializable]
    public class SmsLoginCodeCacheItem
    {
        public const string CacheName = "AppSmsLoginCodeCacheItem";

        public string Code { get; set; }

        public string PhoneNumber { get; set; }

        public SmsLoginCodeCacheItem()
        {
        }

        public SmsLoginCodeCacheItem(string code, string phone)
        {
            Code = code;
            PhoneNumber = phone;
        }
    }

我們可以在系統模塊初始化的時候，配置好緩存對應的失效時間，如下所示。

            //配置SMS登錄動態碼有效期限
            Configuration.Caching.Configure(SmsLoginCodeCacheItem.CacheName, cache =>
            {
                cache.DefaultSlidingExpireTime = TimeSpan.FromMinutes(Constants.SmsCodeExpiredMinutes);
            });

發送短信驗證碼作為動態密碼的邏輯代碼如下所示。

        /// <summary>
        /// 發送登錄動態碼
        /// </summary>
        /// <param name="model">手機登錄動態碼</param>
        /// <returns></returns>
        [HttpPost]
        public async Task<CommonResult> SendPhoneLoginSmsCode([FromBody] AuthenticateByPhoneCaptchaModel model)
        {
            //獲取隨機6位數字動態驗證碼
            var code = RandomHelper.GetRandom(100000, 999999).ToString();

            //使用自定義模板處理短信發送
            string message = string.Format(Constants.MySmsCodeTemplate, code);
            var result =  await _smsSender.SendAsync(model.PhoneNumber, message);
            if(result.Success)
            {
                var cacheKey = model.PhoneNumber;//以手機號碼作為鍵存儲驗證碼緩存
                var cacheItem = new SmsLoginCodeCacheItem { Code = code, PhoneNumber = model.PhoneNumber };

                var cache = _cacheManager.GetCache<string, SmsLoginCodeCacheItem>(SmsLoginCodeCacheItem.CacheName);
                cache.Set(cacheKey, cacheItem);
            }

            return result;
        }

我們還需要在前端中設計一個使用動態短信碼登錄的界面，如下所示。

短信發送成功，可以在用戶手機查看對應的動態碼。

驗證碼發送后，我們也可以在Redis中看到對應的數據，如下所示。

2、動態碼登錄處理

發送了短信碼后，系統在緩存中存放一段時間的數據，如果在這個期間進行登錄，會根據緩存進行匹配，如果匹配成功，那么就進行相關登錄身份的處理即可。

系統登錄驗證的處理代碼如下所示。

        /// <summary>
        /// 通過手機驗證碼授權
        /// </summary>
        /// <param name="model">手機驗證碼Dto</param>
        /// <returns></returns>
        [HttpPost]
        public async Task<AuthenticateResultModel> AuthenticateByPhoneCaptcha([FromBody] AuthenticateByPhoneCaptchaModel model)
        {
            var loginResult = await GetLoginResultByPhoneCaptchaAsync(
                model.PhoneNumber,
                model.SmsCode,
                GetTenancyNameOrNull()
            );

            //if(loginResult.Result == AbpLoginResultType.Success)
            //這里成功，移除短信緩存
            var cache = _cacheManager.GetCache<string, SmsLoginCodeCacheItem>(SmsLoginCodeCacheItem.CacheName);
            cache.Remove(model.PhoneNumber);//移除緩存短信鍵值

            var accessToken = CreateAccessToken(CreateJwtClaims(loginResult.Identity));
            return new AuthenticateResultModel
            {
                AccessToken = accessToken,
                ExpireInSeconds = (int)_configuration.Expiration.TotalSeconds,
                EncryptedAccessToken = GetEncryptedAccessToken(accessToken),
                UserId = loginResult.User.Id
            };
        }

這里主要的邏輯封裝在 GetLoginResultByPhoneCaptchaAsync 中，這個登錄的方式可以參考ABP框架基礎的登陸方式進行改動即可。

        /// <summary>
        /// 獲取登陸結果通過手機驗證碼
        /// </summary>
        /// <param name="phoneNumber">手機號</param>
        /// <param name="captcha">驗證碼</param>
        /// <param name="tenancyName">租戶名</param>
        /// <returns></returns>
        private async Task<AbpLoginResult<Tenant, User>> GetLoginResultByPhoneCaptchaAsync(string phoneNumber, string captcha, string tenancyName)
        {
            var loginResult = await _logInManager.LoginByMobileAsync(phoneNumber, captcha, tenancyName);
            switch (loginResult.Result)
            {
                case AbpLoginResultType.Success:
                    return loginResult;
                default:
                    throw _abpLoginResultTypeHelper.CreateExceptionForFailedLoginAttempt(loginResult.Result, loginResult.User.UserName, tenancyName);
            }
        }

參照ABP框架基礎的登陸授權方式，我們在UserManager中增加類似的驗證碼登陸管理方式，如下所示。

前端在處理相關發送驗證碼和登錄授權的操作，是針對API的調用，因此需要封裝對應的API處理。

然后仿照常規登錄的處理，編寫一個動態碼登錄的處理方式，放在對應的Module中即可。

  dynamiclogin({ commit }, userInfo) { // 動態密碼登陸
    const { mobile, smscode } = userInfo
    return new Promise((resolve, reject) => {
      tokenauth.AuthenticateByPhoneCaptcha({ phoneNumber: mobile.trim(), smsCode: smscode }).then(response => {
        const { result } = response // 獲取返回對象的 result
        // console.log(result)// 記錄數據
        var token = result.accessToken // 用戶令牌
        var userId = result.userId // 用戶id

        // 修改State對象，記錄令牌和用戶Id
        commit('SET_TOKEN', token)
        commit('SET_USERID', userId)
        // 存儲cookie
        setToken(token)
        setUserId(userId)

        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },