前端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 = 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)  //打开当前顶象弹框 并且 触发顶象 验证

 以上就是 代码使用