asp.net core配合vue实现后端验证码逻辑

概述

网上的前端验证码逻辑总感觉不安全，验证码建议还是使用后端配合验证。

如果产品确定可以上网的话，就可以使用腾讯，百度等第三方验证，对接方便。但是产品可能内网部署，就必须自己写了。

本文章就是基于这一点来实现的。

前端验证码显示一个图片，后端生成图片。

部分原理

1.前端调用生端获取图片时，传入一个roomID，后端生成一个4位验征码，放入redis中。然后生成一个图片返回。
2.前端显示图片，登录时将roomID和填写的验证码，一并提交，登录接口根据roomId从redis中取出验证码判断是否正确。

这样就相当于后端验证了。

大家觉得有问题什么，可以进行评论。谢谢。

源码

前端部分代码

后端接口

        /// 

        /// 获取验证码
        /// 
        /// 
        [HttpGet("getCaptchaImage/{width:int}/{height:int}/{roomId}")]
        public IActionResult GetCaptchaImage(int width, int height, string roomId)
        {
            Console.WriteLine(roomId);
            //int width = 100;
            //int height = 36;
            var captchaCode = Captcha.GenerateCaptchaCode();
            var result = Captcha.GenerateCaptchaImage(width, height, captchaCode);
            string redisKey = "VerifyCode_" + roomId;
            Startup.redisDb.StringSet(redisKey, captchaCode, new TimeSpan(0, 5, 0));
            Stream s = new MemoryStream(result.CaptchaByteData);
            return new FileStreamResult(s, "image/png");
        }

        /// 

        /// 登录
        /// 
        /// 
        [HttpPost("login")]
        public ApiResponseData Login(LoginDto loginInfo)
        {
            if (string.IsNullOrWhiteSpace(loginInfo.username))
                return ApiResponse.Error("用户名不能为空");
            if (string.IsNullOrWhiteSpace(loginInfo.password))
                return ApiResponse.Error("密码不能为空");

            Entity.BaseOperator operInfo = Db
                .Select()
                .Where(a => a.OperatorCode == loginInfo.username && a.Password == loginInfo.password.ToLower() && a.Status == 1 && a.IsDel == false).ToOne();
            if (operInfo == null)
                return ApiResponse.Error("用户名或者密码不正确");

            bool verifyResult = Captcha.ValidateCaptchaCode(loginInfo.RoomId, loginInfo.VerifyCode);
            if(verifyResult == false)
                return ApiResponse.Error("验证码不正确");

            //登录时重新生成token，一个用户只能在一个地方登录
            string token = System.Guid.NewGuid().ToString().Replace("-", "");
            Db.Update(operInfo.OperatorId)
                .Set(a => a.Token, token)
                .ExecuteAffrows();

            dynamic outJson = new ExpandoObject();//初始化一个不包含任何成员的ExpandoObject
            outJson.token = token;

            //存入redis
            string redisKey = "UserInfo_" + token;
            Startup.redisDb.StringSet(redisKey, operInfo.OperatorId, new TimeSpan(24, 0, 0));

            return ApiResponse.Succ(outJson);
        }

到此这篇关于asp.net core配合vue实现后端验证码逻辑的文章就介绍到这了,更多相关asp.net core验证码 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！