diff --git a/src/apis/common/captcha.ts b/src/apis/common/captcha.ts index 895720c..35d300d 100644 --- a/src/apis/common/captcha.ts +++ b/src/apis/common/captcha.ts @@ -17,3 +17,13 @@ export function getSmsCaptcha(query: { phone: string }) { export function getEmailCaptcha(query: { email: string }) { return http.get(`${BASE_URL}/mail`, query) } + +/** @desc 获取行为验证码 */ +export function getBehaviorCaptcha(params: any) { + return http.get(`${BASE_URL}/behavior`, {params}); +} + +/** @desc 校验行为验证码 */ +export function checkBehaviorCaptcha(params: any) { + return http.post(`${BASE_URL}/behavior`, params); +} diff --git a/src/apis/common/type.ts b/src/apis/common/type.ts index c332670..f17c1dc 100644 --- a/src/apis/common/type.ts +++ b/src/apis/common/type.ts @@ -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 +} diff --git a/src/components/Verify/Verify/VerifyPoints.vue b/src/components/Verify/Verify/VerifyPoints.vue new file mode 100644 index 0000000..5dfc079 --- /dev/null +++ b/src/components/Verify/Verify/VerifyPoints.vue @@ -0,0 +1,296 @@ + + + diff --git a/src/components/Verify/Verify/VerifySlide.vue b/src/components/Verify/Verify/VerifySlide.vue new file mode 100644 index 0000000..142e000 --- /dev/null +++ b/src/components/Verify/Verify/VerifySlide.vue @@ -0,0 +1,459 @@ + + + diff --git a/src/components/Verify/index.vue b/src/components/Verify/index.vue new file mode 100644 index 0000000..25c13cf --- /dev/null +++ b/src/components/Verify/index.vue @@ -0,0 +1,429 @@ + + + + + diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 99dd03f..ce302d0 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -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'] } } diff --git a/src/utils/encrypt.ts b/src/utils/encrypt.ts index 4df2094..e91a959 100644 --- a/src/utils/encrypt.ts +++ b/src/utils/encrypt.ts @@ -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() +} diff --git a/src/utils/verify.ts b/src/utils/verify.ts new file mode 100644 index 0000000..11988bd --- /dev/null +++ b/src/utils/verify.ts @@ -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 + } +} diff --git a/src/views/login/components/phone/index.vue b/src/views/login/components/phone/index.vue index 6f97ae8..b9a13a2 100644 --- a/src/views/login/components/phone/index.vue +++ b/src/views/login/components/phone/index.vue @@ -18,7 +18,7 @@ :loading="captchaLoading" :disabled="captchaDisable" size="large" - @click="onCaptcha" + @click="handleOpenBehaviorCaptcha" > {{ captchaBtnName }} @@ -30,6 +30,13 @@ +