gitee
/
snowy
mirror of https://gitee.com/xiaonuobase/snowy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of https://gitee.com/schonglin/xiaonuo-vue 

# Conflicts:
#	xiaonuo-base/xiaonuo-system/src/main/java/com/cn/xiaonuo/sys/modular/auth/controller/SysLoginController.java
#	xiaonuo-base/xiaonuo-system/src/main/java/com/cn/xiaonuo/sys/provider/CaptchaCacheServiceProvider.java
pull/22/head
ZouLiFu 2021-01-22 10:48:29 +08:00
parent a497693b82 ae368dc117
commit 183980d655
11 changed files with 407 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_web/src/api/modular/system/loginManage.js
View File

@ -76,11 +76,11 @@ export function getSmsCaptcha (parameter) {
})
}
/**
* 获取验证码开关
*
* @author Jax
* @param parameter
* @date 2021/1/22 00:00
*/
export function getCaptchaOpen (parameter) {
return axios({
@ -88,4 +88,4 @@ export function getCaptchaOpen (parameter) {
method: 'get',
params: parameter
})
}
}

110
_web/src/components/verifition/Verify.vue
View File

@ -1,30 +1,31 @@
<template>
<div :class="mode=='pop'?'mask':''" v-show="showBox">
<div :class="mode=='pop'?'mask':''" v-show="showBox">
<div :class="mode=='pop'?'verifybox':''" :style="{'max-width':parseInt(imgSize.width)+30+'px'}">
<div class="verifybox-top" v-if="mode=='pop'">
请完成安全验证
<span class="verifybox-close" @click="closeBox">
<i class="iconfont icon-close"></i>
</span>
</div>
<div class="verifybox-bottom" :style="{padding:mode=='pop'?'15px':'0'}">
<!-- 验证码容器 -->
<components v-if="componentType"
:is="componentType"
:captchaType="captchaType"
:type="verifyType"
:figure="figure"
:arith="arith"
:mode="mode"
:vSpace="vSpace"
:explain="explain"
:imgSize="imgSize"
:blockSize="blockSize"
:barSize="barSize"
ref="instance"></components>
</div>
<div class="verifybox-top" v-if="mode=='pop'">
请完成安全验证
<span @click="closeBox" class="verifybox-close">
<i class="iconfont icon-close"></i>
</span>
</div>
<div :style="{padding:mode=='pop'?'15px':'0'}" class="verifybox-bottom">
<!-- 验证码容器 -->
<components
:arith="arith"
:barSize="barSize"
:blockSize="blockSize"
:captchaType="captchaType"
:explain="explain"
:figure="figure"
:imgSize="imgSize"
:is="componentType"
:mode="mode"
:type="verifyType"
:vSpace="vSpace"
ref="instance"
v-if="componentType"></components>
</div>
</div>
</div>
</div>
</template>
<script type="text/babel">
/**
@ -44,31 +45,35 @@
default() {
// 默认语言不输入为浏览器语言
if (navigator.language) {
var language = navigator.language;
}
else {
var language = navigator.browserLanguage;
var language = navigator.language
} else {
// eslint-disable-next-line no-redeclare
var language = navigator.browserLanguage
}
return language
}
},
captchaType:{
type:String,
required:true
captchaType: {
type: String,
required: true
},
// eslint-disable-next-line vue/require-default-prop
figure: {
type: Number
},
// eslint-disable-next-line vue/require-default-prop
arith: {
type: Number
},
mode: {
type: String,
default:'pop'
default: 'pop'
},
// eslint-disable-next-line vue/require-default-prop
vSpace: {
type: Number
},
// eslint-disable-next-line vue/require-default-prop
explain: {
type: String
},
@ -81,17 +86,19 @@
}
}
},
// eslint-disable-next-line vue/require-default-prop
blockSize: {
type: Object
},
// eslint-disable-next-line vue/require-default-prop
barSize: {
type: Object
},
}
},
data() {
return {
// showBox:true,
clickShow:false,
clickShow: false,
// 内部类型
verifyType: undefined,
// 所用组件类型
@ -110,7 +117,7 @@
return this.$t(text)
} else {
// 兼容不存在的语言
let i18n = this.$options.i18n.messages[this.locale] || this.$options.i18n.messages['en-US']
const i18n = this.$options.i18n.messages[this.locale] || this.$options.i18n.messages['en-US']
return i18n[text]
}
},
@ -123,13 +130,14 @@
this.instance.refresh()
}
},
closeBox(){
closeBox() {
this.clickShow = false
this.refresh();
this.refresh()
},
show(){
if (this.mode=="pop") {
this.clickShow = true;
show() {
// eslint-disable-next-line eqeqeq
if (this.mode == 'pop') {
this.clickShow = true
}
}
},
@ -137,16 +145,17 @@
instance() {
return this.$refs.instance || {}
},
showBox(){
if (this.mode=='pop') {
showBox() {
// eslint-disable-next-line eqeqeq
if (this.mode == 'pop') {
return this.clickShow
}else{
return true;
} else {
return true
}
}
},
watch: {
captchaType:{
captchaType: {
immediate: true,
handler(captchaType) {
switch (captchaType.toString()) {
@ -160,12 +169,12 @@
break
}
}
},
}
},
components: {
VerifySlide,
VerifyPoints
},
}
}
</script>
<style>
@ -224,11 +233,11 @@
color: #fff;
}
.suc-bg{
background-color:rgba(92, 184, 92,.5);
background-color:rgba(92, 184, 92,.5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
}
.err-bg{
background-color:rgba(217, 83, 79,.5);
background-color:rgba(217, 83, 79,.5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
}
.tips-enter,.tips-leave-to{
@ -287,8 +296,7 @@
border: none;
margin-top: 10px;
}
/*滑动验证码*/
.verify-bar-area {
position: relative;

228
_web/src/components/verifition/Verify/VerifyPoints.vue
View File

@ -1,69 +1,81 @@
/* eslint-disable no-unused-vars */
<template>
<div style="position: relative"
>
<div class="verify-img-out">
<div class="verify-img-panel" :style="{'width': setSize.imgWidth,
'height': setSize.imgHeight,
'background-size' : setSize.imgWidth + ' '+ setSize.imgHeight,
'margin-bottom': vSpace + 'px'}"
>
<div class="verify-refresh" style="z-index:3" @click="refresh" v-show="showRefresh">
<i class="iconfont icon-refresh"></i>
</div>
<img :src="'data:image/png;base64,'+pointBackImgBase"
ref="canvas"
alt="" style="width:100%;height:100%;display:block"
@click="bindingClick?canvasClick($event):undefined">
<div
style="position: relative"
>
<div class="verify-img-out">
<div
:style="{'width': setSize.imgWidth,
'height': setSize.imgHeight,
'background-size' : setSize.imgWidth + ' '+ setSize.imgHeight,
'margin-bottom': vSpace + 'px'}"
class="verify-img-panel"
>
<div @click="refresh" class="verify-refresh" style="z-index:3" v-show="showRefresh">
<i class="iconfont icon-refresh"></i>
</div>
<img
:src="'data:image/png;base64,'+pointBackImgBase"
@click="bindingClick?canvasClick($event):undefined"
alt=""
ref="canvas"
style="width:100%;height:100%;display:block">
<div v-for="(tempPoint, index) in tempPoints" :key="index" class="point-area"
:style="{
'background-color':'#1abd6c',
color:'#fff',
'z-index':9999,
width:'20px',
height:'20px',
'text-align':'center',
'line-height':'20px',
'border-radius': '50%',
position:'absolute',
top:parseInt(tempPoint.y-10) + 'px',
left:parseInt(tempPoint.x-10) + 'px'
}">
{{index + 1}}
</div>
</div>
</div>
<!-- 'height': this.barSize.height, -->
<div class="verify-bar-area"
:style="{'width': setSize.imgWidth,
'color': this.barAreaColor,
'border-color': this.barAreaBorderColor,
'line-height':this.barSize.height}">
<span class="verify-msg">{{text}}</span>
<div
:key="index"
:style="{
'background-color':'#1abd6c',
color:'#fff',
'z-index':9999,
width:'20px',
height:'20px',
'text-align':'center',
'line-height':'20px',
'border-radius': '50%',
position:'absolute',
top:parseInt(tempPoint.y-10) + 'px',
left:parseInt(tempPoint.x-10) + 'px'
}"
class="point-area"
v-for="(tempPoint, index) in tempPoints">
{{ index + 1 }}
</div>
</div>
</div>
<!-- 'height': this.barSize.height, -->
<div
:style="{'width': setSize.imgWidth,
'color': this.barAreaColor,
'border-color': this.barAreaBorderColor,
'line-height':this.barSize.height}"
class="verify-bar-area">
<span class="verify-msg">{{ text }}</span>
</div>
</div>
</template>
<script type="text/babel">
/**
* VerifyPoints
* @description 点选
* */
import {resetSize, _code_chars, _code_color1, _code_color2} from './../utils/util'
import {aesEncrypt} from "./../utils/ase"
import {reqGet,reqCheck} from "./../api/index"
// _code_chars, _code_color1, _code_color2
import { resetSize } from './../utils/util'
import { aesEncrypt } from './../utils/ase'
import { reqGet, reqCheck } from './../api/index'
export default {
name: 'VerifyPoints',
props: {
//弹出式pop，固定fixed
// 弹出式pop，固定fixed
mode: {
type: String,
default: 'fixed'
},
captchaType:{
type:String,
// eslint-disable-next-line vue/require-default-prop
captchaType: {
type: String
},
//间隔
// 间隔
vSpace: {
type: Number,
default: 5
@ -89,14 +101,14 @@
},
data() {
return {
secretKey:'', //后端返回的ase加密秘钥
checkNum:3, //默认需要点击的字数
fontPos: [], //选中的坐标信息
checkPosArr: [], //用户点击的坐标
num: 1, //点击的记数
pointBackImgBase:'', //后端获取到的背景图片
poinTextList:[], //后端返回的点击字体顺序
backToken:'', //后端返回的token值
secretKey: '', // 后端返回的ase加密秘钥
checkNum: 3, // 默认需要点击的字数
fontPos: [], // 选中的坐标信息
checkPosArr: [], // 用户点击的坐标
num: 1, // 点击的记数
pointBackImgBase: '', // 后端获取到的背景图片
poinTextList: [], // 后端返回的点击字体顺序
backToken: '', // 后端返回的token值
setSize: {
imgHeight: 0,
imgWidth: 0,
@ -118,72 +130,75 @@
},
methods: {
init() {
//加载页面
// 加载页面
this.fontPos.splice(0, this.fontPos.length)
this.checkPosArr.splice(0, this.checkPosArr.length)
this.num = 1
this.getPictrue();
this.getPictrue()
this.$nextTick(() => {
this.setSize = this.resetSize(this) //重新设置宽度高度
this.setSize = this.resetSize(this) // 重新设置宽度高度
this.$parent.$emit('ready', this)
})
},
canvasClick(e) {
this.checkPosArr.push(this.getMousePos(this.$refs.canvas, e));
this.checkPosArr.push(this.getMousePos(this.$refs.canvas, e))
// eslint-disable-next-line eqeqeq
if (this.num == this.checkNum) {
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
//按比例转换坐标值
this.checkPosArr = this.pointTransfrom(this.checkPosArr,this.setSize);
//等创建坐标执行完
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e))
// 按比例转换坐标值
this.checkPosArr = this.pointTransfrom(this.checkPosArr, this.setSize)
// 等创建坐标执行完
setTimeout(() => {
// var flag = this.comparePos(this.fontPos, this.checkPosArr);
//发送后端请求
var captchaVerification = this.secretKey? aesEncrypt(this.backToken+'---'+JSON.stringify(this.checkPosArr),this.secretKey):this.backToken+'---'+JSON.stringify(this.checkPosArr)
let data = {
captchaType:this.captchaType,
"pointJson":this.secretKey? aesEncrypt(JSON.stringify(this.checkPosArr),this.secretKey):JSON.stringify(this.checkPosArr),
"token":this.backToken
// 发送后端请求
var captchaVerification = this.secretKey ? aesEncrypt(this.backToken + '---' + JSON.stringify(this.checkPosArr), this.secretKey) : this.backToken + '---' + JSON.stringify(this.checkPosArr)
const data = {
captchaType: this.captchaType,
'pointJson': this.secretKey ? aesEncrypt(JSON.stringify(this.checkPosArr), this.secretKey) : JSON.stringify(this.checkPosArr),
'token': this.backToken
}
reqCheck(data).then(res=>{
if (res.repCode == "0000") {
reqCheck(data).then(res => {
// eslint-disable-next-line eqeqeq
if (res.repCode == '0000') {
this.barAreaColor = '#4cae4c'
this.barAreaBorderColor = '#5cb85c'
this.text = '验证成功'
this.bindingClick = false
if (this.mode=='pop') {
setTimeout(()=>{
this.$parent.clickShow = false;
this.refresh();
},1500)
// eslint-disable-next-line eqeqeq
if (this.mode == 'pop') {
setTimeout(() => {
this.$parent.clickShow = false
this.refresh()
}, 1500)
}
this.$parent.$emit('success', {captchaVerification})
}else{
this.$parent.$emit('success', { captchaVerification })
} else {
this.$parent.$emit('error', this)
this.barAreaColor = '#d9534f'
this.barAreaBorderColor = '#d9534f'
this.text = '验证失败'
setTimeout(() => {
this.refresh();
}, 700);
this.refresh()
}, 700)
}
})
}, 400);
}, 400)
}
if (this.num < this.checkNum) {
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e))
}
},
//获取坐标
// 获取坐标
getMousePos: function (obj, e) {
var x = e.offsetX
var y = e.offsetY
return {x, y}
var x = e.offsetX
var y = e.offsetY
return { x, y }
},
//创建坐标点
// 创建坐标点
createPoint: function (pos) {
this.tempPoints.push(Object.assign({}, pos))
return ++this.num;
return ++this.num
},
refresh: function () {
this.tempPoints.splice(0, this.tempPoints.length)
@ -193,34 +208,35 @@
this.fontPos.splice(0, this.fontPos.length)
this.checkPosArr.splice(0, this.checkPosArr.length)
this.num = 1
this.getPictrue();
this.getPictrue()
this.text = '验证失败'
this.showRefresh = true
},
// 请求背景图片和验证图片
getPictrue(){
let data = {
captchaType:this.captchaType
getPictrue() {
const data = {
captchaType: this.captchaType
}
reqGet(data).then(res=>{
if (res.repCode == "0000") {
reqGet(data).then(res => {
// eslint-disable-next-line eqeqeq
if (res.repCode == '0000') {
this.pointBackImgBase = res.repData.originalImageBase64
this.backToken = res.repData.token
this.secretKey = res.repData.secretKey
this.poinTextList = res.repData.wordList
this.text = '请依次点击【' + this.poinTextList.join(",") + '】'
}else{
this.text = res.repMsg;
this.text = '请依次点击【' + this.poinTextList.join(',') + '】'
} else {
this.text = res.repMsg
}
})
},
//坐标转换函数
pointTransfrom(pointArr,imgSize){
var newPointArr = pointArr.map(p=>{
let x = Math.round(310 * p.x/parseInt(imgSize.imgWidth))
let y =Math.round(155 * p.y/parseInt(imgSize.imgHeight))
return {x,y}
// 坐标转换函数
pointTransfrom(pointArr, imgSize) {
var newPointArr = pointArr.map(p => {
const x = Math.round(310 * p.x / parseInt(imgSize.imgWidth))
const y = Math.round(155 * p.y / parseInt(imgSize.imgHeight))
return { x, y }
})
// console.log(newPointArr,"newPointArr");
return newPointArr
@ -240,6 +256,6 @@
this.$el.onselectstart = function () {
return false
}
},
}
}
</script>
</script>

327
_web/src/components/verifition/Verify/VerifySlide.vue
View File

@ -1,66 +1,78 @@
<template>
<div style="position: relative;">
<div v-if="type === '2'" class="verify-img-out"
:style="{height: (parseInt(setSize.imgHeight) + vSpace) + 'px'}"
>
<div class="verify-img-panel" :style="{width: setSize.imgWidth,
height: setSize.imgHeight,}">
<img :src="'data:image/png;base64,'+backImgBase" alt="" style="width:100%;height:100%;display:block">
<div class="verify-refresh" @click="refresh" v-show="showRefresh"><i class="iconfont icon-refresh"></i>
</div>
<transition name="tips">
<span class="verify-tips" v-if="tipWords" :class="passFlag ?'suc-bg':'err-bg'">{{tipWords}}</span>
</transition>
</div>
</div>
<!-- 公共部分 -->
<div class="verify-bar-area" :style="{width: setSize.imgWidth,
height: barSize.height,
'line-height':barSize.height}">
<span class="verify-msg" v-text="text"></span>
<div class="verify-left-bar"
:style="{width: (leftBarWidth!==undefined)?leftBarWidth: barSize.height, height: barSize.height, 'border-color': leftBarBorderColor, transaction: transitionWidth}">
<span class="verify-msg" v-text="finishText"></span>
<div class="verify-move-block"
@touchstart="start"
@mousedown="start"
:style="{width: barSize.height, height: barSize.height, 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}">
<i :class="['verify-icon iconfont', iconClass]"
:style="{color: iconColor}"></i>
<div v-if="type === '2'" class="verify-sub-block"
:style="{'width':Math.floor(parseInt(setSize.imgWidth)*47/310)+ 'px',
'height': setSize.imgHeight,
'top':'-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
}">
<img :src="'data:image/png;base64,'+blockBackImgBase" alt="" style="width:100%;height:100%;display:block">
</div>
</div>
</div>
<div style="position: relative;">
<div
:style="{height: (parseInt(setSize.imgHeight) + vSpace) + 'px'}"
class="verify-img-out"
v-if="type === '2'"
>
<div
:style="{width: setSize.imgWidth,
height: setSize.imgHeight,}"
class="verify-img-panel">
<img :src="'data:image/png;base64,'+backImgBase" alt="" style="width:100%;height:100%;display:block">
<div @click="refresh" class="verify-refresh" v-show="showRefresh"><i class="iconfont icon-refresh"></i>
</div>
<transition name="tips">
<span :class="passFlag ?'suc-bg':'err-bg'" class="verify-tips" v-if="tipWords">{{ tipWords }}</span>
</transition>
</div>
</div>
<!-- 公共部分 -->
<div
:style="{width: setSize.imgWidth,
height: barSize.height,
'line-height':barSize.height}"
class="verify-bar-area">
<span class="verify-msg" v-text="text"></span>
<div
:style="{width: (leftBarWidth!==undefined)?leftBarWidth: barSize.height, height: barSize.height, 'border-color': leftBarBorderColor, transaction: transitionWidth}"
class="verify-left-bar">
<span class="verify-msg" v-text="finishText"></span>
<div
:style="{width: barSize.height, height: barSize.height, 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}"
@mousedown="start"
@touchstart="start"
class="verify-move-block">
<i
:class="['verify-icon iconfont', iconClass]"
:style="{color: iconColor}"></i>
<div
:style="{'width':Math.floor(parseInt(setSize.imgWidth)*47/310)+ 'px',
'height': setSize.imgHeight,
'top':'-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
}"
class="verify-sub-block"
v-if="type === '2'">
<img :src="'data:image/png;base64,'+blockBackImgBase" alt="" style="width:100%;height:100%;display:block">
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/babel">
/**
* VerifySlide
* @description 滑块
* */
import {aesEncrypt} from "./../utils/ase"
import {resetSize} from './../utils/util'
import {reqGet,reqCheck} from "./../api/index"
import { aesEncrypt } from './../utils/ase'
import { resetSize } from './../utils/util'
import { reqGet, reqCheck } from './../api/index'
// "captchaType":"blockPuzzle",
export default {
name: 'VerifySlide',
props: {
captchaType:{
type:String,
// eslint-disable-next-line vue/require-default-prop
captchaType: {
type: String
},
type: {
type: String,
default: '1'
},
//弹出式pop，固定fixed
// 弹出式pop，固定fixed
mode: {
type: String,
default: 'fixed'
@ -103,17 +115,17 @@
},
data() {
return {
secretKey:'', //后端返回的加密秘钥 字段
passFlag:'', //是否通过的标识
backImgBase:'', //验证码背景图片
blockBackImgBase:'', //验证滑块的背景图片
backToken:"", //后端返回的唯一token值
startMoveTime:"", //移动开始的时间
endMovetime:'', //移动结束的时间
tipsBackColor:'', //提示词的背景颜色
tipWords:'',
secretKey: '', // 后端返回的加密秘钥 字段
passFlag: '', // 是否通过的标识
backImgBase: '', // 验证码背景图片
blockBackImgBase: '', // 验证滑块的背景图片
backToken: '', // 后端返回的唯一token值
startMoveTime: '', // 移动开始的时间
endMovetime: '', // 移动结束的时间
tipsBackColor: '', // 提示词的背景颜色
tipWords: '',
text: '',
finishText:'',
finishText: '',
setSize: {
imgHeight: 0,
imgWidth: 0,
@ -129,8 +141,8 @@
leftBarBorderColor: '#ddd',
iconColor: undefined,
iconClass: 'icon-right',
status: false, //鼠标状态
isEnd: false, //是够验证完成
status: false, // 鼠标状态
isEnd: false, // 是够验证完成
showRefresh: true,
transitionLeft: '',
transitionWidth: ''
@ -147,10 +159,10 @@
methods: {
init() {
this.text = this.explain
this.getPictrue();
this.getPictrue()
this.$nextTick(() => {
let setSize = this.resetSize(this) //重新设置宽度高度
for (let key in setSize) {
const setSize = this.resetSize(this) // 重新设置宽度高度
for (const key in setSize) {
this.$set(this.setSize, key, setSize[key])
}
this.$parent.$emit('ready', this)
@ -158,131 +170,146 @@
var _this = this
window.removeEventListener("touchmove", function (e) {
_this.move(e);
});
window.removeEventListener("mousemove", function (e) {
_this.move(e);
});
window.removeEventListener('touchmove', function (e) {
_this.move(e)
})
window.removeEventListener('mousemove', function (e) {
_this.move(e)
})
//鼠标松开
window.removeEventListener("touchend", function () {
_this.end();
});
window.removeEventListener("mouseup", function () {
_this.end();
});
// 鼠标松开
window.removeEventListener('touchend', function () {
_this.end()
})
window.removeEventListener('mouseup', function () {
_this.end()
})
window.addEventListener("touchmove", function (e) {
_this.move(e);
});
window.addEventListener("mousemove", function (e) {
_this.move(e);
});
window.addEventListener('touchmove', function (e) {
_this.move(e)
})
window.addEventListener('mousemove', function (e) {
_this.move(e)
})
//鼠标松开
window.addEventListener("touchend", function () {
_this.end();
});
window.addEventListener("mouseup", function () {
_this.end();
});
// 鼠标松开
window.addEventListener('touchend', function () {
_this.end()
})
window.addEventListener('mouseup', function () {
_this.end()
})
},
//鼠标按下
// 鼠标按下
start: function (e) {
e = e || window.event
if (!e.touches) { //兼容PC端
var x = e.clientX;
} else { //兼容移动端
var x = e.touches[0].pageX;
if (!e.touches) { // 兼容PC端
var x = e.clientX
} else { // 兼容移动端
// eslint-disable-next-line no-redeclare
var x = e.touches[0].pageX
}
this.startLeft =Math.floor(x - this.barArea.getBoundingClientRect().left);
this.startMoveTime = +new Date(); //开始滑动的时间
this.startLeft = Math.floor(x - this.barArea.getBoundingClientRect().left)
this.startMoveTime = +new Date() // 开始滑动的时间
// eslint-disable-next-line eqeqeq
if (this.isEnd == false) {
this.text = ''
this.moveBlockBackgroundColor = '#337ab7'
this.leftBarBorderColor = '#337AB7'
this.iconColor = '#fff'
e.stopPropagation();
this.status = true;
e.stopPropagation()
this.status = true
}
},
//鼠标移动
// 鼠标移动
move: function (e) {
e = e || window.event
// eslint-disable-next-line eqeqeq
if (this.status && this.isEnd == false) {
if (!e.touches) { //兼容PC端
var x = e.clientX;
} else { //兼容移动端
var x = e.touches[0].pageX;
if (!e.touches) { // 兼容PC端
var x = e.clientX
} else { // 兼容移动端
// eslint-disable-next-line no-redeclare
var x = e.touches[0].pageX
}
var bar_area_left = this.barArea.getBoundingClientRect().left;
var move_block_left = x - bar_area_left //小方块相对于父元素的left值
// eslint-disable-next-line camelcase
var bar_area_left = this.barArea.getBoundingClientRect().left
// eslint-disable-next-line camelcase
var move_block_left = x - bar_area_left // 小方块相对于父元素的left值
// eslint-disable-next-line camelcase
if (move_block_left >= this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2) {
move_block_left = this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2;
// eslint-disable-next-line camelcase
move_block_left = this.barArea.offsetWidth - parseInt(parseInt(this.blockSize.width) / 2) - 2
}
// eslint-disable-next-line camelcase
if (move_block_left <= 0) {
move_block_left = parseInt(parseInt(this.blockSize.width) / 2);
// eslint-disable-next-line camelcase
move_block_left = parseInt(parseInt(this.blockSize.width) / 2)
}
//拖动后小方块的left值
this.moveBlockLeft = (move_block_left - this.startLeft) + "px"
this.leftBarWidth = (move_block_left - this.startLeft) + "px"
// 拖动后小方块的left值
// eslint-disable-next-line camelcase
this.moveBlockLeft = (move_block_left - this.startLeft) + 'px'
// eslint-disable-next-line camelcase
this.leftBarWidth = (move_block_left - this.startLeft) + 'px'
}
},
//鼠标松开
// 鼠标松开
end: function () {
this.endMovetime = +new Date();
var _this = this;
//判断是否重合
this.endMovetime = +new Date()
var _this = this
// 判断是否重合
// eslint-disable-next-line eqeqeq
if (this.status && this.isEnd == false) {
var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''));
moveLeftDistance = moveLeftDistance * 310/ parseInt(this.setSize.imgWidth)
let data = {
captchaType:this.captchaType,
"pointJson":this.secretKey ? aesEncrypt(JSON.stringify({x:moveLeftDistance,y:5.0}),this.secretKey):JSON.stringify({x:moveLeftDistance,y:5.0}),
"token":this.backToken
var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''))
moveLeftDistance = moveLeftDistance * 310 / parseInt(this.setSize.imgWidth)
const data = {
captchaType: this.captchaType,
'pointJson': this.secretKey ? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), this.secretKey) : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
'token': this.backToken
}
reqCheck(data).then(res=>{
if (res.repCode == "0000") {
reqCheck(data).then(res => {
// eslint-disable-next-line eqeqeq
if (res.repCode == '0000') {
this.moveBlockBackgroundColor = '#5cb85c'
this.leftBarBorderColor = '#5cb85c'
this.iconColor = '#fff'
this.iconClass = 'icon-check'
this.showRefresh = false
this.isEnd = true;
if (this.mode=='pop') {
setTimeout(()=>{
this.$parent.clickShow = false;
this.refresh();
},1500)
this.isEnd = true
// eslint-disable-next-line eqeqeq
if (this.mode == 'pop') {
setTimeout(() => {
this.$parent.clickShow = false
this.refresh()
}, 1500)
}
this.passFlag = true
this.tipWords = `${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`
var captchaVerification = this.secretKey ? aesEncrypt(this.backToken+'---'+JSON.stringify({x:moveLeftDistance,y:5.0}),this.secretKey):this.backToken+'---'+JSON.stringify({x:moveLeftDistance,y:5.0})
setTimeout(()=>{
this.tipWords = ""
this.$parent.closeBox();
this.$parent.$emit('success', {captchaVerification})
},1000)
}else{
this.tipWords = `${((this.endMovetime - this.startMoveTime) / 1000).toFixed(2)}s验证成功`
var captchaVerification = this.secretKey ? aesEncrypt(this.backToken + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }), this.secretKey) : this.backToken + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 })
setTimeout(() => {
this.tipWords = ''
this.$parent.closeBox()
this.$parent.$emit('success', { captchaVerification })
}, 1000)
} else {
this.moveBlockBackgroundColor = '#d9534f'
this.leftBarBorderColor = '#d9534f'
this.iconColor = '#fff'
this.iconClass = 'icon-close'
this.passFlag = false
setTimeout(function () {
_this.refresh();
}, 1000);
this.$parent.$emit('error',this)
this.tipWords = "验证失败"
setTimeout(()=>{
this.tipWords = ""
},1000)
_this.refresh()
}, 1000)
this.$parent.$emit('error', this)
this.tipWords = '验证失败'
setTimeout(() => {
this.tipWords = ''
}, 1000)
}
})
this.status = false;
this.status = false
}
},
@ -311,21 +338,22 @@
},
// 请求背景图片和验证图片
getPictrue(){
let data = {
captchaType:this.captchaType
getPictrue() {
const data = {
captchaType: this.captchaType
}
reqGet(data).then(res=>{
if (res.repCode == "0000") {
reqGet(data).then(res => {
// eslint-disable-next-line eqeqeq
if (res.repCode == '0000') {
this.backImgBase = res.repData.originalImageBase64
this.blockBackImgBase = res.repData.jigsawImageBase64
this.backToken = res.repData.token
this.secretKey = res.repData.secretKey
}else{
this.tipWords = res.repMsg;
} else {
this.tipWords = res.repMsg
}
})
},
}
},
watch: {
// type变化则全面刷新
@ -341,7 +369,6 @@
this.$el.onselectstart = function () {
return false
}
},
}
}
</script>

12
_web/src/components/verifition/utils/ase.js
View File

@ -2,10 +2,10 @@ import CryptoJS from 'crypto-js'
/**
* @word 要加密的内容
* @keyWord String 服务器随机返回的关键字
* */
export function aesEncrypt(word,keyWord="XwKsGlMcdPMEhR1B"){
var key = CryptoJS.enc.Utf8.parse(keyWord);
var srcs = CryptoJS.enc.Utf8.parse(word);
var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
return encrypted.toString();
*/
export function aesEncrypt(word, keyWord = 'XwKsGlMcdPMEhR1B') {
var key = CryptoJS.enc.Utf8.parse(keyWord)
var srcs = CryptoJS.enc.Utf8.parse(word)
var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
return encrypted.toString()
}

10
_web/src/components/verifition/utils/axios.js
View File

@ -1,13 +1,13 @@
import axios from 'axios';
import axios from 'axios'
axios.defaults.baseURL = process.env.BASE_API;
axios.defaults.baseURL = process.env.BASE_API
const service = axios.create({
timeout: 40000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json; charset=UTF-8'
},
}
})
service.interceptors.request.use(
config => {
@ -21,10 +21,10 @@ service.interceptors.request.use(
// response interceptor
service.interceptors.response.use(
response => {
const res = response.data;
const res = response.data
return res
},
error => {
() => {
}
)
export default service

24
_web/src/components/verifition/utils/util.js
View File

@ -1,36 +1,52 @@
export function resetSize(vm) {
var img_width, img_height, bar_width, bar_height; //图片的宽度、高度，移动条的宽度、高度
// eslint-disable-next-line camelcase
var img_width, img_height, bar_width, bar_height // 图片的宽度、高度，移动条的宽度、高度
var parentWidth = vm.$el.parentNode.offsetWidth || window.offsetWidth
var parentHeight = vm.$el.parentNode.offsetHeight || window.offsetHeight
// eslint-disable-next-line eqeqeq
if (vm.imgSize.width.indexOf('%') != -1) {
// eslint-disable-next-line camelcase
img_width = parseInt(this.imgSize.width) / 100 * parentWidth + 'px'
} else {
img_width = this.imgSize.width;
// eslint-disable-next-line camelcase
img_width = this.imgSize.width
}
// eslint-disable-next-line eqeqeq
if (vm.imgSize.height.indexOf('%') != -1) {
// eslint-disable-next-line camelcase
img_height = parseInt(this.imgSize.height) / 100 * parentHeight + 'px'
} else {
// eslint-disable-next-line camelcase
img_height = this.imgSize.height
}
// eslint-disable-next-line eqeqeq
if (vm.barSize.width.indexOf('%') != -1) {
// eslint-disable-next-line camelcase
bar_width = parseInt(this.barSize.width) / 100 * parentWidth + 'px'
} else {
// eslint-disable-next-line camelcase
bar_width = this.barSize.width
}
// eslint-disable-next-line eqeqeq
if (vm.barSize.height.indexOf('%') != -1) {
// eslint-disable-next-line camelcase
bar_height = parseInt(this.barSize.height) / 100 * parentHeight + 'px'
} else {
// eslint-disable-next-line camelcase
bar_height = this.barSize.height
}
return {imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height}
return { imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height }
}
// eslint-disable-next-line camelcase
export const _code_chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
// eslint-disable-next-line camelcase
export const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0']
export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']
// eslint-disable-next-line camelcase
export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']

10
xiaonuo-base/xiaonuo-core/src/main/java/com/cn/xiaonuo/core/context/constant/ConstantContextHolder.java
View File

@ -391,11 +391,11 @@ public class ConstantContextHolder {
}
/**
* @Description 获取验证码 开关标识
* @Date 2021/1/21 15:22
* @author Jax
* @return Boolean
**/
* 获取验证码 开关标识
*
* @author Jax
* @Date 2021/1/21 15:22
*/
public static Boolean getCaptchaOpenFlag() {
return getSysConfigWithDefault("XIAONUO_CAPTCHA_OPEN", Boolean.class, true);
}

4
xiaonuo-base/xiaonuo-core/src/main/java/com/cn/xiaonuo/core/exception/enums/AuthExceptionEnum.java
View File

@ -91,9 +91,7 @@ public enum AuthExceptionEnum implements AbstractBaseExceptionEnum {
/**
* 验证码错误
*/
CONSTANT_EMPTY_ERROR(10, "验证码错误"),
;
CONSTANT_EMPTY_ERROR(10, "验证码错误");
private final Integer code;

12
xiaonuo-base/xiaonuo-core/src/main/java/com/cn/xiaonuo/core/sms/modular/aliyun/AliyunSmsSender.java
View File

@ -39,7 +39,7 @@ public class AliyunSmsSender implements SmsSender {
@Override
public void sendSms(String phone, String templateCode, Map<String, Object> params) {
log.info("开始发送阿里云短信，手机号是：" + phone + ",模板号是：" + templateCode + ",参数是：" + params);
log.info(">>> 开始发送阿里云短信，手机号是：" + phone + ",模板号是：" + templateCode + ",参数是：" + params);
// 检验参数是否合法
assertSendSmsParams(phone, templateCode, params, aliyunSmsProperties);
@ -62,7 +62,7 @@ public class AliyunSmsSender implements SmsSender {
errorMessage = smsExceptionEnum.getMessage();
}
}
log.error("发送短信异常！code = " + code + ",message = " + errorMessage);
log.error(">>> 发送短信异常！code = " + code + ",message = " + errorMessage);
throw new AliyunSmsException(code, errorMessage);
}
}
@ -112,10 +112,10 @@ public class AliyunSmsSender implements SmsSender {
commonResponse = acsClient.getCommonResponse(request);
String data = commonResponse.getData();
String jsonResult = data.replaceAll("'\'", "");
log.info("获取到发送短信的响应结果！{}", jsonResult);
log.info(">>> 获取到发送短信的响应结果！{}", jsonResult);
return JSON.parseObject(jsonResult);
} catch (ClientException e) {
log.error("初始化阿里云sms异常！可能是accessKey和secret错误！", e);
log.error(">>> 初始化阿里云sms异常！可能是accessKey和secret错误！", e);
throw new AliyunSmsException(AliyunSmsResultEnum.INIT_SMS_CLIENT_ERROR.getCode(),
AliyunSmsResultEnum.INIT_SMS_CLIENT_ERROR.getMessage());
}
@ -130,7 +130,7 @@ public class AliyunSmsSender implements SmsSender {
private void assertSendSmsParams(String phoneNumber, String templateCode, Map<String, Object> params,
AliyunSmsProperties aliyunSmsProperties) {
if (ObjectUtil.hasEmpty(phoneNumber, templateCode, params, aliyunSmsProperties)) {
log.error("阿里云短信发送异常！请求参数存在空！");
log.error(">>> 阿里云短信发送异常！请求参数存在空！");
throw new AliyunSmsException(AliyunSmsResultEnum.PARAM_NULL.getCode(), AliyunSmsResultEnum.PARAM_NULL.getMessage());
}
}
@ -146,7 +146,7 @@ public class AliyunSmsSender implements SmsSender {
// 如果是单个签名就用一个签名发
if (!signName.contains(",")) {
log.info("发送短信，签名为：" + signName + ",电话为：" + phone);
log.info(">>> 发送短信，签名为：" + signName + ",电话为：" + phone);
return signName;
} else {
return multiSignManager.getSign(phone, signName);

6
xiaonuo-base/xiaonuo-core/src/main/java/com/cn/xiaonuo/core/sms/modular/aliyun/msign/impl/MapBasedMultiSignManager.java
View File

@ -33,18 +33,18 @@ public class MapBasedMultiSignManager implements MultiSignManager {
Object lastSignName = cacheMap.get(phone);
if (lastSignName == null) {
cacheMap.put(phone, signNames[0]);
log.info("发送短信，签名为：" + signNames[0] + ",电话为：" + phone);
log.info(">>> 发送短信，签名为：" + signNames[0] + ",电话为：" + phone);
return signNames[0];
} else {
for (String name : signNames) {
if (!name.equals(lastSignName)) {
cacheMap.put(phone, name);
log.info("发送短信，签名为：" + name + ",电话为：" + phone);
log.info(">>> 发送短信，签名为：" + name + ",电话为：" + phone);
return name;
}
}
cacheMap.put(phone, signNames[0]);
log.info("发送短信，签名为：" + signNames[0] + ",电话为：" + phone);
log.info(">>> 发送短信，签名为：" + signNames[0] + ",电话为：" + phone);
return signNames[0];
}
}