概述

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

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

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

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

部分原理

1.前端调用生端获取图片时,传入一个roomID,后端生成一个4位验征码,放入redis中。然后生成一个图片返回。

2.前端显示图片,登录时将roomID和填写的验证码,一并提交,登录接口根据roomId从redis中取出验证码判断是否正确。

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

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

源码

前端部分代码

<template>
<div class="login-container">
<vue-particles
color="#ffffff"
:particleOpacity="0.7"
:particlesNumber="50"
shapeType="circle"
:particleSize="4"
linesColor="#dedede"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance="150"
:moveSpeed="2"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
></vue-particles>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
<div class="title-container">
<h3 class="title">智能综合管理系统</h3>
</div> <el-form-item prop="username">
<span class="svg-container">
<svg-icon icon-class="user" />
</span>
<el-input ref="username" v-model="loginForm.username" placeholder="用户名" name="username" type="text" tabindex="1" autocomplete="on" />
</el-form-item> <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input
:key="passwordType"
ref="password"
v-model="loginForm.password"
:type="passwordType"
placeholder="密码"
name="password"
tabindex="2"
autocomplete="on"
@keyup.native="checkCapslock"
@blur="capsTooltip = false"
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
</span>
</el-form-item>
</el-tooltip>
<el-form-item prop="yzm">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input type="text" v-model="loginForm.verifyCode" maxlength="4" placeholder="验证码" />
<div class="identifyCode" @click="refreshCode">
<el-image :src="verifyImageUrl"></el-image>
</div>
</el-form-item>
<el-button :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px" @click.native.prevent="handleLogin">登录</el-button>
</el-form>
</div>
</template> <script>
import { validUsername } from '@/utils/validate'
import Identify from './components/Identify'
import { uuid } from 'vue-uuid'; // uuid object is also exported to things
// outside Vue instance. export default {
name: 'Login',
components: { Identify },
data() {
const validateUsername = (rule, value, callback) => {
if (!validUsername(value)) {
callback(new Error('请输入正确的用户名'))
} else {
callback()
}
}
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('密码最少6位'))
} else {
callback()
}
}
return {
loginForm: {
username: 'admin',
password: '111111',
roomId: '',
verifyCode: ''
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
},
passwordType: 'password',
capsTooltip: false,
loading: false,
showDialog: false,
redirect: undefined,
otherQuery: {},
identifyCodes: '1234567890',
identifyCode: '',
// verifyImageRoomId: '',
verifyImageUrl: '',
}
},
watch: {
$route: {
handler: function (route) {
const query = route.query
if (query) {
this.redirect = query.redirect
this.otherQuery = this.getOtherQuery(query)
}
},
immediate: true
}
},
created() {
// window.addEventListener('storage', this.afterQRScan)
// this.identifyCode = ''
// this.makeCode(this.identifyCodes, 4)
this.refreshCode()
},
mounted() {
if (this.loginForm.username === '') {
this.$refs.username.focus()
} else if (this.loginForm.password === '') {
this.$refs.password.focus()
}
},
destroyed() {
// window.removeEventListener('storage', this.afterQRScan)
},
methods: {
checkCapslock(e) {
const { key } = e
this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
},
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
this.$nextTick(() => {
this.$refs.password.focus()
})
},
createUuid() {
let uuidV4 = uuid.v4().replace('-', '').replace('-', '').replace('-', '').replace('-', '') this.verifyImageRoomId = uuidV4
this.verifyImageUrl = '/api/Operator/getCaptchaImage/120/40/' + this.verifyImageRoomId
console.log(uuidV4)
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('user/login', this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
this.loading = false
})
.catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
},
getOtherQuery(query) {
return Object.keys(query).reduce((acc, cur) => {
if (cur !== 'redirect') {
acc[cur] = query[cur]
}
return acc
}, {})
},
// 生成随机数
randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min)
},
// 切换验证码
refreshCode() {
let uuidV4 = uuid.v4().replace('-', '').replace('-', '').replace('-', '').replace('-', '') this.loginForm.roomId = uuidV4
this.verifyImageUrl = '/api/Operator/getCaptchaImage/120/40/' + this.loginForm.roomId
console.log(uuidV4)
},
// 生成四位随机验证码
makeCode(o, l) {
for (let i = 0; i < l; i++) {
this.identifyCode += this.identifyCodes[
this.randomNum(0, this.identifyCodes.length)
]
}
console.log(this.identifyCode)
}
}
}
</script> <style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ $bg: #283443;
$light_gray: #fff;
$cursor: #fff; @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
.login-container .el-input input {
color: $cursor;
}
} /* reset element-ui css */
.login-container {
background: url("~@/assets/background.jpg") no-repeat;
min-height: 100vh; .el-input {
display: inline-block;
height: 47px;
width: 85%; input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 47px;
caret-color: $cursor; &:-webkit-autofill {
box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-text-fill-color: $cursor !important;
}
}
} .el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545; .el-form-item__error {
color: rgb(223, 223, 176);
}
}
}
</style> <style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee; .login-container {
min-height: 100%;
width: 100%;
background-color: $bg;
overflow: hidden; .login-form {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 520px;
max-width: 100%;
padding: 160px 35px 0;
margin: 0 auto;
overflow: hidden;
} .tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px; span {
&:first-of-type {
margin-right: 16px;
}
}
} .svg-container {
padding: 6px 5px 6px 15px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
display: inline-block;
} .title-container {
position: relative; .title {
font-size: 42px;
color: $light_gray;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}
} .show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
.identifyCode {
position: absolute;
right: 10px;
top: 5px;
} .thirdparty-button {
position: absolute;
right: 0;
bottom: 6px;
} @media only screen and (max-width: 470px) {
.thirdparty-button {
display: none;
}
}
}
</style>

