mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2025-09-13 14:57:14 +08:00
feat: 新增行为验证码
This commit is contained in:
Yoofff
@@ -17,3 +17,13 @@ export function getSmsCaptcha(query: { phone: string }) {
|
||||
export function getEmailCaptcha(query: { email: string }) {
|
||||
return http.get<boolean>(`${BASE_URL}/mail`, query)
|
||||
}
|
||||
|
||||
/** @desc 获取行为验证码 */
|
||||
export function getBehaviorCaptcha(params: any) {
|
||||
return http.get<Common.BehaviorCaptchaRes>(`${BASE_URL}/behavior`, {params});
|
||||
}
|
||||
|
||||
/** @desc 校验行为验证码 */
|
||||
export function checkBehaviorCaptcha(params: any) {
|
||||
return http.post<Common.CheckBehaviorCaptchaRes>(`${BASE_URL}/behavior`, params);
|
||||
}
|
||||
|
||||
@@ -18,3 +18,27 @@ export interface DashboardNoticeResp {
|
||||
title: string
|
||||
type: number
|
||||
}
|
||||
|
||||
/* 行为验证码类型 */
|
||||
export interface BehaviorCaptchaReq {
|
||||
captchaType?: string
|
||||
captchaVerification?: string
|
||||
clientUid?: string
|
||||
}
|
||||
|
||||
export interface BehaviorCaptchaRes {
|
||||
originalImageBase64: string
|
||||
point: {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
jigsawImageBase64: string
|
||||
token: string
|
||||
secretKey: string
|
||||
wordList: string[]
|
||||
}
|
||||
|
||||
export interface CheckBehaviorCaptchaRes {
|
||||
repCode: string
|
||||
repMsg: string
|
||||
}
|
||||
|
||||
296
src/components/Verify/Verify/VerifyPoints.vue
Normal file
296
src/components/Verify/Verify/VerifyPoints.vue
Normal file
@@ -0,0 +1,296 @@
|
||||
<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
|
||||
v-show="showRefresh"
|
||||
class="verify-refresh"
|
||||
style="z-index: 3"
|
||||
@click="refresh"
|
||||
>
|
||||
<i class="iconfont icon-refresh"></i>
|
||||
</div>
|
||||
<img
|
||||
ref="canvas"
|
||||
:src="`data:image/png;base64,${pointBackImgBase}`"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%; display: block"
|
||||
@click="bindingClick ? canvasClick($event) : undefined"
|
||||
/>
|
||||
|
||||
<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>
|
||||
|
||||
<div
|
||||
class="verify-bar-area"
|
||||
:style="{
|
||||
'width': setSize.imgWidth,
|
||||
'color': barAreaColor,
|
||||
'border-color': barAreaBorderColor,
|
||||
'line-height': barSize.height,
|
||||
}"
|
||||
>
|
||||
<span class="verify-msg">{{ text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
import {
|
||||
getCurrentInstance,
|
||||
nextTick,
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
toRefs
|
||||
} from 'vue'
|
||||
import {
|
||||
checkBehaviorCaptcha,
|
||||
getBehaviorCaptcha
|
||||
} from '@/apis/common/captcha'
|
||||
import { resetSize } from '@/utils/verify'
|
||||
import { aesEncrypt } from '@/utils/encrypt'
|
||||
|
||||
export default {
|
||||
name: 'VerifyPoints',
|
||||
props: {
|
||||
// 弹出式pop，固定fixed
|
||||
mode: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
captchaType: {
|
||||
type: String
|
||||
},
|
||||
// 间隔
|
||||
vSpace: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
imgSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '155px'
|
||||
}
|
||||
}
|
||||
},
|
||||
barSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '40px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const { mode, captchaType } = toRefs(props)
|
||||
const { proxy } = getCurrentInstance()
|
||||
const secretKey = ref('') // 后端返回的ase加密秘钥
|
||||
const checkNum = ref(3) // 默认需要点击的字数
|
||||
const fontPos = reactive([]) // 选中的坐标信息
|
||||
const checkPosArr = reactive([]) // 用户点击的坐标
|
||||
const num = ref(1) // 点击的记数
|
||||
const pointBackImgBase = ref('') // 后端获取到的背景图片
|
||||
const poinTextList = reactive([]) // 后端返回的点击字体顺序
|
||||
const backToken = ref('') // 后端返回的token值
|
||||
const setSize = reactive({
|
||||
imgHeight: 0,
|
||||
imgWidth: 0,
|
||||
barHeight: 0,
|
||||
barWidth: 0
|
||||
})
|
||||
const tempPoints = reactive([])
|
||||
const text = ref('')
|
||||
const barAreaColor = ref()
|
||||
const barAreaBorderColor = ref()
|
||||
const showRefresh = ref(true)
|
||||
const bindingClick = ref(true)
|
||||
|
||||
// 请求背景图片和验证图片
|
||||
function getPicture() {
|
||||
const data = {
|
||||
captchaType: captchaType.value
|
||||
}
|
||||
getBehaviorCaptcha(data).then((res) => {
|
||||
pointBackImgBase.value = res.data.originalImageBase64
|
||||
backToken.value = res.data.token
|
||||
secretKey.value = res.data.secretKey
|
||||
poinTextList.push(res.data.wordList)
|
||||
text.value = `请依次点击【${poinTextList.join(',')}】`
|
||||
poinTextList.length = 0
|
||||
})
|
||||
}
|
||||
|
||||
// 获取坐标
|
||||
const getMousePos = function (e) {
|
||||
const x = e.offsetX
|
||||
const y = e.offsetY
|
||||
return { x, y }
|
||||
}
|
||||
|
||||
// 创建坐标点
|
||||
const createPoint = function (pos) {
|
||||
tempPoints.push({ ...pos })
|
||||
return num.value + 1
|
||||
}
|
||||
|
||||
// 坐标转换函数
|
||||
const pointTransform = function (pointArr, imgSize) {
|
||||
return pointArr.map((p) => {
|
||||
const x = Math.round((310 * p.x) / Number.parseInt(imgSize.imgWidth, 10))
|
||||
const y = Math.round((155 * p.y) / Number.parseInt(imgSize.imgHeight, 10))
|
||||
return { x, y }
|
||||
})
|
||||
}
|
||||
|
||||
const init = () => {
|
||||
// 加载页面
|
||||
fontPos.splice(0, fontPos.length)
|
||||
checkPosArr.splice(0, checkPosArr.length)
|
||||
num.value = 1
|
||||
getPicture()
|
||||
nextTick(() => {
|
||||
const { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
|
||||
setSize.imgHeight = imgHeight
|
||||
setSize.imgWidth = imgWidth
|
||||
setSize.barHeight = barHeight
|
||||
setSize.barWidth = barWidth
|
||||
proxy.$parent.$emit('ready', proxy)
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
// 禁止拖拽
|
||||
init()
|
||||
proxy.$el.onselectstart = function () {
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
const refresh = function () {
|
||||
tempPoints.splice(0, tempPoints.length)
|
||||
barAreaColor.value = '#000'
|
||||
barAreaBorderColor.value = '#ddd'
|
||||
bindingClick.value = true
|
||||
fontPos.splice(0, fontPos.length)
|
||||
checkPosArr.splice(0, checkPosArr.length)
|
||||
num.value = 1
|
||||
getPicture()
|
||||
text.value = '验证失败'
|
||||
showRefresh.value = true
|
||||
}
|
||||
|
||||
const canvas = ref(null)
|
||||
const canvasClick = (e) => {
|
||||
checkPosArr.push(getMousePos(e))
|
||||
if (num.value === checkNum.value) {
|
||||
num.value = createPoint(getMousePos(e))
|
||||
// 按比例转换坐标值
|
||||
const arr = pointTransform(checkPosArr, setSize)
|
||||
checkPosArr.length = 0
|
||||
checkPosArr.push(...arr)
|
||||
// 等创建坐标执行完
|
||||
setTimeout(() => {
|
||||
// 发送后端请求
|
||||
const captchaVerification = secretKey.value
|
||||
? aesEncrypt(
|
||||
`${backToken.value}---${JSON.stringify(checkPosArr)}`,
|
||||
secretKey.value
|
||||
)
|
||||
: `${backToken.value}---${JSON.stringify(checkPosArr)}`
|
||||
const data = {
|
||||
captchaType: captchaType.value,
|
||||
pointJson: secretKey.value
|
||||
? aesEncrypt(JSON.stringify(checkPosArr), secretKey.value)
|
||||
: JSON.stringify(checkPosArr),
|
||||
token: backToken.value
|
||||
}
|
||||
checkBehaviorCaptcha(data).then((res) => {
|
||||
if (res.success && res.data.repCode === '0000') {
|
||||
barAreaColor.value = '#4cae4c'
|
||||
barAreaBorderColor.value = '#5cb85c'
|
||||
text.value = '验证成功'
|
||||
bindingClick.value = false
|
||||
if (mode.value === 'pop') {
|
||||
setTimeout(() => {
|
||||
proxy.$parent.clickShow = false
|
||||
refresh()
|
||||
}, 1500)
|
||||
}
|
||||
proxy.$parent.$emit('success', { captchaVerification })
|
||||
} else {
|
||||
proxy.$parent.$emit('error', proxy)
|
||||
barAreaColor.value = '#d9534f'
|
||||
barAreaBorderColor.value = '#d9534f'
|
||||
text.value = res.data.repMsg
|
||||
setTimeout(() => {
|
||||
refresh()
|
||||
}, 700)
|
||||
}
|
||||
})
|
||||
}, 400)
|
||||
}
|
||||
if (num.value < checkNum.value) {
|
||||
num.value = createPoint(getMousePos(e))
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
secretKey,
|
||||
checkNum,
|
||||
fontPos,
|
||||
checkPosArr,
|
||||
num,
|
||||
pointBackImgBase,
|
||||
poinTextList,
|
||||
backToken,
|
||||
setSize,
|
||||
tempPoints,
|
||||
text,
|
||||
barAreaColor,
|
||||
barAreaBorderColor,
|
||||
showRefresh,
|
||||
bindingClick,
|
||||
init,
|
||||
canvas,
|
||||
canvasClick,
|
||||
getMousePos,
|
||||
createPoint,
|
||||
refresh,
|
||||
getPicture,
|
||||
pointTransform
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
459
src/components/Verify/Verify/VerifySlide.vue
Normal file
459
src/components/Verify/Verify/VerifySlide.vue
Normal file
@@ -0,0 +1,459 @@
|
||||
<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 v-show="showRefresh" class="verify-refresh" @click="refresh"
|
||||
>
|
||||
<i class="iconfont icon-refresh"></i
|
||||
>
|
||||
</div>
|
||||
<transition name="tips">
|
||||
<span
|
||||
v-if="tipWords"
|
||||
class="verify-tips"
|
||||
: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"
|
||||
:style="{
|
||||
'width': barSize.height,
|
||||
'height': barSize.height,
|
||||
'background-color': moveBlockBackgroundColor,
|
||||
'left': moveBlockLeft,
|
||||
'transition': transitionLeft,
|
||||
}"
|
||||
@touchstart="start"
|
||||
@mousedown="start"
|
||||
>
|
||||
<i
|
||||
class="verify-icon iconfont" :class="[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;
|
||||
-webkit-user-drag: none;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
import {
|
||||
computed,
|
||||
getCurrentInstance,
|
||||
nextTick,
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
toRefs,
|
||||
watch
|
||||
} from 'vue'
|
||||
import {
|
||||
checkBehaviorCaptcha,
|
||||
getBehaviorCaptcha
|
||||
} from '@/apis/common/captcha'
|
||||
import { aesEncrypt } from '@/utils/encrypt'
|
||||
import { resetSize } from '@/utils/verify'
|
||||
|
||||
export default {
|
||||
name: 'VerifySlide',
|
||||
props: {
|
||||
captchaType: {
|
||||
type: String
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: '1'
|
||||
},
|
||||
// 弹出式pop，固定fixed
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'fixed'
|
||||
},
|
||||
vSpace: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
explain: {
|
||||
type: String,
|
||||
default: '向右滑动完成验证'
|
||||
},
|
||||
imgSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '155px'
|
||||
}
|
||||
}
|
||||
},
|
||||
blockSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '50px',
|
||||
height: '50px'
|
||||
}
|
||||
}
|
||||
},
|
||||
barSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '40px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const { mode, captchaType, type, blockSize, explain } = toRefs(props)
|
||||
const { proxy } = getCurrentInstance()
|
||||
const secretKey = ref() // 后端返回的ase加密秘钥
|
||||
const passFlag = ref() // 是否通过的标识
|
||||
const backImgBase = ref() // 验证码背景图片
|
||||
const blockBackImgBase = ref() // 验证滑块的背景图片
|
||||
const backToken = ref() // 后端返回的唯一token值
|
||||
const startMoveTime = ref() // 移动开始的时间
|
||||
const endMovetime = ref() // 移动结束的时间
|
||||
const tipsBackColor = ref() // 提示词的背景颜色
|
||||
const tipWords = ref()
|
||||
const text = ref()
|
||||
const finishText = ref()
|
||||
const setSize = reactive({
|
||||
imgHeight: 0,
|
||||
imgWidth: 0,
|
||||
barHeight: 0,
|
||||
barWidth: 0
|
||||
})
|
||||
const top = ref(0)
|
||||
const left = ref(0)
|
||||
const moveBlockLeft = ref()
|
||||
const leftBarWidth = ref()
|
||||
// 移动中样式
|
||||
const moveBlockBackgroundColor = ref()
|
||||
const leftBarBorderColor = ref('#ddd')
|
||||
const iconColor = ref()
|
||||
const iconClass = ref('icon-right')
|
||||
const status = ref(false) // 鼠标状态
|
||||
const isEnd = ref(false) // 是够验证完成
|
||||
const showRefresh = ref(true)
|
||||
const transitionLeft = ref('')
|
||||
const transitionWidth = ref('')
|
||||
const startLeft = ref(0)
|
||||
|
||||
// 请求背景图片和验证图片
|
||||
function getPicture() {
|
||||
const data = {
|
||||
captchaType: captchaType.value
|
||||
}
|
||||
getBehaviorCaptcha(data).then((res) => {
|
||||
backImgBase.value = res.data.originalImageBase64
|
||||
blockBackImgBase.value = res.data.jigsawImageBase64
|
||||
backToken.value = res.data.token
|
||||
secretKey.value = res.data.secretKey
|
||||
})
|
||||
}
|
||||
const barArea = computed(() => {
|
||||
return proxy.$el.querySelector('.verify-bar-area')
|
||||
})
|
||||
// 鼠标移动
|
||||
function move(e) {
|
||||
e = e || window.event
|
||||
if (status.value && isEnd.value === false) {
|
||||
let x
|
||||
if (!e.touches) {
|
||||
// 兼容PC端
|
||||
x = e.clientX
|
||||
} else {
|
||||
// 兼容移动端
|
||||
x = e.touches[0].pageX
|
||||
}
|
||||
const bar_area_left = barArea.value.getBoundingClientRect().left
|
||||
let move_block_left = x - bar_area_left // 小方块相对于父元素的left值
|
||||
if (
|
||||
move_block_left
|
||||
>= barArea.value.offsetWidth
|
||||
- Number.parseInt(blockSize.value.width, 10) / 2 - 2
|
||||
) {
|
||||
move_block_left
|
||||
= barArea.value.offsetWidth
|
||||
- Number.parseInt(blockSize.value.width, 10) / 2 - 2
|
||||
}
|
||||
if (move_block_left <= 0) {
|
||||
move_block_left = Number.parseInt(blockSize.value.width, 10) / 2
|
||||
}
|
||||
// 拖动后小方块的left值
|
||||
moveBlockLeft.value = `${move_block_left - startLeft.value}px`
|
||||
leftBarWidth.value = `${move_block_left - startLeft.value}px`
|
||||
}
|
||||
}
|
||||
|
||||
const refresh = () => {
|
||||
showRefresh.value = true
|
||||
finishText.value = ''
|
||||
|
||||
transitionLeft.value = 'left .3s'
|
||||
moveBlockLeft.value = 0
|
||||
|
||||
leftBarWidth.value = undefined
|
||||
transitionWidth.value = 'width .3s'
|
||||
|
||||
leftBarBorderColor.value = '#ddd'
|
||||
moveBlockBackgroundColor.value = '#fff'
|
||||
iconColor.value = '#000'
|
||||
iconClass.value = 'icon-right'
|
||||
isEnd.value = false
|
||||
|
||||
getPicture()
|
||||
setTimeout(() => {
|
||||
transitionWidth.value = ''
|
||||
transitionLeft.value = ''
|
||||
text.value = explain.value
|
||||
}, 300)
|
||||
}
|
||||
|
||||
// 鼠标松开
|
||||
function end() {
|
||||
endMovetime.value = +new Date()
|
||||
// 判断是否重合
|
||||
if (status.value && isEnd.value === false) {
|
||||
let moveLeftDistance = Number.parseInt(
|
||||
(moveBlockLeft.value || '').replace('px', ''),
|
||||
10
|
||||
)
|
||||
moveLeftDistance
|
||||
= (moveLeftDistance * 310) / Number.parseInt(`${setSize.imgWidth}`, 10)
|
||||
const data = {
|
||||
captchaType: captchaType.value,
|
||||
pointJson: secretKey.value
|
||||
? aesEncrypt(
|
||||
JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
|
||||
secretKey.value
|
||||
)
|
||||
: JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
|
||||
token: backToken.value
|
||||
}
|
||||
checkBehaviorCaptcha(data).then((res) => {
|
||||
if (res.success && res.data.repCode === '0000') {
|
||||
moveBlockBackgroundColor.value = '#5cb85c'
|
||||
leftBarBorderColor.value = '#5cb85c'
|
||||
iconColor.value = '#fff'
|
||||
iconClass.value = 'icon-check'
|
||||
showRefresh.value = false
|
||||
isEnd.value = true
|
||||
if (mode.value === 'pop') {
|
||||
setTimeout(() => {
|
||||
proxy.$parent.clickShow = false
|
||||
refresh()
|
||||
}, 1500)
|
||||
}
|
||||
passFlag.value = true
|
||||
tipWords.value = `${(
|
||||
(endMovetime.value - startMoveTime.value)
|
||||
/ 1000
|
||||
).toFixed(2)}s验证成功`
|
||||
const captchaVerification = secretKey.value
|
||||
? aesEncrypt(
|
||||
`${backToken.value}---${JSON.stringify({
|
||||
x: moveLeftDistance,
|
||||
y: 5.0
|
||||
})}`,
|
||||
secretKey.value
|
||||
)
|
||||
: `${backToken.value}---${JSON.stringify({
|
||||
x: moveLeftDistance,
|
||||
y: 5.0
|
||||
})}`
|
||||
setTimeout(() => {
|
||||
tipWords.value = ''
|
||||
proxy.$parent.closeBox()
|
||||
proxy.$parent.$emit('success', { captchaVerification })
|
||||
}, 1000)
|
||||
} else {
|
||||
moveBlockBackgroundColor.value = '#d9534f'
|
||||
leftBarBorderColor.value = '#d9534f'
|
||||
iconColor.value = '#fff'
|
||||
iconClass.value = 'icon-close'
|
||||
passFlag.value = false
|
||||
setTimeout(() => {
|
||||
refresh()
|
||||
}, 1000)
|
||||
proxy.$parent.$emit('error', proxy)
|
||||
tipWords.value = res.data.repMsg
|
||||
setTimeout(() => {
|
||||
tipWords.value = ''
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
status.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
text.value = explain.value
|
||||
getPicture()
|
||||
nextTick(() => {
|
||||
const { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
|
||||
setSize.imgHeight = imgHeight
|
||||
setSize.imgWidth = imgWidth
|
||||
setSize.barHeight = barHeight
|
||||
setSize.barWidth = barWidth
|
||||
proxy.$parent.$emit('ready', proxy)
|
||||
})
|
||||
|
||||
window.removeEventListener('touchmove', (e) => {
|
||||
move(e)
|
||||
})
|
||||
window.removeEventListener('mousemove', (e) => {
|
||||
move(e)
|
||||
})
|
||||
|
||||
// 鼠标松开
|
||||
window.removeEventListener('touchend', () => {
|
||||
end()
|
||||
})
|
||||
window.removeEventListener('mouseup', () => {
|
||||
end()
|
||||
})
|
||||
|
||||
window.addEventListener('touchmove', (e) => {
|
||||
move(e)
|
||||
})
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
move(e)
|
||||
})
|
||||
|
||||
// 鼠标松开
|
||||
window.addEventListener('touchend', () => {
|
||||
end()
|
||||
})
|
||||
window.addEventListener('mouseup', () => {
|
||||
end()
|
||||
})
|
||||
}
|
||||
watch(type, () => {
|
||||
init()
|
||||
})
|
||||
onMounted(() => {
|
||||
// 禁止拖拽
|
||||
init()
|
||||
proxy.$el.onselectstart = function () {
|
||||
return false
|
||||
}
|
||||
})
|
||||
// 鼠标按下
|
||||
function start(e) {
|
||||
e = e || window.event
|
||||
let x
|
||||
if (!e.touches) {
|
||||
// 兼容PC端
|
||||
x = e.clientX
|
||||
} else {
|
||||
// 兼容移动端
|
||||
x = e.touches[0].pageX
|
||||
}
|
||||
startLeft.value = Math.floor(
|
||||
x - barArea.value.getBoundingClientRect().left
|
||||
)
|
||||
startMoveTime.value = +new Date() // 开始滑动的时间
|
||||
if (isEnd.value === false) {
|
||||
text.value = ''
|
||||
moveBlockBackgroundColor.value = '#337ab7'
|
||||
leftBarBorderColor.value = '#337AB7'
|
||||
iconColor.value = '#fff'
|
||||
e.stopPropagation()
|
||||
status.value = true
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
secretKey, // 后端返回的ase加密秘钥
|
||||
passFlag, // 是否通过的标识
|
||||
backImgBase, // 验证码背景图片
|
||||
blockBackImgBase, // 验证滑块的背景图片
|
||||
backToken, // 后端返回的唯一token值
|
||||
startMoveTime, // 移动开始的时间
|
||||
endMovetime, // 移动结束的时间
|
||||
tipsBackColor, // 提示词的背景颜色
|
||||
tipWords,
|
||||
text,
|
||||
finishText,
|
||||
setSize,
|
||||
top,
|
||||
left,
|
||||
moveBlockLeft,
|
||||
leftBarWidth,
|
||||
// 移动中样式
|
||||
moveBlockBackgroundColor,
|
||||
leftBarBorderColor,
|
||||
iconColor,
|
||||
iconClass,
|
||||
status, // 鼠标状态
|
||||
isEnd, // 是够验证完成
|
||||
showRefresh,
|
||||
transitionLeft,
|
||||
transitionWidth,
|
||||
barArea,
|
||||
refresh,
|
||||
start
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
429
src/components/Verify/index.vue
Normal file
429
src/components/Verify/index.vue
Normal file
File diff suppressed because one or more lines are too long
3
src/types/components.d.ts
vendored
3
src/types/components.d.ts
vendored
@@ -39,5 +39,8 @@ declare module 'vue' {
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
TextCopy: typeof import('./../components/TextCopy/index.vue')['default']
|
||||
Verify: typeof import('./../components/Verify/index.vue')['default']
|
||||
VerifyPoints: typeof import('./../components/Verify/Verify/VerifyPoints.vue')['default']
|
||||
VerifySlide: typeof import('./../components/Verify/Verify/VerifySlide.vue')['default']
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import Base64 from 'crypto-js/enc-base64'
|
||||
import UTF8 from 'crypto-js/enc-utf8'
|
||||
import { JSEncrypt } from 'jsencrypt'
|
||||
import md5 from 'crypto-js/md5'
|
||||
import CryptoJS from 'crypto-js'
|
||||
|
||||
export function encodeByBase64(txt: string) {
|
||||
return UTF8.parse(txt).toString(Base64)
|
||||
@@ -24,3 +25,15 @@ export function encryptByRsa(txt: string) {
|
||||
encryptor.setPublicKey(publicKey) // 设置公钥
|
||||
return encryptor.encrypt(txt) // 对数据进行加密
|
||||
}
|
||||
|
||||
const defaultKeyWork = 'XwKsGlMcdPMEhR1B'
|
||||
|
||||
export function aesEncrypt(word, keyWord = defaultKeyWork) {
|
||||
const key = CryptoJS.enc.Utf8.parse(keyWord)
|
||||
const arcs = CryptoJS.enc.Utf8.parse(word)
|
||||
const encrypted = CryptoJS.AES.encrypt(arcs, key, {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
})
|
||||
return encrypted.toString()
|
||||
}
|
||||
|
||||
39
src/utils/verify.ts
Normal file
39
src/utils/verify.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
export function resetSize(vm) {
|
||||
let img_width
|
||||
let img_height
|
||||
let bar_width
|
||||
let bar_height // 图片的宽度、高度，移动条的宽度、高度
|
||||
|
||||
const parentWidth = vm.$el.parentNode.offsetWidth || window.innerWidth
|
||||
const parentHeight = vm.$el.parentNode.offsetHeight || window.innerHeight
|
||||
if (vm.imgSize.width.includes('%')) {
|
||||
img_width = `${(Number.parseInt(vm.imgSize.width, 10) / 100) * parentWidth}px`
|
||||
} else {
|
||||
img_width = vm.imgSize.width
|
||||
}
|
||||
|
||||
if (vm.imgSize.height.includes('%')) {
|
||||
img_height = `${(Number.parseInt(vm.imgSize.height, 10) / 100) * parentHeight}px`
|
||||
} else {
|
||||
img_height = vm.imgSize.height
|
||||
}
|
||||
|
||||
if (vm.barSize.width.includes('%')) {
|
||||
bar_width = `${(Number.parseInt(vm.barSize.width, 10) / 100) * parentWidth}px`
|
||||
} else {
|
||||
bar_width = vm.barSize.width
|
||||
}
|
||||
|
||||
if (vm.barSize.height.includes('%')) {
|
||||
bar_height = `${(Number.parseInt(vm.barSize.height, 10) / 100) * parentHeight}px`
|
||||
} else {
|
||||
bar_height = vm.barSize.height
|
||||
}
|
||||
|
||||
return {
|
||||
imgWidth: img_width,
|
||||
imgHeight: img_height,
|
||||
barWidth: bar_width,
|
||||
barHeight: bar_height
|
||||
}
|
||||
}
|
||||
@@ -18,7 +18,7 @@
|
||||
:loading="captchaLoading"
|
||||
:disabled="captchaDisable"
|
||||
size="large"
|
||||
@click="onCaptcha"
|
||||
@click="handleOpenBehaviorCaptcha"
|
||||
>
|
||||
{{ captchaBtnName }}
|
||||
</a-button>
|
||||
@@ -30,6 +30,13 @@
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<Verify
|
||||
ref="VerifyRef"
|
||||
:mode="captchaMode"
|
||||
:captcha-type="captchaType"
|
||||
:img-size="{ width: '330px', height: '155px' }"
|
||||
@success="onCaptcha"
|
||||
></Verify>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -77,10 +84,25 @@ const handleLogin = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const VerifyRef = ref<InstanceType<any>>()
|
||||
const captchaType = ref('blockPuzzle')
|
||||
const captchaMode = ref('pop')
|
||||
const captchaTimer = ref()
|
||||
const captchaTime = ref(60)
|
||||
const captchaBtnName = ref('获取验证码')
|
||||
const captchaDisable = ref(false)
|
||||
const captchaLoading = ref(false)
|
||||
|
||||
// 弹出行为验证码
|
||||
const handleOpenBehaviorCaptcha = () => {
|
||||
if (captchaLoading.value) return
|
||||
formRef.value?.validateField('phone', (valid: any) => {
|
||||
if (!valid) {
|
||||
VerifyRef.value.show()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 重置验证码
|
||||
const resetCaptcha = () => {
|
||||
window.clearInterval(captchaTimer.value)
|
||||
@@ -89,7 +111,6 @@ const resetCaptcha = () => {
|
||||
captchaDisable.value = false
|
||||
}
|
||||
|
||||
const captchaLoading = ref(false)
|
||||
// 获取验证码
|
||||
const onCaptcha = async () => {
|
||||
if (captchaLoading.value) return
|
||||
|
||||
@@ -16,12 +16,19 @@
|
||||
:loading="captchaLoading"
|
||||
:disabled="captchaDisable"
|
||||
size="large"
|
||||
@click="onCaptcha"
|
||||
@click="handleOpenBehaviorCaptcha"
|
||||
>
|
||||
{{ captchaBtnName }}
|
||||
</a-button>
|
||||
</template>
|
||||
</GiForm>
|
||||
<Verify
|
||||
ref="VerifyRef"
|
||||
:mode="captchaMode"
|
||||
:captcha-type="captchaType"
|
||||
:img-size="{ width: '330px', height: '155px' }"
|
||||
@success="onCaptcha"
|
||||
></Verify>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
@@ -127,10 +134,22 @@ const { form, resetForm } = useForm({
|
||||
rePassword: ''
|
||||
})
|
||||
|
||||
const VerifyRef = ref<InstanceType<any>>()
|
||||
const captchaType = ref('blockPuzzle')
|
||||
const captchaMode = ref('pop')
|
||||
const captchaTimer = ref()
|
||||
const captchaTime = ref(60)
|
||||
const captchaBtnName = ref('获取验证码')
|
||||
const captchaDisable = ref(false)
|
||||
const captchaLoading = ref(false)
|
||||
|
||||
// 弹出行为验证码
|
||||
const handleOpenBehaviorCaptcha = async () => {
|
||||
const isInvalid = await formRef.value?.formRef?.validateField(verifyType.value === 'phone' ? 'phone' : 'email')
|
||||
if (isInvalid) return
|
||||
VerifyRef.value.show()
|
||||
}
|
||||
|
||||
// 重置验证码
|
||||
const resetCaptcha = () => {
|
||||
window.clearInterval(captchaTimer.value)
|
||||
@@ -146,11 +165,8 @@ const reset = () => {
|
||||
resetCaptcha()
|
||||
}
|
||||
|
||||
const captchaLoading = ref(false)
|
||||
// 获取验证码
|
||||
const onCaptcha = async () => {
|
||||
const isInvalid = await formRef.value?.formRef?.validateField(verifyType.value === 'phone' ? 'newPhone' : 'email')
|
||||
if (isInvalid) return false
|
||||
// 发送验证码
|
||||
try {
|
||||
captchaLoading.value = true
|
||||
|
||||
Reference in New Issue
Block a user