顶象 验证 的插件 不知道大家使用过没有
顶象-业务安全引领者，让数字世界无风险
可以防止 机器人刷接口 等 可以在任何 加密操作中使用
下面我直接 贴代码 解释
<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 = false
emit("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) //打开当前顶象弹框 并且 触发顶象 验证
以上就是 代码使用