后端接口


/// <summary>
/// 获取验证码
/// </summary>
/// <returns></returns>
[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");
} /// <summary>
/// 登录
/// </summary>
/// <returns></returns>
[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<BaseOperator>()
.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<BaseOperator>(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实现后端验证码逻辑的更多相关文章

  1. ASP.NET Core 与 Vue.js 服务端渲染

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...

  2. docker部署angular和asp.net core组成的前后端分离项目

    最近使用docker对项目进行了改进,把步骤记录一下,顺便说明一下项目的结构. 项目是前后端分离的项目,后端使用asp.net core 2.2,采用ddd+cqrs架构的分层思想,前端使用的是ang ...

  3. 运行Vue在ASP.NET Core应用程序并部署在IIS上

    前言 项目一直用的ASP.NET Core,但是呢我对ASP.NET Core一些原理也还未开始研究,仅限于会用,不过园子中已有大量文章存在,借着有点空余时间,我们来讲讲如何利用ASP.NET Cor ...

  4. 用ASP.NET Core重写了一款网络考试培训的免费软件

    在IT圈混迹了近十年,今已正当而立之年却仍一事无成,心中倍感惶恐惭愧.面对竟争如此激列的环境,该如何应对?却也知不能让自已闲着,得转起来,动起来.于是,便想着利用最新技术栈将自已原来的收费产品重写一次 ...

  5. 初探ASP.NET Core 3.x (3) - Web的运作流程和ASP.NET Core的运作结构

    本文地址:https://www.cnblogs.com/oberon-zjt0806/p/12215717.html 注意:本篇大量地使用了mermaid绘制图表,加载需要较长的时间,请见谅 [TO ...

  6. 使用xunit对asp.net core webapi进行集成测试

    新项目我们采用前后端分离,后端采用asp.net core webapi, 如何对后端代码进行自动化测试呢,有以下几种方案: 1. 单元测试,目前这个方案对我们来说难度很大,抛开时间的问题,单元测试对 ...

  7. ASP.NET Core 1.0 静态文件、路由、自定义中间件、身份验证简介

    概述 ASP.NET Core 1.0是ASP.NET的一个重要的重新设计. 例如,在ASP.NET Core中,使用Middleware编写请求管道. ASP.NET Core中间件对HttpCon ...

  8. [译]ASP.NET Core 2.0 区域

    问题 如何将一个规模庞大的ASP.NET Core 2.0应用程序进行逻辑分组? 答案 新建一个ASP.NET Core 2.0空项目,修改Startup类,增加Mvc服务和中间件: public v ...

  9. 发放春节福利,ASP.NET Core断点续传

    ASP.NET Core断点续传 在ASP.NET WebAPi写过完整的断点续传文章,目前我对ASP.NET Core仅止于整体上会用,对于原理还未去深入学习,由于有园友想看断点续传在ASP.NET ...

随机推荐

  1. SpringBoot 项目 部署 jar方式

    SpringBoot部署-jar方式 步骤1部署方式 Springboot 和我们之前学习的web 应用程序不一样,其本质上是一个 Java 应用程序,那么又如何部署呢?  通常来说,Springbo ...

  2. 【转】风控中的特征评价指标(二)——PSI

    转自:https://zhuanlan.zhihu.com/p/79682292 风控业务背景 在风控中,稳定性压倒一切.原因在于,一套风控模型正式上线运行后往往需要很久(通常一年以上)才会被替换下线 ...

  3. github图文入门教程

    目录 1.注册,安装git 2.初始化git 3.git本地仓库结构 4.初始化第一个git仓库 5.远程仓库的修改 6.总结 1.注册,安装git ①.注册一个github账号 并建立一个仓库 ②. ...

  4. Django(33)Django操作cookie

    前言 cookie:在网站中,http请求是无状态的.也就是说即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不能知道当前请求是哪个用户.cookie的出现就是为了解决这个问题,第一次登录 ...

  5. HTML中的全局属性

    一.全局属性和局部属性 每种元素都有自己规定的属性,这种属性成为局部属性.还有另外一种属性,他可以用来配置所有元素的共有行为,这种属性成为称为全局属性.全局属性可以用在任何一个元素身上,但是不一定会带 ...

  6. Python socket 编程实验

    实验内容 1.编写一个基于UDP协议的客户机与服务器程序,实现相互通讯. 2.编写一个基于TCP协议的客户机与服务器程序,实现相互通讯. 3.捕获以上两种通讯的数据包,使用Wireshark进行分析, ...

  7. Linux基本原则

    Bash特性 Shell shell(外壳),广义的shell可以理解为是用户的工作环境,在windows看来桌面就是一个shell,在linux看来终端就是shell 常见的shell有两种,一种是 ...

  8. Linux进阶之环境变量文件/etc/profile、/etc/bashrc、/etc/environment

    一.Centos 环境变量/etc/profile和/etc/profile.d 1.两个文件都是设置环境变量的文件. 2./etc/profile 是永久性的环境变量,是全局变量,/etc/prof ...

  9. Linux进阶之排错

    Permission denied 检查selinux长时间没有响应 防火墙 nginx和httpd可以自检nginx和httpd有日志 /var/log/nginx/ /var/log/httpd/ ...

  10. .NET平台系列16 .NET5/Asp.Net Core 在全球Web框架权威性能测试 Web Framework Benchmarks 中的吊炸天表现

    系列目录     [已更新最新开发文章,点击查看详细] TechEmpower Web Framework Benchmarks 是许多Web应用程序框架执行基本任务(如JSON序列化.数据库访问和服 ...