循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理
伍华聪 人气:0在一些系统中,有时候用户忘记密码,可以通过向自己手机发送动态验证码的方式实现系统登录功能。本篇随笔介绍如何结合后端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) }) }) },
在登录界面中,输入动态码登录即可顺利进入系统,和常规的处理一样。
以上就是参照常规账号密码登录的方式,构建一个动态码登录的处理,流程还是差不多,不过整合了短信发送,缓存处理,账号登陆等几个流程,可以作为一个简单的系统登录过程的了解。
加载全部内容