@pubinfo/module-captcha 2.1.1

package/src/components/VerifyPoints/PubinfoFixedPoint.vue

@@ -0,0 +1,224 @@
+<script lang="ts" setup>
+import { useElementSize } from '@vueuse/core';
+import { onMounted, ref } from 'vue';
+
+import { canvasClick } from './common/checkEvent.ts';
+import { init, refresh } from './common/initFuns.ts';
+import { variable } from './common/variable.ts';
+
+const emit = defineEmits(['success']);
+
+const pointRef = ref();
+
+const { width: pointWidth } = useElementSize(pointRef);
+
+const VA = variable();
+const canvas = ref(null);
+
+onMounted(() => {
+  init(VA);
+  VA.setSize.value.imgHeight = `${pointWidth.value / 2}px`;
+  VA.realImgSize.value = {
+    width: pointWidth.value,
+    height: pointWidth.value / 2,
+  };
+});
+
+function successFun(params: any) {
+  emit('success', params);
+}
+
+// watch(
+//   () => isRefresh.value,
+//   (val) => {
+//     if (val) {
+//       refresh(VA);
+//       isRefresh.value = false;
+//     }
+//   },
+// );
+
+defineExpose({
+  refresh: () => {
+    refresh(VA);
+  },
+});
+</script>
+
+<template>
+  <div ref="pointRef" style="position: relative" :style="{ width: VA.setSize.value.imgWidth }">
+    <div class="verify-img-out" :style="{ height: `${parseInt(VA.setSize.value.imgHeight) + 10}px` }">
+      <div
+        class="verify-img-panel" :style="{ width: VA.setSize.value.imgWidth,
+                                           height: VA.setSize.value.imgHeight,
+        }"
+      >
+        <div v-show="VA.showRefresh.value" class="verify-refresh" style="z-index:3" @click="refresh(VA)">
+          <RedoOutlined :style="{ fontSize: '20px', color: 'white', transform: 'rotate(-90deg)' }" />
+        </div>
+        <img
+          ref="canvas"
+          :src="`data:image/png;base64,${VA.pointBackImgBase.value}`"
+          alt="" style="width:100%;height:100%;display:block"
+          @click="VA.bindingClick.value ? canvasClick($event, canvas, VA, successFun) : undefined"
+        >
+
+        <div
+          v-for="(tempPoint, index) in VA.tempPoints" :key="index" class="point-area"
+          :style="{
+            'background-color': '#1abd6c',
+            'color': '#fff',
+            'z-index': 2,
+            'width': '20px',
+            'height': '20px',
+            'text-align': 'center',
+            'line-height': '20px',
+            'border-radius': '50%',
+            'position': 'absolute',
+            'top': `${tempPoint.y - 10}px`,
+            'left': `${tempPoint.x - 10}px`,
+          }"
+        >
+          {{ index + 1 }}
+        </div>
+      </div>
+    </div>
+    <div
+      class="verify-bar-area"
+      :style="{ 'width': VA.setSize.value.imgWidth,
+                'height': VA.setSize.value.barHeight,
+                'color': VA.barTextColor.value,
+                'background-color': VA.barBackgroundColor.value,
+                'border-color': VA.barAreaBorderColor.value }"
+    >
+      <div>
+        <CheckOutlined v-if="VA.text.value === '验证成功'" :style="{ fontSize: '16px', color: VA.barTextColor.value, marginRight: '6px' }" />
+        <CloseOutlined v-if="VA.text.value === '验证失败'" :style="{ fontSize: '16px', color: VA.barTextColor.value, marginRight: '6px' }" />
+        <span class="verify-msg">{{ VA.text.value }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.verify-tips {
+  position: absolute;
+  bottom:0;
+  left:0;
+  right:0;
+  z-index:7;
+  height: 30px;
+  line-height:30px;
+  color: #fff;
+  padding-left:8px;
+  opacity: 1;
+}
+.suc-bg {
+  background-color: rgba(92, 184, 92, 0.5);
+  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
+}
+.err-bg {
+  background-color: rgba(217, 83, 79, 0.5);
+  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
+}
+
+/* ---------------------------- */
+/*点文字验证码*/
+.verify-bar-area {
+  position: relative;
+  box-sizing: border-box;
+  border: 1px solid #e4e7eb;
+  background-color: #f7f9fa;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.verify-bar-area .verify-move-block {
+  position: absolute;
+  top: 0px;
+  left: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 0 3px rgba(0,0,0,.3);
+  transition: background .2s linear;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.verify-bar-area .verify-move-block:hover {
+  background-color: #1991fa;
+}
+
+.verify-bar-area .verify-move-block:hover .verify-icon {
+  color: #fff;
+}
+
+.verify-bar-area .verify-left-bar {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  box-sizing: border-box;
+  cursor: pointer;
+  background-color: #7bbaf1;
+  border: 1px solid #1991fa;
+}
+
+.verify-img-panel {
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  margin: 0;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+}
+
+.verify-img-panel .verify-refresh {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  cursor: pointer;
+  background-color: rgba(0,0,0,0.12);
+  line-height: 30px;
+}
+
+.verify-img-panel .icon-refresh {
+  font-size: 20px;
+  color: #fff;
+}
+
+.verify-bar-area .verify-move-block .verify-sub-block {
+  position: absolute;
+  z-index: 3;
+  text-align: center;
+  left:0px;
+}
+
+.verify-bar-area .verify-move-block .verify-icon {
+  font-size: 18px;
+}
+
+.verify-bar-area .verify-msg {
+  z-index: 3;
+}
+
+.pubinfo-m-normal .verify-img-out {
+  width: 100%;
+  position: absolute;
+  bottom: 20px;
+  opacity: 0;
+  transition: opacity 0.5s, bottom 0.5s;
+}
+.pubinfo-m-touch .verify-img-out {
+  bottom: 40px;
+  opacity: 1;
+}
+</style>

package/src/components/VerifyPoints/PubinfoPopPoint.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { RESULT } from './common/checkEvent.ts';
+import { useToggle } from '@vueuse/core';
+import { ref, useAttrs } from 'vue';
+import Fixed from './PubinfoFixedPoint.vue';
+
+export interface PubinfoPopPointProps {
+  onSuccess?: (data: RESULT) => void
+}
+
+defineOptions({
+  name: 'PubinfoPopPoint',
+});
+
+const props = withDefaults(defineProps<PubinfoPopPointProps>(), {});
+
+const attrs = useAttrs();
+
+// 双向绑定
+const open = defineModel<boolean>('open');
+
+const setOpen = useToggle(open);
+
+const showBox = ref<boolean>(false);
+
+function onOpen() {
+  setOpen(true);
+}
+
+function onSuccess(data: RESULT) {
+  props.onSuccess?.(data);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <div>
+    <a-modal
+      v-bind="attrs"
+      v-model:open="open"
+      title="请完成安全验证"
+      :width="370"
+      :z-index="1101"
+      :destroy-on-close="true"
+      :footer="false"
+      centered
+      :mask-closable="false"
+    >
+      <Fixed @success="onSuccess" />
+    </a-modal>
+  </div>
+</template>

package/src/components/VerifyPoints/PubinfoTouchPoint.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import ClickImage from '@/images/click.png';
+import { useTouchService } from './common/touchService.ts';
+
+import Fixed from './PubinfoFixedPoint.vue';
+
+const emit = defineEmits(['success']);
+
+const { onButtonAreaMouseLeave, onMouseEnter, onMouseLeave, handleSubmit, showButton, isSuccess, inArea } = useTouchService();
+
+const pubinfoMMRef = ref<any>(null);
+
+onMounted(() => {
+  showButton.value = true;
+  isSuccess.value = false;
+  inArea.value = false;
+});
+
+function onSubmit(data: any) {
+  handleSubmit(data, emit);
+}
+
+defineExpose({
+  refresh: () => {
+    showButton.value = true;
+    isSuccess.value = false;
+    inArea.value = false;
+    pubinfoMMRef.value.refresh();
+  },
+});
+</script>
+
+<template>
+  <div relative h-40px class="w-100%">
+    <div absolute bottom-0 left-0 right-0 z-99999 class="pubinfo-m-normal" :class="{ 'pubinfo-m-touch': !showButton }" @mouseleave="onMouseLeave">
+      <div absolute bottom-0 w-full>
+        <Fixed ref="pubinfoMMRef" @success="onSubmit" />
+      </div>
+    </div>
+    <div class="button_touch" :class="{ 'pubinfo-m-success': isSuccess }" flex justify-center items-center @mouseenter="onMouseEnter" @mouseleave="onButtonAreaMouseLeave">
+      <CheckOutlined v-if="isSuccess" :style="{ fontSize: '16px', color: 'rgb(82, 204, 186)', marginRight: '6px' }" />
+      <img v-else :src="ClickImage" alt="" style="width:18px;height:18px;margin-right:8px">
+      <span>{{ isSuccess ? '验证成功' : '点此进行验证' }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.button_touch {
+  width: 100%;
+  height: 40px;
+  border-radius: 2px;
+  background: linear-gradient(180deg, #fff 0, #ebedf0 87%);
+  border: 1px solid #e4e7eb;
+  cursor: pointer;
+  font-size: 14px;
+  color: #45494c;
+}
+.pubinfo-m-normal {
+  visibility: hidden;
+  transition: visibility 0.2s;
+}
+.pubinfo-m-touch{
+  visibility: visible;
+}
+.pubinfo-m-success{
+  color: rgb(82, 204, 186);
+  background: rgb(210, 244, 239);
+  border-color: rgb(82, 204, 186);
+  cursor: default;
+}
+</style>

package/src/components/VerifyPoints/common/checkEvent.ts

@@ -0,0 +1,72 @@
+import { postAuthCaptchaCheck } from '@/api/modules/auth/renzhengfuwu';
+import { aesEncrypt } from '../../aes';
+import { refresh } from './initFuns.ts';
+
+export interface RESULT {
+  captchaVerification: string
+  captchaType: string
+}
+
+export function canvasClick(e: any, canvas: any, VA: any, callback: any) {
+  const pointObj = getMousePos(canvas, e);
+  VA.checkPosArr.push(pointObj);
+  VA.tempPoints.push(Object.assign({}, pointObj));
+  VA.num.value = VA.num.value + 1;
+  if (VA.num.value === VA.checkNum) {
+    VA.bindingClick.value = false;
+    // 按比例转换坐标值
+    const arr = pointTransfrom(VA.checkPosArr, VA.realImgSize.value);
+    VA.checkPosArr.length = 0;
+    VA.checkPosArr.push(...arr);
+    // 发送后端请求
+    const captchaVerification = VA.secretKey.value ? aesEncrypt(`${VA.backToken.value}---${JSON.stringify(VA.checkPosArr)}`, VA.secretKey.value) : `${VA.backToken.value}---${JSON.stringify(VA.checkPosArr)}`;
+    const data = {
+      captchaType: 'clickWord',
+      pointJson: VA.secretKey.value ? aesEncrypt(JSON.stringify(VA.checkPosArr), VA.secretKey.value) : JSON.stringify(VA.checkPosArr),
+      token: VA.backToken.value,
+    };
+    postAuthCaptchaCheck(data).then((res) => {
+      if (res.success) {
+        VA.barTextColor.value = '#52ccba';
+        VA.barAreaBorderColor.value = '#52ccba';
+        VA.barBackgroundColor.value = '#d2f4ef';
+        VA.showRefresh.value = false;
+        VA.text.value = '验证成功';
+        VA.bindingClick.value = false;
+        const params: RESULT = {
+          captchaVerification,
+          // token: secretKey.value ? aesEncrypt(backToken.value, secretKey.value) : aesEncrypt(backToken.value),
+          captchaType: 'clickWord',
+        };
+        setTimeout(() => {
+          // emit('success', params);
+          callback(params);
+        }, 100);
+      }
+    }).catch(() => {
+      VA.barTextColor.value = '#f57a7a';
+      VA.barAreaBorderColor.value = '#f57a7a';
+      VA.barBackgroundColor.value = '#fce1e1';
+      VA.text.value = '验证失败';
+      setTimeout(() => {
+        refresh(VA);
+      }, 200);
+    });
+  }
+};
+// 获取坐标
+function getMousePos(obj: any, e: any) {
+  const x = e.offsetX;
+  const y = e.offsetY;
+  return { x, y };
+};
+
+// 坐标转换函数
+function pointTransfrom(pointArr: any[], imgSize: any) {
+  const newPointArr = pointArr.map((p) => {
+    const x = Math.round(310 * p.x / Number.parseInt(imgSize.width));
+    const y = Math.round(155 * p.y / Number.parseInt(imgSize.height));
+    return { x, y };
+  });
+  return newPointArr;
+};

package/src/components/VerifyPoints/common/initFuns.ts

@@ -0,0 +1,44 @@
+import { postAuthCaptchaGet } from '@/api/modules/auth/renzhengfuwu';
+
+export function init(VA: any) {
+  // 加载页面
+  VA.tempPoints.splice(0, VA.tempPoints.length);
+  VA.checkPosArr.splice(0, VA.checkPosArr.length);
+  VA.num.value = 0;
+  getPicture(VA);
+};
+
+export function refresh(VA: any) {
+  VA.tempPoints.splice(0, VA.tempPoints.length);
+  VA.barTextColor.value = 'rgba(0,0,0,0.88)';
+  VA.barBackgroundColor.value = '#f7f9fa';
+  VA.barAreaBorderColor.value = '#e4e7eb';
+  VA.bindingClick.value = true;
+  VA.checkPosArr.splice(0, VA.checkPosArr.length);
+  VA.num.value = 0;
+  getPicture(VA);
+  VA.text.value = '验证失败';
+  VA.showRefresh.value = true;
+};
+
+// 请求背景图片和验证图片
+function getPicture(VA: any) {
+  const data = {
+    captchaType: 'clickWord',
+    size: '320*160',
+  };
+  postAuthCaptchaGet(data).then((res: any) => {
+    if (res.success) {
+      const captchaMessage = JSON.parse(res.data.plaintext);
+      // console.log('postAuthCaptchaGet---> ', res.data.key, captchaMessage);
+      VA.pointBackImgBase.value = captchaMessage.originalImageBase64;
+      VA.backToken.value = captchaMessage.token;
+      VA.secretKey.value = captchaMessage.secretKey;
+      VA.poinTextList.value = captchaMessage.wordList;
+      VA.text.value = `请依次点击【${VA.poinTextList.value.join(',')}】`;
+    }
+    else {
+      VA.text.value = res.repMsg;
+    }
+  });
+}

package/src/components/VerifyPoints/common/touchService.ts

@@ -0,0 +1,53 @@
+import { ref } from 'vue';
+// import { refreshFixedPoint } from './initFuns.ts';
+// 定义提交处理函数的类型
+export type EmitFunction = (event: 'success', data: any) => void;
+
+export function useTouchService() {
+  const showButton = ref<boolean>(true);
+  const isSuccess = ref<boolean>(false);
+  const inArea = ref<boolean>(false);
+
+  function handleSubmit(data: any, emit: EmitFunction) {
+    showButton.value = true;
+    isSuccess.value = true;
+    emit('success', data);
+  }
+
+  function onMouseEnter() {
+    inArea.value = true;
+    setTimeout(() => {
+      if (!isSuccess.value && inArea.value) {
+        showButton.value = false;
+      }
+    }, 300);
+  }
+
+  function onMouseLeave() {
+    // 当已经校验成功时，不做任何操作（也看不到验证码图片）
+    if (!isSuccess.value) {
+      showButton.value = true;
+    }
+  }
+
+  function onButtonAreaMouseLeave() {
+    inArea.value = false;
+  }
+
+  return {
+    showButton,
+    isSuccess,
+    inArea,
+    handleSubmit,
+    onMouseEnter,
+    onMouseLeave,
+    onButtonAreaMouseLeave,
+  };
+}
+
+// export function refreshTouchPoint() {
+//   showButton.value = true;
+//   isSuccess.value = false;
+//   inArea.value = false;
+//   refreshFixedPoint();
+// }

package/src/components/VerifyPoints/common/variable.ts

@@ -0,0 +1,76 @@
+import { reactive, ref } from 'vue';
+
+export function variable() {
+  // 后端返回的ase加密秘钥
+  const secretKey = ref('');
+  // 默认需要点击的字数
+  const checkNum = 3;
+  // 选中的坐标信息
+  // const fontPos = reactive<any[]>([]);
+  // 用户点击的坐标
+  const checkPosArr = reactive<any[]>([]);
+  // 点击的记数
+  const num = ref(0);
+  // 后端获取到的背景图片
+  const pointBackImgBase = ref('');
+  // 后端返回的点击字体顺序
+  const poinTextList = ref<any[]>([]);
+  // 后端返回的token值
+  const backToken = ref('');
+  // 图片与滑动区域的宽高
+  const setSize = ref({
+    imgHeight: '160px',
+    imgWidth: '100%',
+    barHeight: '40px',
+  });
+  const realImgSize = ref({
+    width: 0,
+    height: 0,
+  });
+  // 图片上显示的点击位置
+  const tempPoints = reactive<any[]>([]);
+  // 下方的文字显示
+  const text = ref('');
+  // 下方文字显示颜色
+  const barTextColor = ref('rgba(0,0,0,0.88)');
+  // 下方的背景色
+  const barBackgroundColor = ref('#f7f9fa');
+  // 下方的边框色
+  const barAreaBorderColor = ref('#e4e7eb');
+  // 是否展示刷新按钮
+  const showRefresh = ref(true);
+  // 是否绑定点击事件
+  const bindingClick = ref(true);
+
+  return {
+    secretKey,
+    // setSecretKey,
+    checkNum,
+    checkPosArr,
+    // setCheckPosArr,
+    num,
+    // setNum,
+    pointBackImgBase,
+    // setPointBackImgBase,
+    poinTextList,
+    // setPoinTextList,
+    backToken,
+    // setBackToken,
+    setSize,
+    realImgSize,
+    tempPoints,
+    // setTempPoints,
+    text,
+    // setText,
+    barTextColor,
+    // setBarTextColor,
+    barBackgroundColor,
+    // setBarBackgroundColor,
+    barAreaBorderColor,
+    // setBarAreaBorderColor,
+    showRefresh,
+    // setShowRefresh,
+    bindingClick,
+    // setBindingClick,
+  };
+}

package/src/components/VerifyPoints/pubinfoPopPoint.ts

@@ -0,0 +1,34 @@
+import { createApp, h } from 'vue';
+
+import PubinfoPopPoint from './PubinfoPopPoint.vue';
+
+export function pubinfoPopPoint(): Promise<any> {
+  return new Promise((resolve) => {
+    const app = createApp({
+      render() {
+        return h(PubinfoPopPoint, {
+          open: true,
+          onCancel: () => {
+            close();
+            resolve(null);
+          },
+          onSuccess: (...arg) => {
+            resolve(...arg);
+            close();
+          },
+        });
+      },
+    });
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    app.mount(container);
+
+    function close() {
+      setTimeout(() => {
+        app.unmount();
+        document.body.removeChild(container);
+      }, 500);
+    }
+  });
+}