XW-AIOT/aiot-uniapp
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：优化验证码的代码，迁移到 components 目录下

Browse Source 
feat：在 register.vue、code-login.vue 里，增加验证码
This commit is contained in:
YunaiV
2025-12-15 21:55:56 +08:00
parent 87821086ef
commit 39c9d18403
13 changed files with 95 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/auth/code-login.vue
View File

@@ -24,6 +24,16 @@
:scene="21"
:before-send="validateBeforeSend"
/>
<view v-if="captchaEnabled">
<Verify
ref="verifyRef"
:captcha-type="captchaType"
explain="向右滑动完成验证"
:img-size="{ width: '300px', height: '150px' }"
mode="pop"
@success="verifySuccess"
/>
</view>
<!-- 登录按钮 -->
<view class="mb-2 mt-2 flex justify-between">
@@ -51,6 +61,7 @@ import { isMobile } from "@/utils/validator";
import CodeInput from "./components/code-input.vue";
import Header from "./components/header.vue";
import TenantPicker from "./components/tenant-picker.vue";
import { Verify } from '@/components/verifition';
defineOptions({
name: "SmsLoginPage",
@@ -67,10 +78,14 @@ const toast = useToast();
const loading = ref(false); // 加载状态
const redirectUrl = ref<string>(); // 重定向地址
const tenantPickerRef = ref<InstanceType<typeof TenantPicker>>(); // 租户选择器引用
const captchaEnabled = import.meta.env.VITE_APP_CAPTCHA_ENABLE === 'true'; // 验证码开关
const verifyRef = ref();
const captchaType = ref('blockPuzzle'); // 滑块验证码 blockPuzzle|clickWord
const formData = reactive({
mobile: "",
code: "",
captchaVerification: "", // 验证码校验值
}); // 表单数据
/** 页面加载时处理重定向 */
@@ -85,6 +100,18 @@ function validateBeforeSend(): boolean {
return tenantPickerRef.value?.validate() ?? false;
}
/** 获取验证码 */
async function getCode() {
// 情况一，未开启：则直接登录
if (!captchaEnabled) {
await verifySuccess({});
} else {
// 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
// 弹出验证码
verifyRef.value.show();
}
}
/** 登录处理 */
async function handleLogin() {
// 校验租户
@@ -103,11 +130,16 @@ async function handleLogin() {
toast.warning("请输入验证码");
return;
}
await getCode();
}
/** 验证码验证成功回调 */
async function verifySuccess(params: any) {
loading.value = true;
try {
// 调用短信登录接口
const tokenStore = useTokenStore();
formData.captchaVerification = params.captchaVerification;
await tokenStore.login({
type: "sms",
...formData,

432
src/pages/auth/components/Verifition/Verify.vue
View File

File diff suppressed because one or more lines are too long

251
src/pages/auth/components/Verifition/Verify/VerifyPoints.vue
View File

@@ -1,251 +0,0 @@
<template>
<view style="position: relative">
<view class="verify-img-out">
<view
:style="{
'width': setSize.imgWidth,
'height': setSize.imgHeight,
'background-size': `${setSize.imgWidth} ${setSize.imgHeight}`,
'margin-bottom': `${pSpace}px`,
}" class="verify-img-panel"
>
<view v-show="showRefresh" class="verify-refresh" style="z-index: 3" @click="refresh">
<i class="iconfont icon-refresh" />
</view>
<img
id="image" ref="canvas" :src="`data:image/png;base64,${pointBackImgBase}`"
alt="" style="display: block; width: 100%; height: 100%"
@click="bindingClick ? canvasClick($event) : undefined"
>
<view
v-for="(tempPoint, index) in tempPoints" :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"
>
{{ index + 1 }}
</view>
</view>
</view>
<!-- 'height': this.barSize.height, -->
<view
:style="{
'width': setSize.imgWidth,
'color': barAreaColor,
'border-color': barAreaBorderColor,
'line-height': barSize.height,
}" class="verify-bar-area"
>
<span class="verify-msg">{{ text }}</span>
</view>
</view>
</template>
<script setup type="text/babel" name="VerifyPoints">
import { getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from 'vue'
import { checkCaptcha, getCode } from '@/api/login'
/**
* VerifyPoints
* @description 点选
*/
import { aesEncrypt } from './../utils/ase'
const props = defineProps({
// 弹出式pop，固定fixed
mode: {
type: String,
default: 'fixed',
},
captchaType: {
type: String,
},
// 间隔
pSpace: {
type: Number,
default: 5,
},
imgSize: {
type: Object,
default() {
return {
width: '310px',
height: '155px',
}
},
},
barSize: {
type: Object,
default() {
return {
width: '310px',
height: '40px',
}
},
},
})
const emit = defineEmits(['error', 'ready', 'success'])
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(undefined)
const barAreaBorderColor = ref(undefined)
const showRefresh = ref(true)
const bindingClick = ref(true)
const imgLeft = ref('')
const imgTop = ref('')
function init() {
// 加载页面
fontPos.splice(0, fontPos.length)
checkPosArr.splice(0, checkPosArr.length)
num.value = 1
getPictrue()
nextTick(() => {
setSize.imgHeight = props.imgSize.height
setSize.imgWidth = props.imgSize.width
setSize.barHeight = props.barSize.height
setSize.barWidth = props.barSize.width
emit('ready', proxy)
})
}
onMounted(() => {
// 禁止拖拽
init()
proxy.$el.onselectstart = function () {
return false
}
})
const canvas = ref(null)
const instance = getCurrentInstance()
function canvasClick(e) {
const query = uni.createSelectorQuery().in(instance.proxy)
query.select('#image').boundingClientRect((rect) => {
imgLeft.value = Math.ceil(rect.left)
imgTop.value = Math.ceil(rect.top)
checkPosArr.push(getMousePos(canvas, e))
if (num.value === checkNum.value) {
num.value = createPoint(getMousePos(canvas, e))
// 按比例转换坐标值
const arr = pointTransfrom(checkPosArr, setSize)
checkPosArr.length = 0
checkPosArr.push(...arr)
// 等创建坐标执行完
setTimeout(() => {
// var flag = this.comparePos(this.fontPos, this.checkPosArr);
// 发送后端请求
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,
}
checkCaptcha(data).then((res) => {
if (res.repCode === '0000') {
barAreaColor.value = '#4cae4c'
barAreaBorderColor.value = '#5cb85c'
text.value = '验证成功'
bindingClick.value = false
if (mode.value === 'pop') {
setTimeout(() => {
proxy.$parent.clickShow = false
refresh()
}, 1500)
}
emit('success', { captchaVerification })
} else {
emit('error', proxy)
barAreaColor.value = '#d9534f'
barAreaBorderColor.value = '#d9534f'
text.value = '验证失败'
setTimeout(() => {
refresh()
}, 700)
}
})
}, 400)
}
if (num.value < checkNum.value) {
num.value = createPoint(getMousePos(canvas, e))
}
}).exec()
}
// 获取坐标,H5用offsetX,Y,小程序用clientX,Y,pageX,Y,x,y
function getMousePos(obj, e) {
const x = e?.offsetX ? e.offsetX : Math.ceil(e?.detail.clientX || e?.detail.pageX || e?.detail.x || 0) - imgLeft.value
const y = e?.offsetY ? e.offsetY : Math.ceil(e?.detail.clientY || e?.detail.pageY || e?.detail.y || 0) - imgTop.value
return { x, y }
}
// 创建坐标点
function createPoint(pos) {
tempPoints.push(Object.assign({}, pos))
return num.value + 1
}
async function refresh() {
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
await getPictrue()
showRefresh.value = true
}
// 请求背景图片和验证图片
async function getPictrue() {
const data = {
captchaType: captchaType.value,
}
const res = await getCode(data)
if (res.repCode === '0000') {
pointBackImgBase.value = res.repData.originalImageBase64
backToken.value = res.repData.token
secretKey.value = res.repData.secretKey
poinTextList.value = res.repData.wordList
text.value = `请依次点击` + `【${poinTextList.value.join(',')}】`
} else {
text.value = res.repMsg
}
}
// 坐标转换函数
function pointTransfrom(pointArr, imgSize) {
const newPointArr = pointArr.map((p) => {
const x = Math.round((310 * p.x) / Number.parseInt(imgSize.imgWidth))
const y = Math.round((155 * p.y) / Number.parseInt(imgSize.imgHeight))
return { x, y }
})
return newPointArr
}
</script>

345
src/pages/auth/components/Verifition/Verify/VerifySlide.vue
View File

@@ -1,345 +0,0 @@
<template>
<view style="position: relative">
<view v-if="type === '2'" :style="{ height: `${parseInt(setSize.imgHeight) + pSpace}px` }" class="verify-img-out">
<view :style="{ width: setSize.imgWidth, height: setSize.imgHeight }" class="verify-img-panel">
<img :src="`data:image/png;base64,${backImgBase}`" alt="" style="display: block; width: 100%; height: 100%">
<view v-show="showRefresh" class="verify-refresh" @click="refresh">
<view class="iconfont icon-refresh" />
</view>
<transition name="tips">
<text v-if="tipWords" :class="passFlag ? 'suc-bg' : 'err-bg'" class="verify-tips">
{{ tipWords }}
</text>
</transition>
</view>
</view>
<!-- 公共部分 -->
<view
:style="{ 'width': setSize.imgWidth, 'height': barSize.height, 'line-height': barSize.height }"
class="verify-bar-area"
>
<text class="verify-msg">{{ text }}</text>
<view
:style="{
'width': leftBarWidth !== undefined ? leftBarWidth : barSize.height,
'height': barSize.height,
'border-color': leftBarBorderColor,
'transaction': transitionWidth,
}" class="verify-left-bar"
>
<text class="verify-msg">{{ finishText }}</text>
<view
v-if="type === '2'" :style="{
'width': barSize.height,
'height': barSize.height,
'background-color': moveBlockBackgroundColor,
'left': moveBlockLeft,
'transition': transitionLeft,
}" class="verify-move-block" @touchstart="start" @touchend="end" @touchmove="move" @mouseup="end"
>
<view class="verify-icon iconfont" :class="[iconClass]" :style="{ color: iconColor }" />
<view
v-if="type === '2'" :style="{
'width': `${Math.floor((parseInt(setSize.imgWidth) * 47) / 310)}px`,
'height': setSize.imgHeight,
'top': `-${parseInt(setSize.imgHeight) + pSpace}px`,
'background-size': `${setSize.imgWidth} ${setSize.imgHeight}`,
}" class="verify-sub-block"
>
<img
:src="`data:image/png;base64,${blockBackImgBase}`" alt=""
style="display: block; width: 100%; height: 100%; -webkit-user-drag: none"
>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup name="VerifySlide">
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { checkCaptcha, getCode } from '@/api/login'
/**
* VerifySlide
* @description 滑块
*/
import { aesEncrypt } from './../utils/ase'
const props = defineProps({
captchaType: {
type: String,
},
type: {
type: String,
default: '1',
},
// 弹出式pop，固定fixed
mode: {
type: String,
default: 'fixed',
},
pSpace: {
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: '30px',
}
},
},
})
// 父级传递来的函数，用于回调
const emit = defineEmits(['success', 'error', 'ready'])
// const { t } = useI18n()
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 tipWords = ref('')
const text = ref('')
const finishText = ref('')
const setSize = reactive({
imgHeight: 0,
imgWidth: 0,
barHeight: 0,
barWidth: 0,
})
const moveBlockLeft = ref(0)
const leftBarWidth = ref(0)
// 移动中样式
const moveBlockBackgroundColor = ref(undefined)
const leftBarBorderColor = ref('#ddd')
const iconColor = ref(undefined)
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)
const instance = getCurrentInstance()
const barArea = computed(() => {
const query = uni.createSelectorQuery().in(instance.proxy)
return query.select('.verify-bar-area')
})
const rectData = ref() // 布局数据
function init() {
if (explain.value === '') {
text.value = '向右滑动完成验证'
} else {
text.value = explain.value
}
getPictrue()
nextTick(() => {
// let { imgHeight, imgWidth, barHeight, barWidth } = props.value.imgSize
setSize.imgHeight = props.imgSize.height
setSize.imgWidth = props.imgSize.width
setSize.barHeight = props.barSize.height
setSize.barWidth = props.barSize.width
emit('ready', proxy)
})
}
watch(type, () => {
init()
})
onMounted(() => {
// 禁止拖拽
init()
proxy.$el.onselectstart = function () {
return false
}
})
// 鼠标按下
function start(e) {
e = e || window.event
let x = 0
if (!e.touches) {
// 兼容PC端
x = e.clientX
} else {
// 兼容移动端
x = e.touches[0].pageX
}
barArea.value.boundingClientRect((rect) => {
rectData.value = rect
startLeft.value = Math.floor(x - rect.left)
}).exec()
startMoveTime.value = +new Date() // 开始滑动的时间
if (isEnd.value === false) {
text.value = ''
moveBlockBackgroundColor.value = '#337ab7'
leftBarBorderColor.value = '#337AB7'
iconColor.value = '#fff'
e.stopPropagation()
status.value = true
}
}
// 鼠标移动
function move(e) {
e = e || window.event
if (status.value && isEnd.value === false) {
let x = 0
if (!e.touches) {
// 兼容PC端
x = e.clientX
} else {
// 兼容移动端
x = e.touches[0].pageX
}
if (rectData.value) {
const bar_area_left = Math.ceil(rectData.value.left)
const barArea_offsetWidth = Math.ceil(rectData.value.width)
let move_block_left = x - bar_area_left // 小方块相对于父元素的left值
if (move_block_left
>= barArea_offsetWidth - Number.parseInt(Number.parseInt(blockSize.value.width) / 2) - 2
) {
move_block_left
= barArea_offsetWidth - Number.parseInt(Number.parseInt(blockSize.value.width) / 2) - 2
}
if (move_block_left <= 0) {
move_block_left = Number.parseInt(Number.parseInt(blockSize.value.width) / 2)
}
// 拖动后小方块的left值
moveBlockLeft.value = `${move_block_left - Number.parseInt(Number.parseInt(blockSize.value.width) / 2)
}px`
leftBarWidth.value = `${move_block_left - Number.parseInt(Number.parseInt(blockSize.value.width) / 2)
}px`
}
}
}
// 鼠标松开
function end() {
endMovetime.value = +new Date()
// 判断是否重合
if (status.value && isEnd.value === false) {
let moveLeftDistance = Number.parseInt((moveBlockLeft.value || '0').replace('px', ''))
moveLeftDistance = (moveLeftDistance * 310) / Number.parseInt(setSize.imgWidth)
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,
}
checkCaptcha(data).then((res) => {
if (res.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 = ''
emit('success', { captchaVerification })
}, 1000)
} else {
moveBlockBackgroundColor.value = '#d9534f'
leftBarBorderColor.value = '#d9534f'
iconColor.value = '#fff'
iconClass.value = 'icon-close'
passFlag.value = false
setTimeout(() => {
refresh()
}, 1000)
emit('error', proxy)
tipWords.value = '验证失败'
setTimeout(() => {
tipWords.value = ''
}, 1000)
}
})
status.value = false
}
}
async function refresh() {
showRefresh.value = true
finishText.value = ''
transitionLeft.value = 'left .3s'
moveBlockLeft.value = 0
leftBarWidth.value = 0
transitionWidth.value = 'width .3s'
leftBarBorderColor.value = '#ddd'
moveBlockBackgroundColor.value = '#fff'
iconColor.value = '#000'
iconClass.value = 'icon-right'
isEnd.value = false
await getPictrue()
setTimeout(() => {
transitionWidth.value = ''
transitionLeft.value = ''
text.value = explain.value
}, 300)
}
// 请求背景图片和验证图片
async function getPictrue() {
const data = {
captchaType: captchaType.value,
}
const res = await getCode(data)
if (res.repCode === '0000') {
backImgBase.value = res.repData.originalImageBase64
blockBackImgBase.value = res.repData.jigsawImageBase64
backToken.value = res.repData.token
secretKey.value = res.repData.secretKey
} else {
tipWords.value = res.repMsg
}
}
</script>

