前端vue 3中使用 顶象 vue3 版本
顶象 验证 的插件 不知道大家使用过没有
顶象-业务安全引领者，让数字世界无风险
可以防止 机器人刷接口 等 可以在任何 加密操作中使用
下面我直接 贴代码 解释
<script src="https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/v5/index.js" crossorigin="anonymous"id="dx-captcha-script"></script>index.html 引入 以上 script 相当于 顶象的cdn 模式
我封装了一个vue3 的顶象组件
当然 这个是需要在官网注册的
dingxiang.vue 组件
<template><t-dialog v-model:visible="showFlag" style="z-index: 2;" :footer="false"><div style="margin-left: 25px" ref="captchaRef"></div></t-dialog></template><script setup>
import { ref } from 'vue';const emit = defineEmits(["onSuccessfully"])
const captchaRef = ref(null)
// 是否开启弹框
let showFlag = ref(false)
const setDiolag = (flag) => {showFlag.value = flag
}
// 开启
const callbackFn = (visible) => {setTimeout(() => {return new Promise((resolve, reject) => {showFlag.value = visible_dx.Captcha(captchaRef.value, {appId: "xxxxxxxxxxxxxx",success: (token) => {resolve({ token });showFlag.value = falseemit("onSuccessfully", token)},});});}, 1000)
}
defineExpose({callbackFn,setDiolag
})</script>
<style scoped>
v-deep.el-dialog__header {padding: 0 !important;
}.el-dialog__body {padding-top: 0;
}
</style>
父组件中使用
我们可以在登录注册的时候 触发这个弹框
<DingXiang @onSuccessfully="stepDingxiangSuccess" ref="dingxiangRef" />const dingxiangRef = ref()const stepDingxiangSuccess = (token: any) => {dingxiangRef.value.setDiolag(false)login(token)
}dingxiangRef.value.callbackFn(true) //打开当前顶象弹框 并且 触发顶象 验证
以上就是 代码使用