14
src/pages/auth/components/Verifition/utils/ase.ts
View File

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

14
src/pages/auth/login.vue
View File

@@ -29,10 +29,15 @@
</view>
<view v-if="captchaEnabled">
<Verify
ref="verifyRef" :captcha-type="captchaType" explain="向右滑动完成验证"
:img-size="{ width: '300px', height: '150px' }" mode="pop" @success="verifySuccess"
ref="verifyRef"
:captcha-type="captchaType"
explain="向右滑动完成验证"
:img-size="{ width: '300px', height: '150px' }"
mode="pop"
@success="verifySuccess"
/>
</view>
<!-- 登录按钮 -->
<view class="mb-2 mt-2 flex justify-between">
<text class="text-28rpx text-[#1890ff]" @click="goToSmsLogin">
@@ -86,7 +91,7 @@ import { useTokenStore } from '@/store/token'
import { ensureDecodeURIComponent, redirectAfterLogin } from '@/utils'
import Header from './components/header.vue'
import TenantPicker from './components/tenant-picker.vue'
import Verify from './components/Verifition/Verify.vue'
import { Verify } from '@/components/verifition';
defineOptions({
name: 'LoginPage',
@@ -149,7 +154,8 @@ async function handleLogin() {
}
await getCode()
}
async function verifySuccess(params) {
async function verifySuccess(params: any) {
loading.value = true
try {
// 调用登录接口

32
src/pages/auth/register.vue
View File

@@ -48,6 +48,16 @@
no-border
/>
</view>
<view v-if="captchaEnabled">
<Verify
ref="verifyRef"
:captcha-type="captchaType"
explain="向右滑动完成验证"
:img-size="{ width: '300px', height: '150px' }"
mode="pop"
@success="verifySuccess"
/>
</view>
<!-- 用户协议 -->
<view class="mb-24rpx flex items-center">
@@ -89,6 +99,7 @@ import { useTokenStore } from "@/store/token";
import { redirectAfterLogin } from "@/utils";
import Header from "./components/header.vue";
import TenantPicker from "./components/tenant-picker.vue";
import { Verify } from '@/components/verifition';
defineOptions({
name: "RegisterPage",
@@ -104,14 +115,30 @@ const toast = useToast();
const loading = ref(false); // 加载状态
const agreePolicy = ref(false); // 用户协议勾选
const tenantPickerRef = ref<InstanceType<typeof TenantPicker>>(); // 租户选择器引用
const captchaEnabled = import.meta.env.VITE_APP_CAPTCHA_ENABLE === 'true'; // 验证码开关
const verifyRef = ref();
const captchaType = ref('blockPuzzle'); // 滑块验证码 blockPuzzle|clickWord
const formData = reactive({
username: "",
nickname: "",
password: "",
confirmPassword: "",
captchaVerification: "", // 验证码校验值
}); // 表单数据
/** 获取验证码 */
async function getCode() {
// 情况一，未开启：则直接注册
if (!captchaEnabled) {
await verifySuccess({});
} else {
// 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行注册
// 弹出验证码
verifyRef.value.show();
}
}
/** 注册处理 */
async function handleRegister() {
if (!tenantPickerRef.value?.validate()) {
@@ -141,11 +168,16 @@ async function handleRegister() {
toast.warning("两次输入的密码不一致");
return;
}
await getCode();
}
/** 验证码验证成功回调 */
async function verifySuccess(params: any) {
loading.value = true;
try {
// 调用注册接口
const tokenStore = useTokenStore();
formData.captchaVerification = params.captchaVerification;
await tokenStore.login({
type: "register",
...formData,